微信小程序—跳转页面同时传递对象参数

423 阅读1分钟

比如有一个需求

点击首页home的某个地方,跳转到宠物信息页面petInfo,并将首页中的某些对象类型数据传给petInfo

代码实现

绑定传送的值

使用data-xxx="{{传的数据}}"绑定要传的数据

home.wxml

<block wx:for="{{pets}}" wx:key="id">
        <view bindtap="goPetInfo" data-pet="{{item}}"> 
        ...以下省略

将对象类型数据转成字符串

触发点击事件goPetInfo,在e身上找到绑定的数据,再将数据取出来,并转换成字符串,在将字符串接在url

home.js

goPetInfo(e) {
    let tempObj = e.currentTarget.dataset.pet
    let tempStr = JSON.stringify(tempObj)
    wx.navigateTo({
      url: '../petInfo/petInfo?pet=' + tempStr,
    })
}

跳转到新页面后,再将数据换回对象类型

petInfo.js

/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
    let petObj = JSON.parse(options.pet)
    this.setData({
      pet: petObj
    })
},