用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

通过发布订阅实现小程序组件通信

Rolan 2021-1-14 16:58

公司的一个h5项目要改成小程序,vue写的h5实现组件和页面通信很简单,但小程序却没有提供这种跨组件或者页面通信的功能。

出发点:公司的一个h5项目要改成小程序,vue写的h5实现组件和页面通信很简单,但小程序却没有提供这种跨组件或者页面通信的功能。但所谓的通信,其实就是一套发布订阅的流程,那么按照这个思路来实现它看看。

新建一个event.js

class Event {
  constructor() {
    this.objEvents = new Map()
  }
}
const event = new Event()
export default event
复制代码

订阅

on(eventName, fn, ctx) {
  if (typeof fn !== "function") {
    console.error("fn must be function")
    return
  }
  if (!this.objEvents.get(eventName)) {
    this.objEvents.set(eventName, [])
  }
  let value = this.objEvents.get(eventName)
  value = value.filter(function(e) {
    return e.ctx !== ctx
  })
  value.push({'cb': fn, 'ctx': ctx})
  this.objEvents.set(eventName, value)
}
复制代码

发布

emit(eventName, params) {
  const eventArr = this.objEvents.get(eventName) || []
  const args = [].slice.call(arguments, 1) || []
  if (eventArr && eventArr.length) {
    for (var i = 0, len = eventArr.length; i < len; i++) {
      eventArr[i].cb.apply(eventArr[i].ctx, args)
    }
  }
}
复制代码

删除

off(eventName, fn) {
  if (!arguments.length) {
    this.objEvents.clear()
    return
  }
  if (!this.objEvents.has(eventName)) {
    return
  }
  if (arguments.length === 1) {
    this.objEvents.delete(eventName)
    return
  }
  const eventArr = this.objEvents[eventName]
  for (var i = 0, len = eventArr.length; i < len; i++) {
    if (fn && fn === eventArr[i].cb) {
      this.objEvents[eventName].splice(fn, 1)
      break
    }
  }
}
复制代码

如何使用

1、在app.js引入注册

import event from "./lib/event"
App({  
  event,  
  onLaunch: function () {}
})
复制代码

2、页面或组件中订阅事件

const app = getApp()
Component({  
  data: { 
  	content: ""
  },  
  ...
  ...
  pageLifetimes: {
    show() {
      app.event.on('test', function(e) {
        this.setData({
          content: e
        })
      }, this)
    }
  },
})
复制代码

3、在其它组件或页面发布事件

const app = getApp()
Component({   
  ...
  ...
  pageLifetimes: {
    show() {
      app.event.emit('test', '我是测试消息')
    }
  },
})
复制代码


作者:今天砖有点烫手
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