让支付宝小程序也支持eventChannel

419 阅读2分钟

1、原因

最近在做原生微信小程序转支付宝小程序,结果发现自己之前大量使用了eventChannel进行页面数据交互,结果支付宝小程序不支持eventChannel。只能想办法模拟下微信小程序里的eventChannel了。下面就是我的修改,主要在app.js增加个eventChannel对象,里面模拟下emit、on、events。这样其它页面用到的地方只需要进行小小修改就可以啦。

2、app.js新增

//app.js
//1、声明两个对象放点东西
let eventChannelData = {};//放数据
let eventChannelEvents = {};//放事件

App({

 //简单模拟下eventChannel
  eventChannel: {
    emit: (key, value) => {
      eventChannelData[key] = value;
      if (
        eventChannelEvents[key] &&
        typeof eventChannelEvents[key] == "function"
      ) {
        eventChannelEvents[key](value);
        setTimeout(() => {
          delete eventChannelEvents[key];
        });
      }
    },
    on: (key, callBack) => {
      callBack && callBack(eventChannelData[key]);
      setTimeout(() => {
        delete eventChannelData[key];
      });
    },
    events: eventChannelEvents,
  },
  
  
  
  onLaunch: function (options) {
  },
  globalData: {},
  })

3、页面修改

//test.js
const app = getApp();
Page({
  onLoad: function (option) {
    console.log(option.query);
    
    //原先微信小程序使用
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.emit("acceptDataFromOpenedPage", { data: "test" });
    eventChannel.emit("someEvent", { data: "test" });
    // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on("acceptDataFromOpenerPage", function (data) {
      console.log(data);
    });
    
    
    //支付宝小程序使用
    app.eventChannel.emit("acceptDataFromOpenedPage", { data: "test" });
    app.eventChannel.emit("someEvent", { data: "test" });
    // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
    app.eventChannel.on("acceptDataFromOpenerPage", function (data) {
      console.log(data);
    });
    
  },
  
  goNextPage() {
     
    //原先微信小程序里的使用
    wx.navigateTo({
      url: "test?id=1",
      events: {
        // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function (data) {
          console.log(data);
        },
        someEvent: function (data) {
          console.log(data);
        },
      },
      success: function (res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit("acceptDataFromOpenerPage", { data: "test" });
      },
    });
    
    //支付宝小程序使用
    wx.navigateTo({
      url: "test?id=1",
      success: function (res) {
        // 通过eventChannel向被打开页面传送数据
        app.eventChannel.emit("acceptDataFromOpenerPage", { data: "test" });
        app.eventChannel.events = {
        // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function (data) {
          console.log(data);
        },
        someEvent: function (data) {
          console.log(data);
        },
      }
      },
    });
    
    
  },
});

4、结束

没啦,没怎么测试,以后上线有问题再想办法改吧!