微信小程序-页面通信

微信小程序-页面通信

EventChannel

可以通过 wx.navigateTo 打开的新页面，这两个页面会建立一个数据通道，可以借助 EventChannel 实现监听、发射数据。

第一个页面：

wx.navigateTo({url: "/pages/api/event/event?name=小明&age=18",// 监听事件events: {onReceive: (data) => {console.log(data)this.setData({userName: data.userName,userAge: data.userAge,})},},success: (res) => {// 发射事件res.eventChannel.emit("onEvent", { sex: "男", address: "北京" })},
})

第二个页面：

Page({data: {name: "",age: 0,sex: "",address: "",},eventChannel: null,sendEvent() {// 发射事件this.eventChannel.emit("onReceive", { userName: "张三", userAge: 28 })},onLoad(options) {this.eventChannel = this.getOpenerEventChannel()// 监听事件this.eventChannel.on("onEvent", (data) => {this.setData({sex: data.sex,address: data.address,})})this.setData({name: options.name,age: options.age,})},
})

PubSubJS

可以借助第三方库 PubSubJS 实现多级页面和兄弟组件间的数据通信。

一、安装库：

npm i pubsub-js

二、微信小程序 --> 工具 --> 构建 npm

三、引入：

import PubSub from "pubsub-js"

使用：

组件一：

import PubSub from "pubsub-js"Component({data: {book: {name: "西游记",roles: ["唐僧", "孙悟空", "猪八戒", "沙和尚"],},},methods: {sendData() {// 发送事件// 参数一：事件名// 参数二：传递的数据PubSub.publish("myevent", {bookName: this.data.book.name,bookRoles: this.data.book.roles,author: "吴承恩",})},},
})

组件二：

import PubSub from "pubsub-js"Component({data: {description: "",},lifetimes: {attached() {// 订阅事件// 参数一：事件名// 参数二：回调函数PubSub.subscribe("myevent", (msg, data) => {this.setData({description: `${data.bookName} - ${data.bookRoles} - ${data.author}`,})})},},
})