微信小程序-页面通信

xiangxiongfly9152024-10-18 9:24

文章目录

微信小程序-页面通信
- EventChannel
- PubSubJS

微信小程序-页面通信

EventChannel

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

第一个页面：

js 复制代码

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: "北京" })
    },
})

第二个页面：

js 复制代码

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"

使用：

组件一：

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: "吴承恩",
      })
    },
  },
})

组件二：

js 复制代码

import PubSub from "pubsub-js"

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