微信小程序页面通信之eventbus

先自定义个个eventbus.js,放到utils

//创建EventBus对象
let EventBus = function () {
  console.log("eventbus init...");
};
//准备数组容器
var objBus = [], arrbus = [];
//添加方法
EventBus.prototype = {
  obj: {
    set: function (key, action) {
      if (key && action) {
        var map = {};
        map.k = key;
        map.v = action;
        //如果存在,则删除之前添加的事件
        for (var i = 0, busLength = objBus.length; i < busLength; i++) {
          var tempMap = objBus[i];
          if (tempMap.k == key) {
            objBus.splice(i, 1);
          }
        }
        objBus.push(map);
      }
    },
    get: function (key) {
      if (key) {
        for (var i = 0, busLength = objBus.length; i < busLength; i++) {
          var map = objBus[i];
          if (map.k == key) {
            return map.v();
          }
        }
      }
    }
  },
  emit: function (key, data) {
    if (key) {
      for (var i = 0, busLength = arrbus.length; i < busLength; i++) {
        var map = arrbus[i];
        if (map.k == key) {
          return map.v(data);
        }
      }
    }
    return new Promise((resolve, reject) => { resolve() })
  },
  on: function (key, action) {
    if (key && action) {
      var map = {};
      map.k = key;
      map.v = action;
      arrbus.push(map);
    }
  },
  arr: {
    push: function (key, action) {
      if (key && action) {
        var map = {};
        map.k = key;
        map.v = action;
        arrbus.push(map);
      }
    },
    pop: function (key) {
      if (key) {
        for (var i = 0, busLength = arrbus.length; i < busLength; i++) {
          var map = arrbus[i];
          if (map.k == key) {
            map.v();
          }
        }
      }
    }
  }
}
var eventBus = new EventBus()
module.exports = {
  eventBus: eventBus
}

然后,引入app.js中,在每次打开小程序时进行初始化:

//app.js
var eventBus = require('utils/eventbus.js')

并设为globalData;

 globalData: {
    bus: eventBus.eventBus
  }

在需要发送message的js界面:

//加入机器人
var app = getApp()
var bus = app.globalData.bus
Page({
......

 //bt跳转
  clickTap: function (){
    console.log("sss")
    bus.emit('join')         //带参数样式bus.emit('join',##) 
    wx.switchTab({
      url: '../index/index'
    })
  },
})

接受message的js界面:

//index.js
//获取应用实例
var app = getApp()
var bus = app.globalData.bus

Page({
......
  onShow: function () {
    //生命周期函数--监听页面显示
    // console.log('onShow');
    bus.on('join', (model) => {
      console.log("index")
    })
  },
})

在这里可以在onShow方法里,也可以在onLoad方法中

tip:这种页面通信,比较单一,有一个地方消费了message,其他地方就接受不到message。

猜你喜欢

转载自blog.csdn.net/julystroy/article/details/86572342
今日推荐