微信小程序-页面通信

文章目录

微信小程序-页面通信

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}`,
        })
      })
    },
  },
})
相关推荐
江城开朗的豌豆12 小时前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
江城开朗的豌豆12 小时前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
菜鸟una14 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
狂团商城小师妹20 小时前
XYlease租赁商城小程序
微信·微信小程序·小程序
顾青1 天前
微信小程序 VisionKit 实战(二):静态图片人脸检测与人像区域提取
前端·微信小程序
顾青1 天前
微信小程序实现身份证识别与裁剪(基于 VisionKit)
前端·微信小程序
從南走到北1 天前
西陆房产系统小程序
微信·微信小程序·小程序
黑马源码库miui520861 天前
同城派送小程序
微信小程序·小程序
全职计算机毕业设计2 天前
基于微信小程序的运动康复中心预约系统的设计与实现(SpringBoot+Vue+Uniapp)
vue.js·spring boot·微信小程序
知识分享小能手2 天前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app