js_미니 프로그램 페이지 전반의 이벤트 등록, 전달 및 브로드캐스트 메커니즘

메커니즘:

미니 프로그램 페이지 전반의 이벤트 등록, 배포 및 방송 메커니즘.

코드 구현

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

비즈니스 애플리케이션 예제

#🎜 🎜# 1 app.js에 이벤트를 등록하여 로그인 페이지의 성공적인 로그인을 모니터링합니다

단계는 다음과 같습니다.

이벤트를 등록하여 성공을 모니터링합니다. 로그인 페이지 로그인

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

로그인 페이지에서 로그인 성공 후 이벤트 발생

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

2 상품 파손 신고 페이지에서 이벤트 등록 손상된 제품의 코드 모니터링#🎜🎜 #이 예제는 주로 Broadcast.fire를 사용하여 매개변수를 전달하는 기능을 반영합니다

// 引入 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 브로드캐스트를 사용할 때 .on 적절하게, 이 값을 바인딩해야 합니다#🎜🎜 #

Binding 방법 1:

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

  #🎜🎜 #
  Reason
: 위와 같이 코드에서 볼 수 있듯이, Broadcast.on에 출력된 this의 값은 이 함수의 본문에서 this의 의미가 불분명하므로 값은 다음과 같습니다. null입니다. 일반적으로

바인딩 방법 2:

• 을 사용하기 전에 이를 구체적으로 바인딩해야 합니다. # 🎜🎜#

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

  관련 기사:

WeChat Mini 프로그램 개발 등록 페이지 소개

#🎜 🎜 #WeChat 애플릿 페이지 사이를 이동할 때 이벤트를 모니터링하는 방법

위 내용은 js_미니 프로그램 페이지 전반의 이벤트 등록, 전달 및 브로드캐스트 메커니즘의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!