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

- 作者：知晓程序
- 发布时间：2016-12-10 18:38
- 原文：https://www.ifanr.com/minapp/759409

![business-107](https://s3.ifanr.com/wp-content/uploads/2016/12/business-107.jpg)

作者 \| 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，回复「云梦」获得云梦声音向导小程序的详细体验文章。**

快速关注知晓程序↓↓↓

![zxcx](https://s3.ifanr.com/wp-content/uploads/2016/11/zxcx-1.jpg)

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