您现在的位置是:首页 > 文章列表 > JavaScript > 如何在微信小程序中使用订阅发布模式

如何在微信小程序中使用订阅发布模式

admin 2020-11-16 17:48 216人围观
简介 微信小程序的globalData是可以存放全局变量,但是不是响应式,所以要用一个文件来监听

一, 响应式文件

  • 在utils下新建一个文件event.js,把下面的代码复制到该文件下

class Event {
  on(event, fn, ctx) {
    if (typeof fn != "function") {
      console.error('fn must be a function')
      return
    }

    this._stores = this._stores || {}

      ; (this._stores[event] = this._stores[event] || []).push({ cb: fn, ctx: ctx })
  }
  emit(event) {
    this._stores = this._stores || {}
    var store = this._stores[event], args    if (store) {
      store = store.slice(0)
      args = [].slice.call(arguments, 1)
      for (var i = 0, len = store.length; i < len; i++) {
        store[i].cb.apply(store[i].ctx, args)
      }
    }
  }
  off(event, fn, ctx) {
    this._stores = this._stores || {}
    // all
    if (!arguments.length) {
      this._stores = {}
      return
    }
    // specific event
    var store = this._stores[event]
    if (!store) return
    // remove all handlers
    if (arguments.length === 1) {
      delete this._stores[event]
      return
    }
    // remove specific handler
    var cb    for (var i = 0, len = store.length; i < len; i++) {
      cb = store[i].cb      if (store[i].ctx === ctx) {
        store.splice(i, 1)
        break
      }
    }
    return
  }}module.exports = {
  Event}

二,导入

  • 在你需要的文件里导入(例如:在app.js文件导入)

import {Event} from '/utils/events.js'

三,实例化和发射事件

onShow: function() {
    //实例化
    wx.event = new Event()

    //发射事件给消息页面监听
    wx.event.emit('change', {})  //change是自定义的事件,{}是发射的参数
  },

wx.event.emit('change', {})  //change是自定义的事件,{}是发射的参数

四, 使用

 //在要监听的页面使用wx.eventonShow: function () {
    //监听app.js发射的change事件,页面卸载的时候要停止监听event.off
    wx.event.on('change', function () {
      that.setData({
        messageNum: App.globalData.messageNum      })
    })
  },

事件"change"对应的是emit发射的"change"

五, 销毁监听

  • 最好在页面销毁的时候停止监听,这样子可以节约性能,要不然就一直监听

 // 生命周期函数--监听页面卸载  
  onUnload: function () {
    //你监听的页面
    wx.event.off('change')
  },


阅读排行

  • Vue 的最佳使用方法

    Vue框架,是我国内最受欢迎的前端框架之一,也许你的项目正在使用,也许你还在了解正准备上手...

  • FastClick是什么?一文搞懂原理解析​

    FastClick是什么?一文搞懂原理解析​ 为什么要用FastClick在移动端H5开发过程中,关于点触可能会遇到如下两个问题:手动点击与真正...

  • 提升CSS技能的20个小技巧

    提升CSS技能的20个小技巧 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样...

  • uni-app介绍

    uni-app介绍 uni-app是一个使用Vue.js开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Andr...

  • 一文彻底弄懂Event Loop!

    一文彻底弄懂Event Loop! 我们在学习浏览器和NodeJS的EventLoop时,往往是阅读大量文章,多篇文章凑在一起综合来看,才...

  • 生活中常用正则表达式

    生活中常用正则表达式 很多不太懂正则的朋友,在遇到需要用正则校验数据时,往往是在网上去找很久,结果找来的还是...

  • vue组件通信你了解多少

    本文会介绍常见的通信方式,并分析每种方式的使用场景和注意点。

  • 10 种跨域解决方案

    10 种跨域解决方案 说到跨域了,这是一个老生常谈的话题,以前我觉得这种基础文章没有什么好写的,会想着你去了...

本栏推荐

官方微信