微信小程序返回上级页面传参的几种方法
文章目录
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
var pages = getCurrentPages(); // 获取页面栈
var currPage = pages[pages.length - 1]; // 当前页面
var prevPage = pages[pages.length - 2]; // 上一个页面
prevPage.setData({
// 要设置的值
mydatas: {
a:1,
b:2
}
})
wx.navigateBack({ delta: 1})
直接调用方法名来更新数据
【页面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两种⽅式。**
