小程序页面之间数据传递的五种方法

最新推荐文章于 2024-07-18 08:40:23 发布

黑猫_默雨

最新推荐文章于 2024-07-18 08:40:23 发布

阅读量2.5k

点赞数

分类专栏：小程序文章标签：小程序 javascript 前端

本文链接：https://blog.csdn.net/weixin_44001906/article/details/127106277

版权

本文详细介绍了小程序中页面间数据传递的五种方法，包括URL参数传递、EventChannel双向通信、本地缓存wx.setStorageSync、全局App实例以及Page间的参数传递。适合于不同场景下的数据交互需求。

摘要由CSDN通过智能技术生成

小程序页面之间数据传递的五种方法

使用 `wx.navigateTo()` 时，在 url 中拼接,这种方法适用于数据量少的情况

跳转前A页面在 url 中拼接参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；

wx.navigateTo({
     
    url: '/somePathXXX/somePathXXX?keyA=valueA&keyB=valueB'
})

跳转到B页面在生命周期函数 onLoad 中接收

onLoad: function (options) {
     
    let keyA = options.keyA
    let keyB = options.keyB
},

如果需要传递对象或数组，需先将对象或数据转为JSON字符串

let data = {
     
    name: 'sun',
    sex: '女',
    age: 20
}
let dataStr = JSON.stringify(data)
wx.navigateTo({
     
  url: '/somePathXXX/somePathXXX?dataStr=' + dataStr,
})

接收时再转换回对象或数组

onLoad: function (options) {
     
    let data = JSON.parse(options.dataStr)
    console.log(data); // {name: "sun", sex: "女", age: 20}
},

使用 wx.navigateTo() 时，通过 eventChannel 向被打开页面传送数据，或被打开页面向原页面传递数据，适合数据量大或者相对复杂的数据传递

① A页面跳转至B页面，同时A页面向B页面传递数据

跳转前A页面：
```
let data = {
     
    name: 'sun',
    sex: '女',
    pats: [ 'cat', 'dog'
```