Heim > Web-Frontend > js-Tutorial > js_Event-Registrierungs-, Versand- und Übertragungsmechanismus über Miniprogrammseiten hinweg

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

php是最好的语言
Freigeben: 2018-08-03 11:01:50
Original
1822 Leute haben es durchsucht

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
Nach dem Login kopieren
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(&#39;utils/util&#39;)
// 注册一个监听登录成功的事件
// 在login页面执行
broadcast.on(&#39;login_success&#39;, function () {
  wx.redirectTo({
    url: `/pages/${name}/index`
  })
})
Nach dem Login kopieren

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

// 引入 broadcast
var {
  broadcast
} = require(&#39;../../utils/util&#39;)
// 触发事件 login_success
broadcast.fire(&#39;login_success&#39;)
Nach dem Login kopieren

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(&#39;../../utils/util&#39;)
// 触发事件 setBrokenBikeCode
// "bikeid": "0100010010"
broadcast.fire(&#39;setBrokenBikeCode&#39;, &#39;0100010010&#39;)
Nach dem Login kopieren
// 引入 broadcast
var {
  broadcast
} = require(&#39;../../utils/util&#39;)
...
function next (bikecode) {
   that.setData({
      bikecode
   })
}
...
// 注册事件 setBrokenBikeCode
broadcast.on(&#39;setBrokenBikeCode&#39;, (bikecode) => {
   next(bikecode)
})
Nach dem Login kopieren

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

  • Bindungsmethode 1:

var that = this
broadcast.on(&#39;showRiding&#39;, function() {
 console.log(this) // 值为null
 that.showRiding()
})
Nach dem Login kopieren

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(&#39;showRiding&#39;, function() {
 this.showRiding()
}.bind(this))
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage