微信小程序携带参数的页面跳转

日常我们在手机app购物的时候，点击app主页琳琅满目的商品，就会跳转到商品的具体页面。

无论我们点击哪个商品，跳转到商品具体页面的布局都是一样的，但页面内的数据不一样，比如说商品名称，图片等等不一样。这就是在点击商品的时候，在跳转到具体页面时候传递了参数，根据参数的不同，页面的数据也不一样。

所以我们现在简单讲一下在微信小程序里面，如何在跳转时候，携带参数。

wmxl部分

首先我们使用wx:for将js文件里面data里面的数据拿出来，循环遍历来渲染页面。

使用bindtap="gmJump"来给view添加点击事件，名称叫gmJump，这个函数就是写跳转功能的。

比如说手机淘宝app主页，瀑布流布局配合懒加载，在下滑的时候，渲染的商品数据量也在增加，渲染的数据是比较多的，怎么才能在点击一个商品的时候，在跳转时候只带这一个商品的数据进行跳转，而不是把所有商品数据都带着跳转呢。

我们使用data-num="{{item}}"，将数据绑定在某个地方，至于是什么地方，我们接着看。

<view wx:for="{{dataArr}}" wx:key="index" data-num="{{item}}" bindtap="gmJump">
     //省略的dom结构，都是在根据数据渲染界面，所以省去。
</view>

跳转函数

绑定的数据

我们跳转函数gmJump中，我们写一个形参，叫e。我们打印一下e，看看里面有什么。

gmJump(e){//携带参数跳转
    console.log(e);
}

打印结果如下图，这个e是一个对象，就是元素的所有信息。我们将数据就是绑给了这个元素的信息上。

 展开数据，在e.currentTarget.dataset.num里面，就是我们绑定进去的数据。所以我们可以对这部分数据进行处理。

 携带参数跳转函数

首先我们把需要的数据e.currentTarget.dataset.num赋值给一个变量det。

然后使用wx.navigateTo写跳转，在url后面拼接数据，注意，在英文问号后面拼接名字，然后在引号外用加号拼接数据。

我们使用JSON.stringify将复杂的对象数据，转换成字符串数据，拼接在url后面。如果我们直接拼接复杂的对象数据，会报错。

  gmJump(e){//携带参数跳转
    console.log(e);
    let det = e.currentTarget.dataset.num.attributes
    wx.navigateTo({
      url: '跳转去的url地址?det='+JSON.stringify(det),
      success: ()=>{
        console.log("成功");
      }
    })
  },

跳转页面数据的接收

接收数据与数据处理

跳转到的页面，可以通过自身的生命周期函数onLoad（生命周期函数--监听页面加载），来接收传过来的数据。

onLoad(options) {
    let opt = JSON.parse(options.det)//传过来的参数进行处理
    this.setData({//将传过来的数据赋值给data里面的dataArr
      dataArr: opt,
    })
    // console.log(this.data.dataArr);
}

我们直接给onLoad函数写一个形参options，打印一下这个options是什么。

如图所示，这就是我们传递来的数据。但它是字符串形式的，我们必须将其转成对象形式，才能对其进行操作。 所以我们使用JSON.parse()，将字符串数据转换成对象，方便我们操作数据。

 转换数据完成后，再打印一遍数据，看看是什么。如下数据变成了正常的对象形式，我们可以对数据进行操作了。

 将数据保存到data里面

之后我们使用this.setData，将数据保存到data里。我是定义了一个dataArr，将数据保存在这。之后在渲染页面的时候，直接操作data里面这个数据就可以了。

 this.setData({
      dataArr: opt,
 })

至此我们完成了微信小程序里面页面之间携带参数的跳转，感谢您的阅读。