【微信小程序知识点】getApp()全局数据共享,页面间通信,组件间通信

getApp()-全局数据共享

在小程序中,可以通过getApp()方法获取到小程序全局唯一的App实例。因此在App()方法中添加全局共享的数据,方法,从而实现页面,组件的数据传值。 

// app.js
App({
  //全局共享的数据
  globalData: {
    token: "",
  },
  //全局共享的方法
  setToken(token) {
    //如果想获取token,可以使用this的方式进行获取
    this.globalData.token = token;
  },
});

在使用App实例的js文件里面写如下代码: 

//getApp()方法用来获取全局唯一的App()实例
const appInstance = getApp();
Page({
  login() {
    console.log(appInstance);
    appInstance.setToken('difisivibbcueiw')
  },
});

页面间通信

如果一个页面通过wx.navigateTo打开一个新页面,这两个页面间将建立一条数据通道,从而实现两个页面之间的数据传递

1.在wx.navigateTo的success回调中通过EventChannel对象发射事件

2.被打开的页面可以通过this.getOpenerEventChannel()方法来获得一个EventChannel对象,进行监听,发射事件

3.wx.navigationTo方法中可以定义events配置项接收被打开页面发射的事件

(1)index.wxml页面

<button type="warn" bindtap="handle">跳转到分类页面</button>

(2)index.js


Page({
  
  handle() {
    wx.navigateTo({
      url: "/pages/cate/cate",
      events: {
        //key :被打开页面通过eventChannel发射的事件
        //value:回调函数
        currentevent: (res) => {
          console.log(res);
        },
      },
      success(res) {
        res.eventChannel.emit("myevent", { name: "tom" });
      },
    });
  },
});

(3)cate.js

Page({
  onLoad() {
    //通过this.getOpenerEventChannel()可以获取EventChannel对象
    const EventChannel = this.getOpenerEventChannel();
    //通过EventChannel提供的on方法监听页面发射的自定义事件
    EventChannel.on("myevent", (res) => {
      console.log(res);
    });
    //通过EventC提供的emit方法也可以发射事件
    EventChannel.emit("currentevent", { age: 10 });
  },
});

组件通信-事件总线

随着项目功能的增加,业务逻辑也会变得很复杂,一个页面可能是由多个组件进行构成,并且这些组件之间需要进行数据的传递。这时候如果使用之前学习的组件传值方式进行数据的传递,就会比较麻烦。

事件总线是对发布-订阅模式的一种实现,是一种集中式事件处理机制,允许不同的组件之间进行彼此的通信,常用于两个非父子关系组件和兄弟组件之间通讯,我们可以借助第三方的发布订阅JS包,来实现事件总线的功能。 PubSubJS

(1)安装PubSubJS

 (2)点击工具,构建npm

(3)代码

<view class="parent">
  <view class="title">父组件,子组件a和子组件b是兄弟关系</view>
  <view class="container">
    <custom01/> 
    <custom02/>
  </view>
</view>
<!--components/custom01/custom01.wxml-->
<view class="sona">
  <text>子组件a</text>
  <button bindtap="sendData">传递数据给兄弟</button>
