微信小程序不同页面间通信

# 微信小程序不同页面间通信

> 使用类似eventBus的形式，通过事件发布，事件订阅实现通信，举一反三 也可以用于所有前端项目

### 1.事件绑定，事件解绑，触发事件的方法封装

```javascript
// util/event.js    小程序，vue，uniapp-vue示例
let handleSuccess = 'handleSuccess' 
var events = {};
function on(name, self, callback) {
    console.log(events)
    var tuple = [self, callback];
    var callbacks = [];
        callbacks = events[name];
    if (Array.isArray(callbacks)) {
        callbacks.splice(name,1)
        callbacks.push(tuple);
    }
    else {
        events[name] = [tuple];
    }
  
}

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

}

``` javascript 
// util/event.uts 使用类似eventBus的形式，通过事件发布，事件订阅实现通信
//  使用场景 ts/tus写法，在uniapp-x uvue页面使用 uni.openDialogPage 方法打开无法使用uni.$emit时，可以使用这个方法进行通信
const handleSuccess: string = 'handleSuccess'; // 开团预告

// 定义事件回调结构类型
type EventTuple = {
  self : any;
  callback : (data ?: any) => void;
};

// 事件存储对象
const events: UTSJSONObject = {};

export {
    on,
    remove,
    emit,
    handleSuccess
};

```

### 2.使用实例

> 需要更新的页面

```javascript
/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    const that = this
    // 注册监听事件
    event.on(event.handleSuccess,this,function(res){
      // res是传递回来的参数
      that.setData({
        count: that.data.count + res
      })
    })
  },

/**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    // 注销监听事件
    event.remove(event.handleSuccess, this)
  }
```

### 3.触发更新的页面

```javascript
// 点击事件
  handleAdd() {
    event.emit(event.handleSuccess, 2)
  }
```

微信小程序不同页面间通信

// 评论区

发表评论

// 最新评论