Mécanisme d'enregistrement, de répartition et de diffusion js_Event sur les mini-pages du programme

Mécanisme :

Mécanisme d'enregistrement, d'envoi et de diffusion des événements sur les mini-pages de programme.

Mise en œuvre du code

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

Exemple d'application métier

1 Enregistrez-en une dans app.js Surveillez le événement de connexion réussie sur la page de connexion

Les étapes sont les suivantes :

Enregistrer un événement de connexion réussie sur la page de connexion

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

Déclencher le événement après une connexion réussie sur la page de connexion Événement

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

2 Enregistrez un événement sur la page de rapport de dommage du produit pour surveiller le code du produit signalé comme endommagé

Cet exemple reflète principalement l'utilisation de Broadcast.fire pour transmettre des paramètres Fonction

// 引入 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 Lorsque vous utilisez Broadcast.on de manière appropriée, vous devez lier cette valeur

.

• Méthode de liaison 1 :

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

Cause : Comme le montre le code ci-dessus, cette valeur imprimée dans Broadcast.on est nul et le pointeur this dans le corps de cette fonction n'est pas clair, donc la valeur est nulle. Habituellement, nous devons le lier spécifiquement avant de pouvoir utiliser la

• Méthode de liaison 2 :

Il est recommandé d'utiliser

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

Articles connexes :

Présentation de la page d'inscription au développement du programme WeChat Mini

Comment surveiller les événements en naviguant entre les pages du programme WeChat Mini

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!