用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

小程序页面间通信的5种方式

天下雪 2017-4-1 00:49

作者:u3xyz,来自授权地址PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的。如上图,这是一个常见结构的小程序:首页是一个双Tab框架PageA和PageB, ...

作者:u3xyz,来自授权地址 
PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的。

如上图,这是一个常见结构的小程序:首页是一个双Tab框架PageA和PageB,子页面pageC, PageD。

让我们假设这样一个场景:首页PageA有一个飘数,当我们从PageA新开PageC后,做一些操作,再回退到PageA的时候,这个飘数要刷新。很显然,这需要在PageC中做操作时,能通知到PageA,以便PageA做相应的联动变化。

这里的通知,专业点说就是页面通信。所谓通信,u3认为要满足下面两个条件: 
1. 激活对方的一个方法调用 
2. 能够向被激活的方法传递数据

本文将根据项目实践,结合小程序自身特点,就小程序页面间通信方式作一个探讨与小结。

通信分类

按页面层级(或展示路径)可以分为: 
1. 兄弟页面间通信。如多Tab页面间通信,PageA,PageB之间通信 
2. 父路径页面向子路径页面通信,如PageA向PageC通信 
3. 子路径页面向父路径页面通信,如PageC向PageA通信

按通信时激活对方方法时机,又可以分为: 
1. 延迟激活,即我在PageC做完操作,等返回到PageA再激活PageA的方法调用 
2. 立即激活,即我在PageC做完操作,在PageC激活PageA的方法调用

由于父路径页面向子路径页面通过url传参基本可以满足通信需求,所以本文主要讨论通信场景是子路径页面向父路径页面通信

方式一:onShow/onHide + localStorage

利用onShow/onHide激活方法,通过localStorage传递数据。大概逻辑如下

  1. // pageA
  2. let isInitSelfShow = true;
  3. Page({
  4. data: {
  5. helloMsg: 'hello from PageA'
  6. },
  7. onShow() {
  8. // 页面初始化也会触发onShow,这种情况可能不需要检查通信
  9. if (isInitSelfShow) return;
  10. let newHello = wx.getStorageSync('__data');
  11. if (newHello) {
  12. this.setData({
  13. helloMsg: newHello
  14. });
  15. 邀请
鲜花
鲜花 (2)
鸡蛋
鸡蛋 (1)

刚表态过的朋友 (3 人)

分享至 : QQ空间
收藏
原作者: u3xyz 来自: 原文地址

相关阅读

  • wx_左耳77 2017-8-18 10:10
    你好,第三种方法的pubsub是需要放在哪个文件下面,还是要就在plugin文件夹下面