【技术牛人分享】如何在微信小程序里实现跨页面通信?

作者 | Danny,动静科技软件总监

我们在处理业务需求的时候,常常会遇到一些情况:

在二级或者三级页面进行某些操作或者变更后,需要将结果通知到上级页面去。比如:

  • 选择了某些配置项,点击保存后,外部页面能够立即变更
  • 在头像上传页面,上传完毕后,外部页面的头像能够立即显示为新头像

这个时候就涉及到如何在页面之间通信的问题了。跨页面通信,其实就是一个程序内部的事件通知机制问题,在其他平台或者 OS 上都一些相应的实现,比如:

  • iOS SDK 自带的 NotificationCenter
  • Android 平台著名的第三方库 EventBus

目前,微信小程序官方 SDK 还没有提供 Event API 来帮助开发者实现页面间通信。所以,今天知晓程序邀请到「云梦声音向导」小程序的开发者 Danny,教大家如何实现这样一个简单的小工具。

想和本文作者直接交流?现在就加入知晓程序的开发交流群吧。关注微信号 zxcx0101,点击菜单栏的「加群交流」即可。

Quick and Dirty

我们知道,在小程序里面一个页面的变化,是通过调用 setData 函数来实现的。

所以,想做到在二级页面里让一级页面产生变化,最 quick 也最 dirty 的做法就是,把一级页面的 this 传入到二级页面去。这样,我们在二级页面调用 page1.setData(…) 就可以立即引发外部的变化。

但是这并不是一个好的方案,不仅产生了页面的耦合,而且也并不能处理复杂的数据逻辑。因为,二级页面不并清楚也不应该关心一级页面想怎么处理当前数据。

所以,二级页面只应该把变更后的数据通知给一级页面即可,至于一级页面是想刷新界面,还是想本地存储或者发起网络通信,都与其他页面没有关系了。

简单的 Callback

如果只是想把数据通知给外部页面,那应该怎么做呢?现在,我们来考虑另一个方案。

如果需要产生一个通知,就需要用到 callback 机制。它需要做到:

  • 了解数据变化的页面,注册一个 callback 函数到一个公共的地方(所有页面可以访问的地方)
  • 而数据变更者在变更数据后,将新的数据放入同一个公共的地方
  • 在放入数据时,同时调用这个 callback 函数,让 callback 函数实现者接收到这个变化

那这个「公共的地方」在哪里呢? 第一反应就是全局逻辑页面 app.js 里面。

小程序提供了一个叫做 getApp() 的 API,它可以在 page 初始化时,通过 var app = getApp() 来获取 app 实例,从而实现全局的数据共享。

而且,微信也很贴心的在新建项目之后的 quick start 代码里,留了一个 globalData 字段,暗示开发者这里是可以用来存储全局数据的。

我们首先对全局逻辑代码 app.js 动刀子,增加 addListener 方法。

然后,我们在其他页面合适的位置调用 addListener

一个基本合格的方案

以上就是跨页面通信的最基本原理,但这也是一个很 dirty 的方案。

因为,上面的代码只能支持一种 Event 的通知,而且也不能针对这个 Event 添加多个监听者(比如有多个页面需要同时知道某数据变更)。

一个基本合格的 Event 管理器应该具备怎样的能力?

  • 支持多种 Event 的通知
  • 支持对某一 Event 可以添加多个监听者
  • 支持对某一 Event 可以移除某一监听者
  • Event 的存储和管理放在一个单独模块中,可以被所有文件全局引用

根据以上的描述,我们来设计一个新的 Event 模块,它应该具有如下三个函数:

  • on 函数:用来向管理器中添加一个 EventCallback,且每一个 Event 必须有全局唯一的 EventName,函数内部通过一个数组来保存同一 Event 的多个 Callback
  • remove 函数:用来向管理器移除一个 EventCallback
  • emit 函数:用来触发一个 Event

我们现在就来动手构建这样一个新的模块。

首先,在小程序的 utils 目录中,新建一个 event.js 文件。

之后在页面中,我们就可以使用这个 Event 模块。

我们先在二级页面中触发事件。

然后,我们在一级页面中在 onLoad() 中监听事件、在 onUnload() 中取消监听:

咦,似乎哪里不对?

remove 需要接受两个参数,第一个是 EventName,第二个是 Callback,但是我们的 Callback 以匿名函数的方式写在了 event.on(...) 的调用语句里面。

好吧,那我们不得不修改一下语句的调用方式:

这样就 OK 了么?NO NO NO NO!

熟悉 JavaScript this 这个大坑的朋友们一定会知道,在 onDataChanged() 这个函数中调用的 this,并不是我们 Page 中的那个 this,所以根本不可能调用到 this.setData(....),于是我们用 bind 大法稍微调整一下:

现在OK了么?NO NO NO NO!如果大伙敲代码试试,就会发现依然还是不行!

因为 this.onDataChanged.bind(this) 会产生一个新的匿名函数,即 bind 的返回值是一个函数。

那么,在 onLoadonUnload 里面,各自调用了 bind 大法,从而产生了各自的匿名函数。

也就是说 event.remove(...) 塞进去的那个函数,并不是 event.on(...) 塞进去的那个函数。这样就造成了 remove 时无法正确匹配。

我们会发现 remove 传入的 callback,永远无法在 callbacks 数组中被匹配到,从而也就无法正确移除了。

