微信小程序——页面之间传递值
小程序页面传值的方式:
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')
方法介绍完毕。各位看官好好享用~
参考文章:
微信小程序——页面之间传递值的更多相关文章
- 在微信小程序页面间传递数据总结
在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...
- 让微信小程序页面之间的通信不在变得困难
一个开始 小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如... 场景还原 首先这是一个电商小程序. 有这样一个需求: 首页某个地方要展示购物车商品数量. 当我在其他页面加购了商品 ...
- 微信小程序页面之间的跳转
一.使用标签跳转 index.wxml: 在index.wxml页面添加一个<navigator>元素,在元素里面使用属性url就可以 二. ...
- 微信小程序--页面与组件之间如何进行信息传递和函数调用
微信小程序--页面与组件之间如何进行信息传递和函数调用 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...
- [转] 微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
- ASP.NET页面之间传递值的几种方式(转载)
页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryString,Session,Cookie ...
- ASP中页面之间传递值的几种方式
ASP.NET页面之间传递值的几种方式 页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryS ...
- 微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...
- spring boot 之如何在两个页面之间传递值(转)
原文地址:spring boot 之如何在两个页面之间传递值 问题:页面之间的跳转,通常带有值的传输,但是,在现在比较流行的SPRING MVC WEB 开发模型中,设计机制导致页面之间的直接接跳转和 ...
随机推荐
- Spring boot 通用配置文件模板
# =================================================================== # COMMON SPRING BOOT PROPERTIE ...
- C#判断访问网站的设备类型
同样也是在破解版的HISHOP源码上扒出来的,代码如下: protected void InitVisitorTerminal() { VisitorTermina ...
- AI 技术咖们说,进入未来世界首先需要一个“虚拟的我” | 科技生活节倒计时8天
http://www.tmtpost.com/3367762.html 未来世界是什么样子? 斯皮尔伯格在<头号玩家>中构建了一个充满科技感.富有浓烈浪漫主义色彩的虚拟世界.戴上VR眼镜, ...
- 解决windows10 里vs2015 附件进程调试提示“此任务要求应用程序有提升的权限”
刚用windows10 ,感觉有些地方别扭.就在是vs2015开发程序的时候,就遇到了个问题. 首先 我是使用adminitrator账号登陆的. 双击vs解决方案,打开iis,然后结合vs2015里 ...
- SpringBoot整合SpringKafka实现生产者史上最简代码实现
该项目是使用的技术:SpringBoot + SpringKafka + Maven 先看pom.xml文件中引入的依赖: <?xml version="1.0" enco ...
- Android NDK之二:创建NativeActivity
转:http://blog.csdn.net/xiruanliuwei/article/details/7560914 Android NDK为我们提供了两种方式来实现我们的native activi ...
- 7款让人惊叹的HTML5粒子动画特效
HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效,特别是Canvas特性,可以实现在网页上绘制任何图形和动画.本文要分享7款让人惊叹的HTML5粒子动画特效,这些粒子特效都提供源代码 ...
- linux输入子系统
linux输入子系统(linux input subsystem)从上到下由三层实现,分别为:输入子系统事件处理层(EventHandler).输入子系统核心层(InputCore)和输入子系统设备驱 ...
- 6. 集成学习(Ensemble Learning)算法比较
1. 集成学习(Ensemble Learning)原理 2. 集成学习(Ensemble Learning)Bagging 3. 集成学习(Ensemble Learning)随机森林(Random ...
- iosg给父类view添加透明度子类也变得透明
用如下方式给父类view设置透明度不要使用alpha设置 self.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponen ...