微信小程序--传参

版权声明：本文为博主原创文章，未经博主允许不得转载。如有转载请留言，谢谢~ https://blog.csdn.net/qq_38209578/article/details/86606817

本文主要介绍微信小程序如何跨页面传参

方法一：通过js带参数跳转页面(常用)

相关代码如下：
mall.wxml

<block  wx:for="{{data}}" wx:key="" wx:for-index="index">
 <view class='relative food-list-wrapper' bindtap='detailTap' data-id="{{index}}">  // `data-id`为所需传参的对象;`detailTap`为点击跳转事件
    <template is="list" data="{{item}}"/> // 列表页的代码
  </view>
</block>

mall.js

 detailTap: function (event) {//参数传递
    let postId = event.currentTarget.dataset.id; // 获取所需传递的参数对象
    if (postId != "" || postId != undefined) {
      wx.navigateTo({
        url: 'mallInfo?id=' + postId, // 页面带参数跳转
      })
    }
  },

mallInfo.js

 onLoad: function (options) {
    if (options) {
      console.log(options.id); // 此处为我们从上一个页面传递过来的参数对象（可以是一个数组）
      this.setData({
        id: options.id
      })
    }
    // this.initData(); //获取详情页数据
  },

方法二：通过本地缓存，跨页面获取

mall.wxml代码如上所示
mall.js

 detailTap: function (event) {
    let postId = event.currentTarget.dataset.id;
    if (postId != "" || postId != undefined) {
      wx.setStorageSync('id', postId);//第一次点击之后存储数据在本地
      wx.navigateTo({
        url: 'mallInfo,
      })
    }
  },

mallInfo.js

 onLoad: function (options) {
 	let id= wx.getStorageSync(id);/**获取本地同步数据 */
    if (id) {
      console.log(id); // 此处为缓存本地的参数对象（可以是一个数组）
      this.setData({
        id:id
      })
    }
     // this.initData(); //获取详情页数据
  },