微信小程序——页面之间传递值

小程序页面传值的方式：

url传值
本地储存
全局的app对象

本地储存
全局的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')

方法介绍完毕。各位看官好好享用~

微信小程序——页面之间传递值相关推荐

微信小程序页面之间传递数据
使用路由传递数据: 跳转时将数据使用 ? 拼接在 URL 后面:在另一个页面的 onLoad() 方法的参数中即可获取到传递的参数. 微信小程序对路由传参的大小有限制. 接收数据的页面获取到的都是字符 ...
微信小程序页面间传递数组对象
在微信小程序中,有时候使用wx.navigateTo()跳转页面时要传递过长的参数或者传递一个数组对象会发现传递不过去情景再现: 发送端接收端输出值我们可以使用以下方法解决: 在发送端对数据进 ...
微信小程序页面之间数据传递
微信小程序跳转界面传递数据,要传递的数据拼接在url 后面实现下面看一个简单的demo 传递数据要传递界面 wxml  <view class= ...
微信小程序页面间传递文本数据
写了一个微信小程序可以实现记录日记的功能.当点击编辑时,会再另一个页面中显示这个页面的日记数据,发现通过传递参数的方法很不现实,就在网上搜集了各种方法来实现,其中一个比较可取的方法是利用getCurr ...
微信小程序页面之间三种传值方式
第一种:url传值 A页面部分js代码 Page({jumpPage(e) {var zhi = 'biubiubiu~~';wx.navigateTo({url: '/pages/detail/de ...
微信小程序页面间传递json数据
1.页面跳转函数 wx.navigateTo(Object object) 保留当前页面,跳转到应用内的某个页面.但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到原页 ...
微信小程序页面之间传参，发表说说
getCurrentPages() 函数用于获取当前页面栈的实例,以数组的形式按栈的顺序输出.第一个元素为首页,最后一个元素为当前页. 1.页面结构 2.页面a.wxml <view wx:fo ...
微信小程序-页面间如何进行传递数据(通信)
前言在小程序中组件与组件之间的通信是通过在引用组件处,在自定义组件上添加自定义属性实现的,子组件内部通过properties进行接收更多关于组件与组件之间的通信可参考小程序-实现自定义组件以及自定 ...
微信小程序页面跳转如何传递对象参数
前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存,说不定啥时候就没了. 微信小程序页面跳转如 ...

微信小程序——页面之间传递值

微信小程序——页面之间传递值

先说一下正向传值：

1.url传值：

2.本地存储：

3.全局的app对象

再说一下反向传值，看了上面那几种方法，聪明的你应该知道反向传值有哪几种方式了。对，就是方法2和方法3：

1.本地存储：

2.全局的app对象

3.在当前页通过获取前一个 page 实例，再赋值

4.通过onfire.js为来实现这个效果

微信小程序——页面之间传递值相关推荐

最新文章

热门文章