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

news2024/9/24 3:26:44

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.coloradmin.cn/o/1924594.html

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

相关文章

C语言——流程控制:if...else、switch...case

控制类语句&#xff1a; 逻辑运算符&#xff1a; 选择语句&#xff1a; if...else&#xff1a; if&#xff08;&#xff09;括号内的内容终究会被转换成0,1&#xff0c;满足的话即为1&#xff0c;不满足的话为0。因此要注意&#xff0c;&#xff08;&#xff09;括号内因为条件…

【数智化CIO展】沃太能源CIO陈丽:AI 浪潮下的中国企业数智化转型机遇与挑战...

陈丽 本文由沃太能源CIO陈丽投递并参与由数据猿联合上海大数据联盟共同推出的《2024中国数智化转型升级优秀CIO》榜单/奖项评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 在当今飞速发展的数字时代&#xff0c;中国企业正面临着前所未有的变革机遇和挑战。“中国企业数…

机器学习筑基篇,Jupyter Notebook 精简指南

[ 知识是人生的灯塔&#xff0c;只有不断学习&#xff0c;才能照亮前行的道路 ] 0x00 Jupyter Notebook 简明指南 描述&#xff1a;前面我们已经在机器学习工作站&#xff08;Ubuntu 24.04 Desktop Geforce RTX 4070Ti SUPER&#xff09;中安装 Anaconda 工具包&#xff0c;其…

Spark底层原理:案例解析(第34天)

系列文章目录 一、Spark架构设计概述 二、Spark核心组件 三、Spark架构设计举例分析 四、Job调度流程详解 五、Spark交互流程详解 文章目录 系列文章目录前言一、Spark架构设计概述1. 集群资源管理器&#xff08;Cluster Manager&#xff09;2. 工作节点&#xff08;Worker No…

Unity基础调色

叭叭叭 最近&#xff08;*这两天&#xff09;因为想做一些Unity的调色问题&#xff0c;尝试原文翻译一下&#xff0c;其实直接原文更好&#xff01;&#xff01; Color Grading 参考了&#xff0c;某大牛的翻译&#xff0c;实在忍不住了&#xff0c;我是不知道为什么能翻译成…

最新版智能修图-中文luminar ai 1.55(13797) 和 neo1.20,支持m芯片和intel芯片(绝对可用)

Luminar AI for macOS 完整版本 这个程序是第一个完全由人工智能驱动的图像编辑器。有了它&#xff0c;创建引人注目的照片是有趣的&#xff0c;令人惊讶的容易。它是一个独立的照片编辑器和macOS插件。 Luminar AI for macOS 轻轻地塑造和完善一个肖像打造富有表现力的眼睛…

Qt MV架构-委托类

一、基本概念 与MVC模式不同&#xff0c;MV视图架构中没有包含一个完全分离的组件来处理与用户的交互。 一般地&#xff0c;视图用来将模型中的数据显示给用户&#xff0c;也用来处理用户的输入。为了获得更高的灵活性&#xff0c;交互可以由委托来执行。 这些组件提供了输入…

excel、word、ppt 下载安装步骤整理

请按照我的步骤开始操作&#xff0c;注意以下截图红框标记处&#xff08;往往都是需要点击的地方&#xff09; 第一步&#xff1a;下载 首先进入office下载网址&#xff1a; otp.landian.vip 然后点击下载 拉到下方 下载站点&#xff08;这里根据自己的需要选择下载&#x…

IoTDB 集群高效管理:一键启停功能介绍

如何快速启动、停止 IoTDB 集群节点的功能详解&#xff01; 在部署 IoTDB 集群时&#xff0c;对于基础的单机模式&#xff0c;启动过程相对简单&#xff0c;仅需执行 start-standalone 脚本来启动 1 个 ConfigNode 节点和 1 个 DataNode 节点。然而&#xff0c;对于更高级的分布…

frp内网穿透ssh,tcp经过服务器慢速和p2p模式实现高速吃满上传带宽

ssh_server aliyun_server ssh_client 办公室 云服务器 家 在家里经过云服务器中转&#xff0c;很慢&#xff0c;但是很稳定 使用p2p穿透&#xff0c;速度可以直接拉满 ssh_server cc.ini # 连接服务器配置 [common] server_addr 1…

深度学习LSTM之预测光伏发电

代码一&#xff1a;训练LSTM模型 代码逐段分析 import numpy as np import pandas as pd import tensorflow.keras as tk from tensorflow.keras import layers首先&#xff0c;导入了必要的库&#xff1a;numpy用于数值计算&#xff0c;pandas用于数据处理&#xff0c;tenso…

【CEEMDAN-VMD-CNN-LSTM】双重分解+卷积神经网络+长短期记忆神经网络多变量回归预测,多变量输入模型

双重分解&#xff08;Dual Decomposition&#xff09;、卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;和长短期记忆神经网络&#xff08;Long Short-Term Memory&#xff0c;LSTM&#xff09;结合的多变量回归预测需要详细的实现和数据情况…

Go 初始化一个字典value是列表

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

7-4、5、6 react+ipfs上传文件数据及相关配置(react+区块链实战)

7-4、5、6 reactipfs上传文件数据及相关配置&#xff08;react区块链实战&#xff09; 7-4 reactipfs上传文件7-5 reactipfs 上传数据ipfs跨域配置7-6 reactipfs读取ipfs网络数据 7-4 reactipfs上传文件 引入之前安装的ipfs-api 在电脑后台启动ipfs的服务 ipfs daemon&#…

智慧城市3d数据可视化系统提升信息汇报的时效和精准度

在信息大爆炸的时代&#xff0c;数据的力量无可估量。而如何将这些数据以直观、高效的方式呈现出来&#xff0c;成为了一个亟待解决的问题。为此&#xff0c;我们推出了全新的3D可视化数据大屏系统&#xff0c;让数据“跃然屏上”&#xff0c;助力您洞察先机&#xff0c;决胜千…

nginx的四层负载均衡实战

目录 1 环境准备 1.1 mysql 部署 1.2 nginx 部署 1.3 关闭防火墙和selinux 2 nginx配置 2.1 修改nginx主配置文件 2.2 创建stream配置文件 2.3 重启nginx 3 测试四层代理是否轮循成功 3.1 远程链接通过代理服务器访问 3.2 动图演示 4 四层反向代理算法介绍 4.1 轮询&#xff0…

AI人工智能开源大模型生态体系分析

人工智能开源大模型生态体系研究 "人工智能开源大模型生态体系研究报告v1.0"揭示&#xff0c;AI(A)的飞速发展依赖于三大核心&#xff1a;数据、算法和算力。这一理念已得到业界广泛认同&#xff0c;三者兼备才能推动AI的壮大发展。随着AI大模型的扩大与普及&#xf…

【学习笔记】4、组合逻辑电路(下)

接前文《【学习笔记】4、组合逻辑电路(上)》 4.4.5 算术运算电路 1. 半加器和全加器 半加器和全加器是算术运算电路中的基本单元。半加器和全加器是1位相加的组合逻辑电路。 &#xff08;1&#xff09;半加器 半加器&#xff1a;只考虑两个加数本身&#xff0c;不考虑低位进…

WPF学习(6) -- WPF命令和通知

一 、WPF命令 1.ICommand代码 创建一个文件夹和文件 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Input;namespace 学习.Command {public class MyCommand : ICommand{Acti…

再升级!视频理解大模型 CogVLM2 开源

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对大模型技术趋势、算法项目落地经验分享、新手如何入门算法岗、该如何准备面试攻略、面试常考点等热门话题进行了深入的讨论。 总结链接如…