微信小程序-页面通信

文章目录

微信小程序-页面通信

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}`,
        })
      })
    },
  },
})
相关推荐
阿隆_趣编程10 小时前
为了方便相亲,我用AI写了一款小程序
前端·javascript·微信小程序
黑马源码库miui520861 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾1 天前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于微信小程序的宠物领养系统为例,包含答辩的问题和答案
微信小程序·小程序·宠物
canglingyue2 天前
微信小程序日历事件添加实现
微信小程序·小程序
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
Thetimezipsby2 天前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
從南走到北2 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·开发语言·微信·微信小程序·小程序
猫七先生2 天前
微信小程序一键登录可行性方案
前端·微信小程序
canglingyue2 天前
微信小程序截屏与录屏功能详解
微信小程序·小程序