实现小程序间页面通讯

实现页面之间通讯的方法,无非就是把事件挂载在小程序全局状态下,这里写了一个事件类 用于挂载 执行 卸载 事件

方法类如下:

//event.js

class Event {

  /**

  * on 方法把订阅者所想要订阅的事件及相应的回调函数记录在 Event 对象的 _cbs 属性中

  */

  on(event, fn) {

    if (typeof fn != "function") {

      console.error('fn must be a function')

      return

    }

    this._cbs = this._cbs || {};

    (this._cbs[event] = this._cbs[event] || []).push(fn)

  }

  /**

  * emit 方法接受一个事件名称参数,在 Event 对象的 _cbs 属性中取出对应的数组,并逐个执行里面的回调函数

  */

  emit(event) {

    this._cbs = this._cbs || {}

    var callbacks = this._cbs[event], args

    if (callbacks) {

      callbacks = callbacks.slice(0)

      args = [].slice.call(arguments, 1)

      for (var i = 0, len = callbacks.length; i < len; i++) {

        callbacks[i].apply(null, args)

      }

    }

  }

  /**

  * off 方法接受事件名称和当初注册的回调函数作参数,在 Event 对象的 _cbs 属性中删除对应的回调函数。

  */

  off(event, fn) {

    this._cbs = this._cbs || {}

    // all

    if (!arguments.length) {

      this._cbs = {}

      return

    }

    var callbacks = this._cbs[event]

    if (!callbacks) return

    // remove all handlers

    if (arguments.length === 1) {

      delete this._cbs[event]

      return

    }

    // remove specific handler

    var cb

    for (var i = 0, len = callbacks.length; i < len; i++) {

      cb = callbacks[i]

      if (cb === fn || cb.fn === fn) {

        callbacks.splice(i, 1)

        break

      }

    }

    return

  }

}

export default Event


//app.js

import Event form event.js
//挂载到wx对象上
wx.event=new Event()

使用:

//a.js
page->  onload(){
    //注册
    wx.event.on('testFunc',()=>{
        console.log('事件监听')
    })
}

//b.js
page-> showEvent(){

    //散播
    wx.emit('testFunc',{id:1})
}

```

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容