微信小程序中页面间传值的2种方法

1. 介绍

微信小程序是指可以在微信中使用的应用程序，它们基于微信开发者工具开发，使用JavaScript、Json和WXML等技术构建。在开发微信小程序时，页面间的数据传递是很重要的一环，本文将介绍两种在微信小程序中实现页面间传值的方法。

2. 方法一：url传参

2.1. 传递参数

最简单的一种传递数据的方式就是通过url传参的方式，在跳转到下一个页面时将数据以参数的形式附加在url后面，下一个页面可以通过获取url后面带的参数来获得传递过来的数据。具体来说，可以通过 navigateTo 或 redirectTo 、switchTab 或 reLaunch 方法跳转到下一个页面，并通过传递options参数来传递数据。

// 第一个页面
wx.navigateTo({
  url: 'pages/second/second?name=张三&age=18',
})
// 第二个页面
Page({
  onLoad: function(options) {
    console.log(options.name) // 打印结果是：张三
    console.log(options.age) // 打印结果是：18
  }
})

2.2. 接收参数

接收参数的方式是在下一个页面的 onLoad 生命周期函数中，通过获取options参数来获得传递过来的数据，如下面的示例代码所示：

Page({
  onLoad: function(options) {
    console.log(options.name) // 打印结果是：张三
    console.log(options.age) // 打印结果是：18
  }
})

3. 方法二：事件传参

第二种在微信小程序中实现页面间传值的方法是事件传参，通过向下一个页面发送事件，传递数据。具体来说，可以通过在上一个页面中定义< strong>Page的onLoad函数中定义事件

Page({
  onLoad: function(options) {
    var that = this;
    wx.request({
      url: 'https://api.github.com/users',
      success: function(res){
        that.setData({
          userList: res.data
        });
        wx.navigateTo({
          url: 'result?userList=' + JSON.stringify(res.data),
        })
      }
    })
  },
})

然后，在下一个页面中，在页面中定义< strong>data方法中的一个变量来存储传递过来的数据：

Page({
  data: {
    userList: []
  },
  onLoad: function (options) {
    console.log(options.userList);
    this.setData({
      userList: JSON.parse(options.userList)
    })
  }
})

4. 选择何时采用哪种方法

在实际使用中，应根据实际情况选择何时采用哪种方法。如果需要在跳转到下一个页面时，需要传递大量的数据时，建议采用第二种方法，即事件传参的方式，如果只需要传递一些简单的数据，则可以采用第一种方式，即URL传参的方式。

5. 总结

在微信小程序中，页面间的数据传递是非常重要的一环，而url传参和事件传参是两种常见的传递数据的方式。建议在实际应用中根据实际情况选择何时采用哪种方式。