微信小程序携带参数的页面跳转-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序携带参数的页面跳转。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

wmxl部分

跳转函数

绑定的数据

携带参数跳转函数

跳转页面数据的接收

接收数据与数据处理

将数据保存到data里面

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()，将字符串数据转换成对象，方便我们操作数据。

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