</view>
// components/custom01/custom01.js
import PubSub from "../../miniprogram_npm/pubsub-js";
Component({
  /**
   * 组件的初始数据
   */
  data: {
    name: "tom",
    age: 10,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    sendData() {
      //publish 发布,发射自定义事件
      //1.自定义事件的名称
      //2.需要传递的数据
      PubSub.publish("myevent", this.data.name);
    },
  },
});
// components/custom02/custom02.js
import PubSub from "../../miniprogram_npm/pubsub-js";
Component({
  /**
   * 组件的初始数据
   */
  data: {},

  /**
   * 组件的方法列表
   */
  methods: {},
  lifetimes: {
    attached() {
      //subscribe订阅,监听自定义的事件
      //1.需要订阅,监听的自定义事件名称
      //2.回调函数,回调函数有两个参数
      //2.1 msg:自定义事件的名称
      //2.2 data:传递过来的数据
      PubSub.subscribe("myevent", (msg, data) => {
        console.log(msg, data);
      });
    },
  },
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/797213.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

prompt第二讲-langchain实现中英翻译助手

文章目录 prompt模板 (prompt template)langchain 中的prompt模板 (prompt template)langchain实现中英翻译助手 prompt模板 (prompt template) 开篇我介绍了在llm中&#xff0c;通常输入的那个字符串会被我们称之为prompt&#xff0c;下面就是一个中英文翻译助手的prompt例子…

从“Hello,World”谈起(C++入门)

前言 c的发展史及c能干什么不能干什么不是我们今天的重点&#xff0c;不在这里展开&#xff0c;有兴趣的朋友可以自行查阅相关资料。今天我们主要是围绕c的入门程序&#xff0c;写一个“hello&#xff0c;world”&#xff0c;并且围绕这个入门程序简单介绍一下c和c的一些语法&…

windows USB 设备驱动开发-USB 功能控制器驱动开发(二)

USB 功能客户端驱动程序使用的 UFX 对象和句柄 USB 函数类扩展 (UFX) 使用 WDF 对象功能来定义这些特定于 USB 的 UFX 对象。 重要的 API UfxDeviceCreateUfxEndpointCreate USB 函数类扩展 (UFX) 使用 WDF 对象功能来定义这些特定于 USB 的 UFX 对象。 这些对象是 WDF 对…

Facebook 开源计算机视觉 (CV) 和 增强现实 (AR) 框架 Ocean

Ocean 是一个独立于平台的框架&#xff0c;支持所有主要操作系统&#xff0c;包括 iOS、Android、Quest、macOS、Windows 和 Linux。它旨在彻底改变计算机视觉和混合现实应用程序的开发。 Ocean 主要使用 C 编写&#xff0c;包括计算机视觉、几何、媒体处理、网络和渲染&#x…

sentinel源码分析: dashboard与微服务的交互、pull模式持久化

文章目录 原始方式微服务端规则如何保存规则如何加载进内存微服务端接收控制台请求控制台推送规则总结 pull拉模式官方demo如何整合Spring Cloud整合Spring Cloud 前置知识 SentinelResource的实现原理、SphU.entry()方法中ProcessorSlotChain链、entry.exit() 建议先会使用se…

鸿蒙系统在服装RFID管理中的应用:打造智能零售新时代

​随着物联网技术的迅速发展&#xff0c;服装零售行业正面临着新的变革与挑战。鸿蒙系统作为新一代智能操作系统&#xff0c;结合RFID技术&#xff0c;为服装行业提供了高效、智能的管理解决方案。常达智能物联&#xff0c;作为RFID技术的领先企业&#xff0c;致力于将鸿蒙系统…

基于JavaSpringBoot+Vue+uniapp微信小程序校园宿舍管理系统设计与实现

基于JavaSpringBootVueuniapp微信小程序实现校园宿舍管理系统设计与实现 目录 第一章 绪论 1.1 研究背景 1.2 研究现状 1.3 研究内容 第二章 相关技术介绍 2.1 Java语言 2.2 HTML网页技术 2.3 MySQL数据库 2.4 Springboot 框架介绍 2.5 VueJS介绍 2.6 ElementUI介绍…

7-1、2、3 IPFS介绍使用及浏览器交互(react+区块链实战)

7-1、2、3 IPFS介绍使用及浏览器交互&#xff08;react区块链实战&#xff09; 7-1 ipfs介绍7-2 IPFS-desktop使用7-3 reactipfs-api浏览器和ipfs交互 7-1 ipfs介绍 IPFS区块链上的文件系统 https://ipfs.io/ 这个网站本身是需要科学上网的 Ipfs是点对点的分布式系统 无限…

如何在 Android Studio 中导出并在 IntelliJ IDEA 中查看应用的 SQLite 数据库

在 Android 应用开发过程中&#xff0c;调试和查看应用内的数据库内容是常见的需求。本文将介绍如何使用 Android Studio 导出应用的 SQLite 数据库&#xff0c;并在 IntelliJ IDEA 中查看该数据库。 步骤一&#xff1a;在设备上运行您的应用 首先&#xff0c;确保您的应用已…

5G-A通感融合赋能低空经济-RedCap芯片在无人机中的应用

1. 引言 随着低空经济的迅速崛起&#xff0c;无人机在物流、巡检、农业等多个领域的应用日益广泛。低空飞行器的高效、安全通信成为制约低空经济发展的关键技术瓶颈。5G-A通感一体化技术通过整合通信与感知功能&#xff0c;为低空网络提供了强大的技术支持。本文探讨了5G-A通感…

未来互联网的新篇章:深度解析Facebook的技术与战略

随着科技的飞速发展和社会的不断变迁&#xff0c;互联网作为全球信息交流的重要平台&#xff0c;正经历着前所未有的变革和演进。作为全球最大的社交媒体平台之一&#xff0c;Facebook不仅是人们沟通、分享和互动的重要场所&#xff0c;更是科技创新和数字化进程的推动者。本文…

自己动手写一个滑动验证码组件(后端为Spring Boot项目)

近期参加的项目&#xff0c;主管丢给我一个任务&#xff0c;说要支持滑动验证码。我身为50岁的软件攻城狮&#xff0c;当时正背着双手&#xff0c;好像一个受训的保安似的&#xff0c;中规中矩地参加每日站会&#xff0c;心想滑动验证码在今时今日已经是标配了&#xff0c;司空…

数据结构——考研笔记(二)线性表的定义和线性表之顺序表

文章目录 二、线性表2.1 定义、基本操作2.1.1 知识总览2.1.2 线性表的定义2.1.3 线性表的基本操作2.1.4 知识回顾与重要考点 2.2 顺序表2.2.1 知识总览2.2.2 顺序表的定义2.2.3 顺序表的实现——静态分配2.2.4 顺序表的实现——动态分配2.2.5 知识回顾与重要考点2.2.6 顺序表的…

如何在Linux上如何配置虚拟主机

在Linux上配置虚拟主机可以通过使用Apache HTTP服务器来实现。Apache是一个开源的跨平台的Web服务器软件&#xff0c;可以在多种操作系统上运行并支持虚拟主机的配置。 以下是在Linux上配置虚拟主机的步骤&#xff1a; 安装Apache HTTP服务器 在终端中运行以下命令来安装Apache…

通过vm可以访问那些属性——06

1.通过vue实例都可以访问那些属性&#xff1f;&#xff08;通过vm都可以vm.什么&#xff09; vue实例中的属性很多。有的以$开始&#xff0c;有的以_开始。 所有以$开始的属性&#xff0c;可以看做是公开的属性&#xff0c;这些属性是提供给程序员使用的 所有以_开始的属性&…

Linux的世界 -- 初次接触和一些常见的基本指令

一、Linux的介绍和准备 1、简单介绍下Linux的发展史 1991年10月5日&#xff0c;赫尔辛基大学的一名研究生Linus Benedict Torvalds在一个Usenet新闻组(comp.os.minix&#xff09;中宣布他编制出了一种类似UNIX的小操作系统&#xff0c;叫Linux。新的操作系统是受到另一个UNIX的…

系统架构设计师教程(清华第2版)<第2章 计算机系统基础知识>解读

系统架构设计师教程 第二章 计算机系统基础知识-2.1计算机系统概述 2.2 计算机硬件 2.1 计算机系统概述2.2 计算机硬件2.2.1 计算机硬件组成2.2.2 处理器2.2.2.1 控制单元(CU)2.2.2.2 算术逻辑单元(ALU)2.2.2.3 指令集2.2.2.3.1 CISC的特点2.2.2.3.2 RISC的特点2.2.3 存储器2.2…

Lottery 分布式抽奖(个人向记录总结)

1.搭建&#xff08;DDDRPC&#xff09;架构 DDD——微服务架构&#xff08;微服务是对系统拆分的方式&#xff09; &#xff08;Domain-Driven Design 领域驱动设计&#xff09; DDD与MVC同属微服务架构 是由Eric Evans最先提出&#xff0c;目的是对软件所涉及到的领域进行建…

html(抽奖设计)

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>抽奖</title><style type"text/css">* {margin: 0;padding: 0;}.container {width: 800px;height: 800px;border: 1px dashed red;position: absolut…

【学术会议征稿】第三届智能电网与能源系统国际学术会议

第三届智能电网与能源系统国际学术会议 2024 3rd International Conference on Smart Grid and Energy Systems 第三届智能电网与能源系统国际学术会议&#xff08;SGES 2024&#xff09;将于2024年10月25日-27日在郑州召开。 智能电网可以优化能源布局&#xff0c;让现有能源…