# 如何实现插件与小程序的通信

# 插件侧

# 1、定义 EventBus，并将 setValue、setWatching 挂载到全局 app 上

// utils.js
// 设置值
const setValue = (key, data) => {
  // 获取队列
  const value = events.get(key);
  // 按顺序回调
  if (Array.isArray(value)) {
    value.forEach((e) => {
      const callback = e.callback;
      callback(data);
    });
  }
};

// 设置监听
const setWatching = (key, tag = "default", callback) => {
  // 监听对象
  const queueItem = { tag, callback };
  // 获取队列
  let value = events.get(key);
  // 判断是否已经有监听
  if (Array.isArray(value)) {
    // 过滤出消息发起者不同的消息，相当于覆盖key和target都一样的消息
    value = value.filter((e) => {
      return e.tag != tag;
    });
    // 过滤出的队列重新插入此次订阅的消息
    value.push(queueItem);
    events.set(key, value);
  } else {
    // 之前没有监听
    events.set(key, [queueItem]);
  }
  console.log("function sub ", events);
};

const unsetWatching = (key, tag = "default") => {
  const haskey = events.has(key);
  // 是否存在此队列
  if (haskey) {
    let value = events.get(key);
    if (Array.isArray(value)) {
      // 去掉指定监听器
      value = value.filter((e) => {
        return e.tag != tag;
      });
      if (value.length === 0) {
        events.delete(key);
      } else {
        events.set(key, value);
      }
    }
  }
  console.log("function cancel ", events);
};

module.exports = {
  setValue,
  setWatching,
  unsetWatching,
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

# 2、暴露 setValue 方法给插件侧

// tcicPluginConfig.js
const app = getApp();

module.exports = {
  setValue: app.setValue, // 暴露setValue方法
};

1
2
3
4
5
6

# 小程序端

# 3、在适当的位置设置 setWatching，监听插件侧回调的内容

app.setWatching("classInfo", "classInfo", async (res) => {
  // 课堂信息
});

1
2
3