微信小程序跳转传参的方法-Toy模板网

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

目的：

带着第一个页面的id，传到第二个页面，实现同一个页面，点击不同商品显示对应的数据

首先在第一个页面的js文件中写好接口


Page({
  data: {
    content:"",
  },
  onLoad:function(options){
    let that = this;
        wx.request({
      url: '接口',
      data:{},
      method:"GET",
      header:{
        "content-type":"application/json"
      },
      success:function(res){
        console.log(res.data)
        that.setData({
          content:res.data.prolist,
        })
      },
    }) 
  },
});

随后在wxml中写上点击事件，注意这个 data-id="{{item.id}}"

  <view class="content" wx:for="{{content}}" wx:key="index" data-id="{{item.id}}" bindtap="clickMe">

随后在写上点击事件

 clickMe(e) {
    console.log(e);
    }

先console一个e 看需要拿到什么数据

微信小程序跳转传参的方法

console的结果是currentTarget下面的dataset 里面的id，就随着这样的方式写

  clickMe(e) {
    console.log(e);
    let pid = e.currentTarget.dataset.id; //获取到id
    wx.navigateTo({
      url: '../nav/navs?id='+pid,//传id
    })
    }

第二页面接收数据

接收数据就相对简单很多了，接着往下看吧


Page({

  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let that = this;
    wx.request({
      url: '接口',
      data: {
        pro_id:options.id,//获取到传过来的id
      },
      method: 'GET',
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        that.setData({
        })
      }
    });
  },
})