初识小程序-页面通信

2 阅读2分钟

页面间通信

方式一(EventChannel)

如果一个页面通过wx.navigateTo打开一个新页面,这两个页面间将建立一条数据通道

  1. wx.navigateTosuccess回调中通过EventChannel对象发射事件
  2. 被打开的页面可以通过this.getOpenerEventChannel方法获得一个eventChannel对象,进行监听、发射事件
  3. wx.navigateTo方法中可以定义events配置项接收被打开页面发射的事件

image.png

页面

    handler(){
      wx.navigateTo({
        url: '/pages/logs/logs',
        events:{
          // key 被打开页面通过eventChannel发射的事件
          // value 回调函数,获取被打开页面传递给当前页面的数据
          currentEvent:(res)=>{
            console.log("currentEvent",res);
          }
        },
        success(res){
          // 通过 success 回调函数,可以获取 eventChannel 对象
          // eventChannel 对象提供了 emit 方法,可以发射事件,同时携带参数
          res.eventChannel.emit("myEvent",{name:"a"})
        }
      })
    },

被打开页面

// logs
  lifetimes: {
    attached() {
      // 通过getOpenerEventChannel获取eventChannel对象
      const EventChannel=this.getOpenerEventChannel();
      // 通过eventChannel提供的 on 方法,监听页面发射的自定义事件
      EventChannel.on("myEvent",(res)=>{
        console.log("myEvent on",res)
      })
      // 通过EventChannel提供的emit方法,也可以向上一个页面传递数据
      // 需要使用emit定义自定义事件,携带需要传递的参数、
      EventChannel.emit("currentEvent",{age:18})

方式二(事件总线)

事件总线是对发布订阅模式的一种实现,是一种集中式事件处理机制,允许不同组件之间进行彼此通信。可以借助第三方的发布订阅JS包,来实现事件总线功能PubSubJs:https://www.npmjs.com/package/pubsub-js

npm install pubsub-js
import PubSub from 'pubsub-js'
sendData(){
  // publish 用来发布自定的事件
  // 有两个参数 1.自定义事件名称 2.需要传递的数据
  PubSub.publish("myEvent",this.data.name)   
 },
import PubSub from 'pubsub-js'
......
lifetimes: {
attached() {
      // subscribe 订阅、监听的自定义事件
      // 两个参数 1.需要监听的自定义事件名称 2.回调函数
      // 回调函数有两个参数 1.msg:自定义事件名称 2.data:传递过来的数据
      PubSub.subscribe("myEvent",(msg,data)=>{
        console.log("subscribe",msg,data)
      });