微信小程序-页面之间跳转传值与取值(商品简介到详情跳转示例)

以商品简介界面跳转到商品详情界面为例子讲解,下面例子对应的界面就是home.wxml跳转到goodsDetail.wxml。


1.在简介界面的wxml中使用data-xxx进行传值

data-goodsid="{{item.id}}" 即是数组每项中的id字段。
微信小程序-页面之间跳转传值与取值(商品简介到详情跳转示例)

2.编写点击事件,取值并跳转

刚刚在wxml里bindtap了一个名为goGoodsDetail的点击事件。
在这个跳转函数中,使用e.currentTarget.dataset.goodsid获取到了刚刚在wxml里写的item.id值。
获取到值后,使用wx.navigateTo带参数传值跳转。
微信小程序-页面之间跳转传值与取值(商品简介到详情跳转示例)

3.在详情界面中接收传过来的ID值

在onLoad生命周期函数中,使用options.id即可接收到刚刚wx.navigateTo带的id参数,然后进行setData赋值。后续就可以通过id来查询商品对应的详情信息了。获取到数组再进行页面渲染。(我这里是死数据,就不演示了)
(注意这里是options.id,如果搞不清楚,建议console.log(options)打印出来看看)
微信小程序-页面之间跳转传值与取值(商品简介到详情跳转示例)

以上就是微信小程序,从一个页面传值到另一个页面接收并赋值的具体方法。