最终的代码实现

EventName + Callback 无法唯一决定需要移除的监听者时,那么自然想到的就是再增加一个 key 值,我们可以用 Page 自身的某个特性来做 key,比如 pageName ,新的 remove 原型如下:

function remove(eventName, pageName, callback);

pageName 是一个字符串,如果开发者不能做到全局内 pageName 唯一的话(比如开发者一不小心写错了),那就可能会出现后来监听者冲掉前面监听者的情况,从而造成无法收到通知的 bug。

所以,这里看起来还是用 pagethiskey 比较靠谱,修改后的函数原型如下:

让我们来看看内部具体怎么实现。以下是一个完整的 on 函数实现:

第二行我们将 self(即 pagethis)和 callback 合并成一个 tuple;第三行从 events 容器中,取出该 EventName 下的监听者数组 callbacks。

如果该数组存在,则将 tuple 加入数组;如果不存在,则新建一个数组。

remove 的完整实现:

第二行从 events 容器中,取出该 EventName 下的监听者数组 callbacks。

如果 callbacks 不存在,则直接返回;如果存在,则调用 callbacks.filter(fn) 方法。

filter 方法的含义是通过 fn 来决定是否过滤掉 callbacks 中的每一个项。fn 返回 true 则保留,fn 返回 false 则过滤掉。

所以,我们调用 callbacks.filter(fn) 后,callbacks 中的每一个 tuple 都会被依次判定。

fn 的定义为:

tuple 中的第一个元素 selfremove 传入的 self 相比较。

如果不相等则返回 true 被保留,如果相等则返回 false 被过滤掉。

callbacks.filter(fn) 会返回一个新的数组,然后重新写入 events[name],最终达到移除 callbacks 中某一项的逻辑。

最后再来看看 emit 的实现:

第二行从 events 容器中,取出该 EventName 下的监听者数组 callbacks。

如果 callbacks 不存在,则直接返回;如果存在,则调用 callbacks.map(fn) 方法。

filter 的用法类似,map 函数的作用相当于 for 循环,依次取出 callbacks 中的每一个项,然后对其执行 fn(tuple)。

从其名字就可以看出 map 就是映射变换的意思,将 item 变换为另外一种东西,这个映射关系就是 fn

fn 的定义为:

对传入的 tuple,分别取出 selfcallback,然后调用 JavaScript 的 call 大法:

fn.call(this, args)

从而最终实现调用到监听者的目的。

讲到这里就基本上差不多了,因为 Event 模块持有了 Pagethis,所以一定要在 PageUnload 函数中调用 event.remove(…),不然会造成内存泄露。

文章来源:https://github.com/danneyyang/weapp-event/blob/master/README.md

本文由知晓程序授权转载,关注微信号 zxcx0101,回复「云梦」获得云梦声音向导小程序的详细体验文章。

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2016-12-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏人工智能LeadAI

用Python使用C语言程序(Windows平台)

前言 在机器学习中,很多时候我们需要Python和C的混合编程,最重要的原因是为了性能效率的提升: 解释型语言一般比编译型语言慢,一般提高性能的有效做法是,先做...

3774
来自专栏游戏杂谈

Node.js文件编码格式的转换

项目很多 lua 文件不是 utf-8格式,使用 EditPlus 查看的时候,显示为ASCII。还有的是带BOM的,带BOM倒好处理,之前写过,有一定规律。

564
来自专栏余林丰

Struts2中的JSON问题——后台返回JSON字符串到前台

  最近做一个项目遇到一个比较棘手的问题,项目后台采用struts2+Hibernate3+Spring3,前台采用ExtJs4。笔者目前仍是一名大二学生吗,后...

1956
来自专栏超然的博客

BAT 前端开发面经 —— 吐血总结

最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘,在此总结一下 一是备忘、总结提升,二是希望给大家一些参考 其他面试及基础相关可以...

1132
来自专栏java思维导图

Java 9 新特性,看这里就明白了

摘要: 1.目录结构 2.repl工具 jShell命令 3.模块化 4.多版本兼容jar包 5.接口方法的改进(在接口中 jdk7 只能声明全名常量...

2946
来自专栏精讲JAVA

Java 9 新特性,看这里就明白了

摘要: 1.目录结构 2.repl工具 jShell命令 3.模块化 4.多版本兼容jar包 5.接口方法的改进(在接口中 jdk7 只能声明全名常量...

3456
来自专栏C/C++基础

腾讯2016春季校园实习招聘技术岗初试(一面)问题汇总(CC++后台)

2016.4.11日广州参加了腾讯的CC++后台技术一面,安全技术类的面试。面试官人很温和,经历了大概70分钟的问答,特将遇到的面试问题汇总如下,自己总结学习,...

591
来自专栏Android群英传

Android Native Crash 收集

本文是『张涛的NDK之旅』,本来很早以前就有很多读者希望我能写一些关于MDK的文章,但是由于我本身对NDK不熟悉,所以找来了同事张涛的文章。欢迎大家关注他的博客...

941
来自专栏python3

python--time模块

time.localtime([secs])  默认将当前时间戳转成当前时区的struct_time

561
来自专栏狮乐园

高级 Angular 组件模式 (6)

Render Props最近在React社区中引起了轰动,但是与之类似的模式在Angular中似乎并没有得到太多关注。我在之前写的文章提及过,TemplateR...

661

扫码关注云+社区