微信小程序如何实现页面传参

目录

前言

路径传递

在onLoad里接收参数

 其他位置获取参数

全局变量

数据缓存

事件通信

使用wx自定义小程序全局方法和全局变量 

总结

---

前言

只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递，下面我总结了 n 种页面方法。

路径传递

通过在url后面拼接参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’。

在onLoad里接收参数

案例：A页面带参数跳转到B页面
A页面跳转代码

goB(){
    wx.navigateTo({
      url: '/pages/B/index?id=value',
    })
  },

B页面接收代码

onLoad: function (options) {
	console.log('id', options.id)
}

上面的案例是字符串参数，但是很多情况下需要传递对象，如下方代码

Page({
  data: {
    userInfo:{
      name:'cym',
      age:16
    }
  },
  goB(){
    wx.navigateTo({
      url: '/pages/B/index?id='+this.data.userInfo,
    })
  },
})

如果使用上面同样的方式结构，输出的结果是：[object Object]

这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递，再到接收页面通过JSON.parse解析使用。

A页面跳转代码

 goB(){
    let userStr = JSON.stringify(this.data.userInfo)
    wx.navigateTo({
      url: '/pages/B/index?id='+userStr,
    })
  }

B页面接收代码

onLoad: function (options) {
    console.log(