【微信小程序知识点】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.mzph.cn/diannao/45950.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣每日一题:3011. 判断一个数组是否可以变为有序

力扣官网&#xff1a;前往作答&#xff01;&#xff01;&#xff01;&#xff01; 今日份每日一题&#xff1a; 题目要求&#xff1a; 给你一个下标从 0 开始且全是 正 整数的数组 nums 。 一次 操作 中&#xff0c;如果两个 相邻 元素在二进制下数位为 1 的数目 相同 &…

Cxx Primer-CP-2

开篇第一句话足见作者的高屋建瓴&#xff1a;类型决定程序中数据和操作的意义。随后列举了简单语句i i j;的意义取决于i和j的类型。若它们都是整形&#xff0c;则为通常的算术意义。若它们都为字符串型&#xff0c;则为进行拼接操作。若为用户自定义的class类型&#xff0c;则…

为Linux设置GRUB密码

正文共&#xff1a;999 字 11 图&#xff0c;预估阅读时间&#xff1a;1 分钟 我们前面介绍了如何恢复root密码&#xff08;CentOS 7.9遗忘了root密码怎么办&#xff1f;&#xff09;&#xff0c;虽然简单好用&#xff0c;但是可能会被不法分子利用&#xff0c;造成root密码以及…

快速读出linux 内核中全局变量

查问题时发现全局变量能读出来会提高效率&#xff0c;于是考虑从怎么读出内核态的全局变量&#xff0c;脚本如下 f open("/proc/kcore", rb) f.seek(4) # skip magic assert f.read(1) b\x02 # 64 位def read_number(bytes):return int.from_bytes(bytes, little,…

【FineReport的详细使用教程】

前言&#xff1a; &#x1f49e;&#x1f49e;大家好&#xff0c;我是书生♡&#xff0c;今天主要和大家分享一下&#xff0c;BI报表中的FineRoport 的详细使用&#xff0c;以及它的优势&#xff01;&#xff01;&#xff01;希望对大家有所帮助。 &#x1f49e;&#x1f49e;代…

C# Winform布局控件的几种方式

在 C# WinForms 应用程序中&#xff0c;布局控件和布局管理器可以帮助开发者创建响应式的用户界面&#xff0c;即使在窗口大小改变时也能保持控件的正确位置和尺寸。 通常我们采用Panel和Dock&#xff0c;辅助Anchor实现类似如下的布局。 以下是几种常见的布局控件和方法&…

计算机网络通信

1、最原始的hub结构 2、局域网的交换机&#xff1a;mac和交换机端口路由表-数据链路层 mac地址 3、不同局域网之间进行通信&#xff0c;主要是路由器-网络层-ip 源ip到目标ip的不变化&#xff0c;但是mac地址在一直变化

Linux--信号量

线程系列&#xff1a; Linux–线程的认识(一) Linux–线程的分离、线程库的地址关系的理解、线程的简单封装&#xff08;二&#xff09; 线程的互斥&#xff1a;临界资源只能在同一时间被一个线程使用 生产消费模型 信号量 信号量&#xff08;Semaphore&#xff09;是在多线程…

基于PyTorch深度学习实践技术应用

近年来&#xff0c;Python语言由于其开源、简单等特点&#xff0c;受到了广大程序开发者的偏爱&#xff0c;丰富的函数库使得其在各行各业中得到了广泛的应用。伴随着新一轮人工智能&#xff08;尤其是深度学习&#xff09;的快速发展&#xff0c;许多深度学习框架应运而生&…

通义千问Qwen-VL-Chat大模型本地训练(二)

目录 前言 环境准备 软件安装 数据准备 模型训练 模型名称修改 数据集修改 模型参数修改 数据读取编码修改 output_dir修改 模型调用 验证 小结 前言 人工智能大模型是一种能够利用大数据和神经网络来模拟人类思维和创造力的人工智能算法。它利用海量的数据和深度学习技…

中职网络安全B模块Cenots6.8数据库

任务环境说明&#xff1a; ✓ 服务器场景&#xff1a;CentOS6.8&#xff08;开放链接&#xff09; ✓ 用户名&#xff1a;root&#xff1b;密码&#xff1a;123456 进入虚拟机操作系统&#xff1a;CentOS 6.8&#xff0c;登陆数据库&#xff08;用户名&#xff1a;root&#x…

【C++深度探索】全面解析多态性机制(二)

&#x1f525; 个人主页&#xff1a;大耳朵土土垚 &#x1f525; 所属专栏&#xff1a;C从入门至进阶 这里将会不定期更新有关C/C的内容&#xff0c;欢迎大家点赞&#xff0c;收藏&#xff0c;评论&#x1f973;&#x1f973;&#x1f389;&#x1f389;&#x1f389; 前言 我…

Debezium日常分享系列之:Debezium 3.0.0.Alpha1 Released

Debezium日常分享系列之&#xff1a;Debezium 3.0.0.Alpha1 Released 一、重大改变Java 和 Maven 要求已更改 二、新的特征和提高MongoDB 三、更多内容 Debezium 3 的第一个预发布版本 3.0.0.Alpha1。这个版本虽然比正常的预版本要小&#xff0c;但高度关注几个关键点&#xff…

《财经日报》︱揭秘随身WiFi市场乱象与格行的破局之路 格行如何树立行业清流新标杆? 随身WiFi真的靠谱吗?

在移动互联网高速发展的今天&#xff0c;随身WiFi以其便捷性和高性价比迅速成为市场宠儿。然而&#xff0c;随着行业的迅速扩张&#xff0c;一系列乱象与套路也逐渐浮出水面&#xff1a;从虚假宣传到限速虚量&#xff0c;随身WiFi行业中的种种套路让消费者防不胜防。商家利用信…

c语言题目之求两个整数的二进制位数的不同个数

文章目录 一、题目二、分析三、代码实现 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、题目 二、分析 首先看到这道题我们是求两个整数的二进制位不同位的个数&#xff0c;在操作符中我们详细学到到了按位操作符相关的内容&#xff0c;首先看到要…

三相感应电机建模仿真(5):考虑铁耗时静止dq坐标系的数学模型及其仿真模型

1.概述 2.考虑铁耗时的三相感应电机数学模型 3.考虑铁耗时的三相感应电机仿真模型 4.仿真实例 5.总结 6.参考文献 1.概述 电机的铁心损耗主要包括涡流损耗和磁滞损耗,这些损耗以热的形式消耗能量,减少了电动机的有效输出功率,对电机效率产生影响;铁心损耗会导致电机内…

【教程】Vue2中使用svg矢量图

1.npm导包 npm i svg-sprite-loader --save2.创建目录放入svg文件&#xff0c;创建SvgIcon.js 3.SvgIcon.js const req require.context(./svg, false, /\.svg$/) const requireAll requireContext > requireContext.keys().map(requireContext) requireAll(req)4.vue.c…

【前端】零基础学会编写CSS

一、什么是CSS CSS (Cascading Style Sheets&#xff0c;层叠样式表&#xff09;是一种是一种用来为结构化文档&#xff08;如 HTML 文档&#xff09;添加样式&#xff08;字体、间距和颜色等&#xff09;的计算机语言&#xff0c;能够对网页中元素位置的排版进行像素级别的精…

【数据结构取经之路】二叉搜索树的实现

目录 前言 二叉搜索树 概念 性质 二叉搜索树的实现 结点的定义 插入 查找 删除 二叉搜索树完整代码 前言 首先&#xff0c;二叉搜索树是一种数据结构&#xff0c;了解二叉搜素树有助于理解map和set的特性。 二叉搜索树 概念 二叉搜索树又称二叉排序树&#xff0c…