小程序的页面跳转API像wx.navigateTo()、wx.redirectTo()之类的,都是跳转到一个全新的页面,当这个页面是表单的时候,有时候需要跳转到其它页面选取信息后再跳转回来,那之前填的信息就必须得存在。
小程序的页面跳转API像wx.navigateTo()、wx.redirectTo()之类的,都是跳转到一个全新的页面,当这个页面是表单的时候,有时候需要跳转到其它页面选取信息后再跳转回来,那之前填的信息就必须得存在,这个时候可以当跳转到选择信息的页面,选中信息后设置设置上一页的data,然后再返回到上一页,这样数据都会存在。 |
方法一 :
把当前页面数据放入本地缓存( wx.setStorage(wx.setStorageSync),上一个页面再从缓存中取出(wx.getStorage(wx.getStorageSync))同时退出登录时要清除缓存(wx.clearStorage(wx.clearStorageSync))。处理不好的话容易出问题,不够优雅,建议使用方法二。
方法二:
在当前页设置上一页的data,例如
var pages = getCurrentPages();
// var currPage = pages[pages.length - 1]; // 当前页面
var prevPage = pages[pages.length - 2]; // 上一个页面
// 直接调用上一个页面的setData()方法,把数据存到上一个页面中去
prevPage.setData({
liveId: that.liveId
});
当然这个“liveId”必须是上一页有的数据才行,即必须在data里有定义
在上一页的onshow里取数据:
onShow() {
let that = this;
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; // 当前页面
that.liveId = currPage.data.liveId;
}
直接调用方法名来更新数据
页面A:
Page({
data: {
name: ''
},
...
,
//更新name
changeData: function(name){
this.setData({
name: name
})
}
})
页面B,假设有一个文本框用于输入姓名,点击返回按钮后更新页面A的name
Page({
//此方法用于文本框输入回调
inputTyping: function (e) {
//获取页面栈
var pages = getCurrentPages();
if(pages.length > 1){
//上一个页面实例对象
var prePage = pages[pages.length - 2];
//关键在这里
prePage.changeData(e.detail.value)
}
}
})
这样就可以实现数据传递给上一个页面,要注意页面A必须使用wx.navigateTo跳转到页面B,不能使用wx.redirectTo,这样会关闭上一个页面,导致页面B无法获取上一页Page实例。
方法三:
在app.js中设置全局变量,当前页赋值,上一页取之。
例如:
globalData: {
userInfo: null,
}
注意:方法一,方法三,都需要重新刷新页面数据所走方法为:
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
另外补充两种方法:
方法四:使用 WxNotificationCenter.js
微信小程序通知广播模式类,降低小程序开发的耦合度
使用例子
- 主页面注册事件
-
// 引入WxNotificationCenter 工具 const WxNotificationCenter = require("../../utils/WxNotificationCenter.js"); // 回调函数传值 onPickerCountry: function (country) { this.setData({ country: country }); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { WxNotificationCenter.addNotification("testNotificationName", this.onPickerCountry, this); }, // 跳转到子页面 pickerCountry: function(){ wx.navigateTo({ url: 'b', }) },
- 子页面触发事件
-
// 同样需要先引入WxNotificationCenter const WxNotificationCenter = require("../../utils/WxNotificationCenter.js"); // 触发事件,回传数据 bindPickerChange: function (e) { var index = e.detail.value; var country = this.data.countries[index]; this.setData({ country: country}) console.log('picker发送选择改变,携带值为', index) console.log('picker发送选择改变,携带值为', country.name) // 回传数据 WxNotificationCenter.postNotificationName("testNotificationName", country); },
注意这里面的 testNotificationName 是一个标识,类似click 是点击事件一样,你也可以按照自己的业务或者操作来命名
方法五:使用 onfire.js
是一个很简单的事件分发的Javascript库(仅仅 0.9kb),简洁实用。
使用例子
- 主页面注册事件
// 引入bonfire 工具
const onfire = require("../../utils/onfire.js");
// 回调函数传值
onPickerCountry: function (country) {
this.setData({
country: country
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var eventObj = onfire.on('eventName', this.onPickerCountry);
},
// 跳转到子页面
pickerCountry: function(){
wx.navigateTo({
url: 'b',
})
},
- 子页面触发事件
// 同样需要先引入onfire
const onfire = require("../../utils/onfire.js");
// 触发事件,回传数据
bindPickerChange: function (e) {
var index = e.detail.value;
var country = this.data.countries[index];
this.setData({ country: country})
console.log('picker发送选择改变,携带值为', index)
console.log('picker发送选择改变,携带值为', country.name)
// 回传数据
onfire.fire('eventName', country);
},
注意这里面的 eventName 是一个标识,类似click 是点击事件一样,你也可以按照自己的业务或者操作来命名
大家还有其他好的方法也可以在底下留言评论,未完待续!