微信小程序返回上级页面传参的几种方法-526互联

文章目录
1、使⽤本地缓存Storage实现
2、使⽤⼩程序的Page页⾯栈getCurrentPages实现
3、使⽤globalData实现
4、使⽤wx.navigateTo API的events实现

在做微信小程序跳转页面，经常会遇到二级页面要返回上级页面，并且需要携带参数，wx.navigateTo()跳转大家都知道直接在url上面拼接参数，之后再二级页面onLoad(options)里获取，但是返回页面wx.navigateBack()不可以那样做，所以就可以用以下几种方式来做，具体看个人业务适合用哪种吧，没有固定的。
1、使⽤本地缓存Storage实现
setStorage存储

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

// 异步存储
wx.setStorage({
　　key:"key",
　　data:"value"
})

// 开启加密存储
wx.setStorage({
　　key: "key",
　　data: "value",
　　encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
　　success() {
　　　　wx.getStorage({
　　　　key: "key",
　　　　encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
　　　　success(res) {
　　　　console.log(res.data)
　　　　}
　　　　})
　　}
})

// 同步存储
try {
　　wx.setStorageSync('key', 'value')
} catch (e) { }

getStorage获取

从本地缓存中异步获取指定 key 的内容。

// 异步获取
wx.getStorage({
　　key: 'key',
　　success (res) {
　　　　console.log(res.data)
　　}
})

// 开启加密存储
wx.setStorage({
　　key: "key",
　　data: "value",
　　encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
　　success() {
　　　　wx.getStorage({
　　　　key: "key",
　　　　encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true
　　　　success(res) {
　　　　　　console.log(res.data)
　　　　}
　　　　})
　　}
})

// 同步获取
try {
　　var value = wx.getStorageSync('key')
　　if (value) {
　　// Do something with return value
　　}
} catch (e) {
　　// Do something when catch error
}

removeStorage、clearStorage清除缓存

清理本地数据缓存。

// 从本地缓存中移除指定 key。
wx.removeStorage({
　　key: 'key',
　　success (res) {
　　　　console.log(res)
　　}
})

try {
　　wx.removeStorageSync('key')
} catch (e) {
　　// Do something when catch error
}

// 清理本地数据缓存。
wx.clearStorage()

try {
　　wx.clearStorageSync()
} catch(e) {
　　// Do something when catch error
}

2、使⽤⼩程序的Page页⾯栈getCurrentPages实现
在当前页设置上一页的data

【页面A使用wx.navigateTo跳转到页面B】

// 页面A
Page({
　　data: { name: '' },
　　//更新name
　　changeData: function(name){
　　this.setData({ name: name })
　　}
})

// 页面B
Page({
　　// 此方法用于文本框输入回调
　　onInputback : function (e) {
　　//获取页面栈
　　　　var pages = getCurrentPages();
　　　　if(pages.length > 1){
　　　　//上一个页面实例对象
　　　　var prePage = pages[pages.length - 2];
　　　　// 调用上个页面的方法
　　　　prePage.changeData(e.detail.value)
　　　　}
　　}
})

3、使⽤globalData实现
使用全局存储保存值，在需要的地方使用或修改

var app = getApp();
Page({
onLoad: function() {
// 获取globalData里的值
console.log(app.globalData.xxx);

// 设置globalData里的值
getApp().globalData.xxx = 'abc'
}
})

4、使⽤wx.navigateTo API的events实现
wx.navigateTo的events的实现原理是利⽤设计模式的发布订阅模式实现的

wx.navigateTo({
url: 'test?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' })
}
})

//test.js
Page({
onLoad: function(option){
console.log(option.query)
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
// 监听 acceptDataFromOpenerPage 事件，获取上一页面通过 eventChannel 传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
})
比较：

globalData和Storage两种⽅法在页⾯渲染效果上⽐其他两种稍微慢⼀点
getCurrentPages和events两种⽅法在B页⾯回退到A页⾯之前已经触发了更新，
⽽globalData和Storage两种⽅法是等返回到A页⾯之后，在A页⾯才触发更新。
并且globalData和Storage两种⽅式，
要考虑到A页⾯更新完以后要删除globalData和Storage的数据，
避免onShow⽅法⾥⾯重复触发setData更新页⾯。
所以个⼈更推荐⼤家使⽤getCurrentPages和events两种⽅式。**