微信小程序——页面之间传递值
小程序页面传值的方式:
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的下载地址/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')
方法介绍完毕。各位看官好好享用~