微信小程序 —— 页面传值
微信小程序 —— 页面传值
小程序页面传值的方式：
1.正向传值：上一页面 –> 下一页面
- url传值
- 本地储存
- 全局的app对象
2.反向传值：下一页面 –> 上一页面
- 本地储存
- 全局的app对象
先说一下正向传值：
1.url传值：
通过url传值的需要通过option来获取参数值。
更多详情可以访问小程序-navigateTo章节。
A页面：
wx.navigateTo({
url: 'test?id=1'
})
B页面：
Page({
data:{
id:'',
},
onLoad: function(option){
this.setData({
id:option.id
})
}
})
2.本地存储：
关于缓存，可以先访问小程序-数据缓存稍作了解。
A页面：
wx.setStorageSync('username', 'ddd')
B页面：
Page({
data:{
username:'',
},
onLoad: function(){
var username = wx.getStorageSync('username')
this.setData({
username: username
})
}
})
3.全局的app对象
关于app对象，可以访问小程序-注册程序了解相关信息。
A页面：
var app = getApp(); app.username='ddd';
B页面：
var app = getApp(); var username = app.username;
再说一下反向传值，看了上面那几种方法，聪明的你应该知道反向传值有哪几种方式了。对，就是方法2和方法3：
1.本地存储：
B页面：
wx.setStorageSync('username', 'ddd');
//返回上一页
wx.navigateBack();
A页面：
Page({
data:{
username:'',
},
onShow: function(){
var username = wx.getStorageSync('username')
this.setData({
username: username
})
}
})
2.全局的app对象
B页面：
var app = getApp(); app.username='ddd';
A页面：
var app = getApp();
Page({
data:{
username:'',
},
onShow: function(){
var username = app.username;
this.setData({
username: username
})
}
})
3.在当前页通过获取前一个 page 实例，再赋值
var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面
//直接调用上一个页面的 setData() 方法，把数据存到上一个页面中去
prevPage.setData({
mdata:1
})
这种方法的弊端：因为进入 B 页面的入口可能是很多个。这样做，可能会导致获取到的页面实例不正确。
4.通过onfire.js为来实现这个效果
onfire.js的下载地址https://github.com/hustcc/onfire.js
使用思路：
- A 页面先订阅一个事件，并定义处理方法；
- 从 B 页面返回时，发送消息；
- A 页面卸载时，解除订阅。
使用方法如下：
A页面代码如下：
var onfire = require("../utils/onfire.js");
var that;
var eventObj = onfire.on('key', function () {
// 当消息被传递时，做具体的事
});
Page({
data: {
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onUnload: function (e) {
onfire.un('key');
onfire.un(eventObj);//移除
}
})
我们可以在 A 页面直接调用 onfire.on 方法，订阅一个名字为 key 的消息。在上面的代码中，消息附带的参数无传参。
如果需要传参的话，直接在 function 里增加参数即可，例如：
var eventObj = onfire.on('key', function (data){
// 执行操作
})
需要注意的是，一定要在 onUnload 里（在页面被关闭时）取消订阅消息，并取消绑定 eventObj。
B 页面里代码在回调的地方加入以下代码：
onfire.fire('key');//key 为上文中订阅的消息
// 有参数时
onfire.fire('key','test')
方法介绍完毕。各位看官好好享用~
参考文章：
版权声明：本文为gaozllm原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。