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

作者 | 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 方法。

				
					//app.js
					App({
					addListener: function (callback) {
					this.callback = callback;
					},
					setChangedData: function (data) {
					this.data = data;
					if (this.callback != null) {
					this.callback(data);
					}
					}
					})
				
			

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

				
					//page1.js
					var app = getApp()
					Page({
					onLoad: function () {
					app.addListener(function (changedData) {
					that.setData({
					data: changedData
					});
					});
					}
					})
				
			

				
					//page2.js
					var app = getApp()
					Page({
					onBtnPress: function () {
					app.setChangedData('page2-data');
					}
					})
				
			

一个基本合格的方案

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

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

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

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

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

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

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

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

				
					//event.js
					var events = {};
					function on(name, callback) {
					var callbacks = events[name];
					addToCallbacks(callbacks, callback);
					}
					function remove(name, callback) {
					var callbacks = events[name];
					removeFromCallbacks(callbacks, callback);
					}
					function emit(name, data) {
					var callbacks = events[name];
					emitToEveryCallback(callbacks, data);
					}
					exports.on = on;
					exports.remove = remove;
					exports.emit = emit;
				
			

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

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

				
					//page2.js
					var event = require('../../utils/event.js');
					Page({
					onBtnPress: function () {
					event.emit('DataChanged', 'page2-data');
					}
					});
				
			

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

				
					//page1.js
					var event = require('../../utils/event.js');
					Page({
					onLoad: function () {
					var that = this;
					event.on('DataChanged', function (changedData) {
					that.setData({
					data: changedData
					});
					});
					},
					onUnload: function () {
					event.remove('DataChanged', ...);
					}
					});
				
			

咦，似乎哪里不对？

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

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

				
					//page1.js
					var event = require('../../utils/event.js');
					Page({
					onDataChanged: function (changedData) {
					this.setData({
					data: changedData
					})
					},
					onLoad: function () {
					event.on('DataChanged', this.onDataChanged);
					},
					onUnload: function () {
					event.remove('DataChanged', this.onDataChanged);
					}
					});
				
			

这样就 OK 了么？NO NO NO NO！

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

				
					onLoad: function () {
					event.on('DataChanged', this.onDataChanged.bind(this));
					}
					onUnload: function () {
					event.remove('DataChanged', this.onDataChanged.bind(this));
					}
				
			

现在OK了么？NO NO NO NO！如果大伙敲代码试试，就会发现依然还是不行！

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

那么，在 onLoad 和 onUnload 里面，各自调用了 bind 大法，从而产生了各自的匿名函数。

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

removeFromCallbacks 的伪代码大致如下：

				
					function removeFromCallbacks(callbacks, callback) {
					var newCallbacks = [];
					for (var item in callbacks) {
					if (item != callback) {
					newCallbacks.push(item);
					}
					}
					return newCallbacks;
					}
				
			

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

最终的代码实现

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

function remove(eventName, pageName, callback);

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

所以，这里看起来还是用 page 的 this 做 key 比较靠谱，修改后的函数原型如下：

				
					function on(name, self, callback);
					function remove(name, self, callback);
				
			

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

				
					function on(name, self, callback) {
					var tuple = [self, callback];
					var callbacks = events[name];
					if (Array.isArray(callbacks)) {
					callbacks.push(tuple);
					}
					else {
					events[name] = [tuple];
					}
					}
				
			

第二行我们将 self （即 page 的 this ）和 callback 合并成一个 tuple； 第三行从 events 容器中，取出该 EventName 下的监听者数组 callbacks。

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

remove 的完整实现：

				
					function remove(name, self) {
					var callbacks = events[name];
					if (Array.isArray(callbacks)) {
					events[name] = callbacks.filter((tuple) = & gt; {
					return tuple[0] != self;
					});
					}
					}
				
			

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

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

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

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

fn 的定义为：

				
					(tuple) = & gt; {
					return tuple[0] != self;
					}
				
			

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

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

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

最后再来看看emit的实现：

				
					function emit(name, data) {
					var callbacks = events[name];
					if (Array.isArray(callbacks)) {
					callbacks.map((tuple) = & gt; {
					var self = tuple[0];
					var callback = tuple[1];
					callback.call(self, data);
					});
					}
					}
				
			

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

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

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

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

fn 的定义为：

				
					(tuple) = & gt; {
					var self = tuple[0];
					var callback = tuple[1];
					callback.call(self, data);
					}
				
			

对传入的 tuple ，分别取出 self 和 callback ，然后调用 Javascript 的 call 大法：

fn.call(this, args)

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

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

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

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

快速关注知晓程序↓↓↓

知晓程序 （ 微信号 zxcx0101） 是爱范儿旗下专注于小程序生态的公众号。我们提供最全面、新鲜的小程序资讯 （ 消息、观点、指南、活动 ） 和服务 ，在这里你 能了解到关于小程序的一切。