js_Event-Registrierungs-, Versand- und Übertragungsmechanismus über Miniprogrammseiten hinweg

Mechanismus:

Mechanismus für die Registrierung, den Versand und die Übertragung von Ereignissen auf Miniprogrammseiten.

Code-Implementierung

var broadcast = {
  // 通过调用 broadcast.on 注册事件。其他页面都可以通过调用 broadcast.fire 触发该事件
  // 参数说明：如果 isUniq 为 true，该注册事件将唯一存在；如果值为 false或者没有传值，每注册一个事件都将会被存储下来
  on: function (name, fn, isUniq) {
    this._on(name, fn, isUniq, false)
  },
  // 通过调用 broadcast.once 注册的事件，在触发一次之后就会被销毁
  once: function (name, fn, isUniq) {
    this._on(name, fn, isUniq, true)
  },
  _on: function (name, fn, isUniq, once) {
    var eventData
    eventData = broadcast.data
    var fnObj = {
      fn: fn,
      once: once
    }
    if (!isUniq && eventData.hasOwnProperty(name)) {
      eventData[name].push(fnObj)
    } else {
      eventData[name] = [fnObj]
    }
    return this
  },
  // 触发事件
  // 参数说明：name 表示事件名，data 表示传递给事件的参数
  fire: function (name, data, thisArg) {
    console.log('[broadcast fire]: ' + name, data)
    var fn, fnList, i, len
    thisArg = thisArg || null
    fnList = broadcast.data[name] || []
    if (fnList.length) {
      for (i = 0, len = fnList.length; i < len; i++) {
        fn = fnList[i].fn
        fn.apply(thisArg, [data, name])
        if (fnList[i].once) {
          fnList.splice(i, 1)
          i--
          len--
        }
      }
    }
    return this
  },
  data: {}
}
 
module.exports = broadcast

Beispiel für eine Geschäftsanwendung

1 Registrieren Sie ein Überwachungs-Login in app.js Das Ereignis der erfolgreichen Anmeldung auf der Seite

Die Schritte sind wie folgt:

Registrieren Sie ein Ereignis, um auf eine erfolgreiche Anmeldung zu warten

// 引入 broadcast
const {
  broadcast
} = require('utils/util')
// 注册一个监听登录成功的事件
// 在login页面执行
broadcast.on('login_success', function () {
  wx.redirectTo({
    url: `/pages/${name}/index`
  })
})

Lösen Sie dieses Ereignis nach erfolgreicher Anmeldung auf der aus Anmeldeseite

// 引入 broadcast
var {
  broadcast
} = require('../../utils/util')
// 触发事件 login_success
broadcast.fire('login_success')

2 Registrieren Sie ein Ereignis auf der Produktschadensberichtsseite, um den beschädigten Produktcode zu überwachen

Dieses Beispiel spiegelt hauptsächlich die Funktion der Verwendung von Broadcast.fire zum Übergeben wider Parameter

// 引入 broadcast
var {
  broadcast
} = require('../../utils/util')
// 触发事件 setBrokenBikeCode
// "bikeid": "0100010010"
broadcast.fire('setBrokenBikeCode', '0100010010')

// 引入 broadcast
var {
  broadcast
} = require('../../utils/util')
...
function next (bikecode) {
   that.setData({
      bikecode
   })
}
...
// 注册事件 setBrokenBikeCode
broadcast.on('setBrokenBikeCode', (bikecode) => {
   next(bikecode)
})

3 Wenn Sie Broadcast.on ordnungsgemäß verwenden, müssen Sie diesen Wert binden

• Bindungsmethode 1:

var that = this
broadcast.on('showRiding', function() {
 console.log(this) // 值为null
 that.showRiding()
})

Ursache: Wie aus dem obigen Code ersichtlich ist, ist der in Broadcast.on gedruckte Wert null. In diesem Funktionskörper ist der Zeiger unklar, daher ist der Wert null. Normalerweise müssen wir dies speziell binden, bevor wir

• Bindungsmethode 2 verwenden können:

Empfohlene Verwendung

broadcast.on('showRiding', function() {
 this.showRiding()
}.bind(this))

verwandt Artikel:

Einführung in die Registrierungsseite für die Entwicklung des WeChat-Miniprogramms

So überwachen Sie Ereignisse beim Wechseln zwischen den Seiten des WeChat-Miniprogramms

Das obige ist der detaillierte Inhalt vonjs_Event-Registrierungs-, Versand- und Übertragungsmechanismus über Miniprogrammseiten hinweg. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!