常见传值方案
- url传参
假设数据由A传递到B
A：
//基本数据类型
wx.navigateTo({
url: `/pages/detail/index?id=${id)}`
})
//引用型数据
wx.navigateTo({
url: `/pages/detail/index?item=${JSON.stringify(item)}`
})
B：
onLoad: function (options) {
const id = options.id;
const item = JSON.parse(options.item)
}
- storage缓存
存在问题
- 缓存先将数据存入存储，再到另外一个页面去读取，如果数据涉及到了多个页面，则可能会导致数据的紊乱。
- 缓存和url能传递的参数都只能支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
eventChannel
在 2019 年 7 月 2 日的小程序基础库版本更新 v2.7.3 中，小程序新增了一个页面间通讯的接口，帮助我们的小程序完成不同页面间数据同步的功能。
A向B（首页向详情页）传递数据：
A:
const detail = item
wx.navigateTo({
url: `/pages/detail/index?id=${id)}`,
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('getDetail', detail)
}
})
B:
onLoad: function (options) {
const eventChannel = this.getOpenerEventChannel(); //取到事件对象
eventChannel.on("getDetail", data => {//监听getDetail事件，获取A页面通过eventChannel传送到当前页面的数据
……
});
},
B向A（详情页向首页）传递数据：
A:
wx.navigateTo({
url: `/pages/detail/index?id=${id)}`,
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
})
B:
onLoad: function(option){
const eventChannel = this.getOpenerEventChannel();
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
}
