由于经常需要进行页面间传参且各种传参的业务场景也不相同,根据官方文档和日常工作进行了总结。共有五种传参方式,各位有什么关于页面间传参的奇思妙想也可在评论区提出,大家共同探讨
概览:
方式 | 优点 | 缺点 |
---|---|---|
globalData | 双向传参、全应用可用 | 不及时 |
storage | 双向传参、全应用可用 | 不及时 |
路由 | 简单方便、及时 | 正向传参 |
通信通道 | 双向传参、及时 | 仅wx.navagateTo() 接口调用才可用 |
页面栈 | 可操作数据和函数、及时 | 反向传参、仅wx.navagateTo() 和<navigator open-type="navigateTo" url="/bbb?id=1"></navigator> 才可用 |
说明:
globalData
是小程序app.js
中固定的一个属性,存储的数据可在全项目任意处使用
代码示例:
// app.js App({ globalData:{}, }) // aaa.js const app = getApp(); app.globalData.name='xiaowang'; // bbb.js const app = getApp(); console.log(app.globalData.name) //xiaowang
说明:
storage
是微信分给每个小程序的缓存,单个参数最大1M,数据总和最大10M
代码示例:
// aaa.js Page({ data:{ name:'xiaowang' }, }) //只支持原生类型、Date、及能够通过JSON.stringify序列化的对象 wx.setStorageSync('name',this.data.name) // bbb.js console.log(wx.getStorageSync(name)) //xiaowang
说明:
url
上直接携带参数长度是有限的且不支持特殊符号,可用编码、解码的方式解决
代码示例:
// aaa.js //跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 wx.switchTab({ url:'/bbb?id=1', }) //关闭所有页面,打开到应用内的某个页面 wx.reLaunch({ url: '/bbb?id=1', }) //关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 wx.redirectTo({ url: '/bbb?id=1', }) //保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。 wx.navigateTo({ url: '/bbb?id='+ encodeURIComponent(this.data.id), }) //以上四种路由方式在传参和接参上没有任何区别 // bbb.js Page({ //地址传参带过来的参数只能在该方法的options参数中获取 onLoad:function(options){ console.log(decodeURIComponent(options.id)) //'1' ,无论传的变量是数字、布尔还是对象接收的时候都是字符串 }, })
// aaa.wxml <view> <navigator open-type="switchTab" url="/bbb?id=1">跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面</navigator> <navigator open-type="reLaunch" url="/bbb?id=1">关闭所有页面,打开到应用内的某个页面</navigator> <navigator open-type="redirectTo" url="/bbb?id=1">关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面</navigator> <navigator open-type="navigateTo" url="/bbb?id=1">保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面</navigator> </view> //以上四种路由方式在传参和接参上没有任何区别
// bbb.wxml Page({ //地址传参带过来的参数只能在该方法的options参数中获取 onLoad:function(options){ console.log(options.id) //'1' ,无论传的变量是数字、布尔还是对象接收的时候都是字符串 }, })
说明:通信通道是
wx.navitageTo()
独有的
代码示例:
// aaa.js wx.navigateTo({ url: '/bbb?id=1', events: { // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据 acceptDataFromOpenedPage: function(data) {//参数名字随便起,前后页面对应上即可 //对发送回来的数据进行处理 console.log(data) }, someEvent: function(data) {//参数名字随便起,前后页面对应上即可 console.log(data) } }, success: function(res) { // 通过eventChannel向被打开页面传送数据 res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })//参数名字随便起,前后页面对应上即可 }, }) //bbb.js Page({ onLoad: function(option){ //获取通信通道 const eventChannel = this.getOpenerEventChannel() // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据 eventChannel.on('acceptDataFromOpenerPage', function(data) { //对发送过来的数据进行处理 console.log(data) }) //向上一页面发送数据 eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'}); eventChannel.emit('someEvent', {data: 'test'}); }, })
说明:只对当前页面栈中存在的页面生效
代码示例:
// aaa.js Page({ data:{ name:'xiaowang', age:22 }, eatFood:function(food){ console.log('eating '+ food) }, }) // bbb.js Page({ onLoad: function (options) { //获取当前页面栈 const pages = getCurrentPages(); //获取上一页面对象 let prePage = pages[pages.length - 2]; console.log(prePage.data.name) //'xiaowang' prePage.eatFood('apple')//eating apple }, })