微信小程序-页面通信

文章目录

微信小程序-页面通信

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}`,
        })
      })
    },
  },
})
相关推荐
Stanford_11061 小时前
关于嵌入式硬件需要了解的基础知识
开发语言·c++·嵌入式硬件·微信小程序·微信公众平台·twitter·微信开放平台
明月(Alioo)2 小时前
用AI帮忙,开发刷题小程序:软考真经微信小程序API接口文档(更新版)
微信小程序·小程序
克里斯蒂亚诺更新7 小时前
微信小程序的页面生命周期 以及onShow的应用场景
微信小程序·小程序
江城开朗的豌豆9 小时前
小程序避坑指南:这些兼容性问题你遇到了几个?
前端·javascript·微信小程序
江城开朗的豌豆10 小时前
玩转小程序页面跳转:我的路由实战笔记
前端·javascript·微信小程序
zluz_18 小时前
微信小程序,组件中使用全局样式
微信小程序·小程序
明月(Alioo)20 小时前
用AI帮忙,开发刷题小程序:微信小程序中实现Markdown图片解析与渲染功能详解
微信小程序·小程序·aigc
aiguangyuan1 天前
微信小程序中的双线程模型及数据传输优化
微信小程序·前端开发
笨笨狗吞噬者1 天前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
小小前端_我自坚强1 天前
UniApp 微信小程序开发使用心得
面试·微信小程序·代码规范