微信小程序-页面通信

文章目录

微信小程序-页面通信

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}`,
        })
      })
    },
  },
})
相关推荐
尘浮生7 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen3 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
中云DDoS CC防护蔡蔡9 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼13 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857515 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027715 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__21 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
guanpinkeji2 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
尘浮生2 天前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven