小程序页面传值的方式:

1.正向传值:上一页面 -->  下一页面

  1. url传值
  2. 本地储存
  3. 全局的app对象

2.反向传值:下一页面 -->  上一页面

  1. 本地储存
  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

使用思路:

  1. A 页面先订阅一个事件,并定义处理方法;
  2. 从 B 页面返回时,发送消息;
  3. 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')

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

参考文章:

小程序2个页面如何接传值

一个 JS 库就能解决小程序跨页传递事件消息和数据

微信小程序——页面之间传递值的更多相关文章

  1. 在微信小程序页面间传递数据总结

    在微信小程序页面间传递数据 原文链接:https://www.jianshu.com/p/dae1bac5fc75 在开发微信小程序过程之中,遇到这么一些需要在微信小程序页面之间进行数据的传递的情况, ...

  2. 让微信小程序页面之间的通信不在变得困难

    一个开始 小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如... 场景还原 首先这是一个电商小程序. 有这样一个需求: 首页某个地方要展示购物车商品数量. 当我在其他页面加购了商品 ...

  3. 微信小程序页面之间的跳转

    一.使用标签跳转             index.wxml:             在index.wxml页面添加一个<navigator>元素,在元素里面使用属性url就可以 二. ...

  4. 微信小程序--页面与组件之间如何进行信息传递和函数调用

    微信小程序--页面与组件之间如何进行信息传递和函数调用 ​ 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...

  5. [转] 微信小程序页面间通信的5种方式

    微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...

  6. ASP.NET页面之间传递值的几种方式(转载)

    页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryString,Session,Cookie ...

  7. ASP中页面之间传递值的几种方式

    ASP.NET页面之间传递值的几种方式 页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryS ...

  8. 微信小程序页面跳转方法总结

    微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...

  9. spring boot 之如何在两个页面之间传递值(转)

    原文地址:spring boot 之如何在两个页面之间传递值 问题:页面之间的跳转,通常带有值的传输,但是,在现在比较流行的SPRING MVC WEB 开发模型中,设计机制导致页面之间的直接接跳转和 ...

随机推荐

  1. Spring boot 通用配置文件模板

    # =================================================================== # COMMON SPRING BOOT PROPERTIE ...

  2. C#判断访问网站的设备类型

    同样也是在破解版的HISHOP源码上扒出来的,代码如下: protected void InitVisitorTerminal()        {            VisitorTermina ...

  3. AI 技术咖们说,进入未来世界首先需要一个“虚拟的我” | 科技生活节倒计时8天

    http://www.tmtpost.com/3367762.html 未来世界是什么样子? 斯皮尔伯格在<头号玩家>中构建了一个充满科技感.富有浓烈浪漫主义色彩的虚拟世界.戴上VR眼镜, ...

  4. 解决windows10 里vs2015 附件进程调试提示“此任务要求应用程序有提升的权限”

    刚用windows10 ,感觉有些地方别扭.就在是vs2015开发程序的时候,就遇到了个问题. 首先 我是使用adminitrator账号登陆的. 双击vs解决方案,打开iis,然后结合vs2015里 ...

  5. SpringBoot整合SpringKafka实现生产者史上最简代码实现

    该项目是使用的技术:SpringBoot  + SpringKafka + Maven 先看pom.xml文件中引入的依赖: <?xml version="1.0" enco ...

  6. Android NDK之二:创建NativeActivity

    转:http://blog.csdn.net/xiruanliuwei/article/details/7560914 Android NDK为我们提供了两种方式来实现我们的native activi ...

  7. 7款让人惊叹的HTML5粒子动画特效

    HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效,特别是Canvas特性,可以实现在网页上绘制任何图形和动画.本文要分享7款让人惊叹的HTML5粒子动画特效,这些粒子特效都提供源代码 ...

  8. linux输入子系统

    linux输入子系统(linux input subsystem)从上到下由三层实现,分别为:输入子系统事件处理层(EventHandler).输入子系统核心层(InputCore)和输入子系统设备驱 ...

  9. 6. 集成学习(Ensemble Learning)算法比较

    1. 集成学习(Ensemble Learning)原理 2. 集成学习(Ensemble Learning)Bagging 3. 集成学习(Ensemble Learning)随机森林(Random ...

  10. iosg给父类view添加透明度子类也变得透明

    用如下方式给父类view设置透明度不要使用alpha设置 self.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponen ...