小程序中的广播/监听机制（跨页面通信）

妖狐艹你老母 2022-12-09 02:52 260阅读 0赞

**重点：小程序中并没有广播监听机制！！！要我们手动去实现一个哦**

应用场景：  
有**pageA pageB pageC** 三个页面  
**pageA**打开了**pageB**，**pageB**打开了**pageC**,**pageC**页面完成了一些动作，此时想 **即时** 通知**pageA**去请求新的数据，已防止用户返回到**pageA**时再请求数据导致用户体验不好!

但是上面也说过了，小程序内置方法里并没有这个，就需要我们手动封装一个了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pseV8xMDE_size_16_color_FFFFFF_t_70_pic_center]

##### 先来写调度中心 event.js：（监听 on；广播 emit；销毁 remove） #####

// /utils/event.js
    let events = {};
    
    function on(name, self, callback) {
      let tuple = [self, callback];
      let callbacks = events[name];
      if (Array.isArray(callbacks)) {
        callbacks.push(tuple);
      }
      else {
        events[name] = [tuple];
      }
    }
    
    function remove(name, self) {
      let callbacks = events[name];
      if (Array.isArray(callbacks)) {
        events[name] = callbacks.filter((tuple) => {
          return tuple[0] != self;
        })
      }
    }
    
    function emit(name, data) {
      let callbacks = events[name];
      if (Array.isArray(callbacks)) {
        callbacks.map((tuple) => {
          let self = tuple[0];
          let callback = tuple[1];
          callback.call(self, data);
        })
      }
    }
    
    exports.on = on;
    exports.remove = remove;
    exports.emit = emit;

##### 全局注入（app.js） #####

import event from './event.js';
    wx.event = event;

以上我们调度中心就写好了

#### 监听 ####

onShow(){ 
    	wx.event.on('tabbarList', this, this.init);
    },
    init(){ 
    	console.log('do you want')
    }

#### 广播 ####

let data = '我是广播者'
    wx.event.emit('tabbarList') 或者
    wx.event.emit('tabbarList',data)

总结：找个全局对象，将调度中心的几个方法找同一个上级。可以是wx也可以是app.globalData甚至是localStorage也行！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pseV8xMDE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/b05ec3d29e0e4f9db133a7349c2f944c.png