微信小程序实现全局参数共享,且实现全局参数变化时的页面间通信

server/2024/11/9 16:58:14/

首先,小程序>微信小程序中并没有提供直接的全局事件系统来监听全局参数的变化。因此,我们需要采用其他方式来达到这一目的。一种常见的方法是使用全局变量和事件监听来模拟全局事件系统。

1. 定义全局变量和事件

app.js 中定义全局变量,并提供一个方法来更新这些变量并触发事件。

// app.js  
App({  globalData: {  userInfo: null  },  // 更新全局变量并触发事件  updateGlobalData: function(key, value) {  this.globalData[key] = value;  this.triggerGlobalEvent(key, value);  },  // 触发全局事件  triggerGlobalEvent: function(key, value) {  const event = {  key: key,  value: value  };  // 通知所有页面  const pages = getCurrentPages();  pages.forEach(page => {  if (page && page.onGlobalDataChange) {  page.onGlobalDataChange(event);  }  });  }  
});

2. 修改全局变量并触发事件

当需要修改全局变量时,调用 updateGlobalData 方法

// 在某个页面的方法中  
const app = getApp();  
// 假设全局参数发生了变化  
const newUserInfo = { name: 'New User', avatarUrl: 'new_avatar_url' };  
app.updateGlobalData('userInfo', newUserInfo);

3. 在其他页面中监听全局事件

在需要监听全局参数变化的页面中,你可以在页面的生命周期方法(如 onLoadonShow)中订阅这个事件,并在事件处理函数中更新页面状态。

// pages/somePage/somePage.js  
Page({  data: {  userInfo: null  },  onLoad: function() {  const app = getApp();  // 监听全局变量变化  app.onGlobalDataChange = this.handleGlobalDataChange.bind(this);  // 初始化数据,检查全局变量是否已经有值  this.setData({  userInfo: app.globalData.userInfo  });  },  onUnload: function() {  const app = getApp();  // 取消监听全局变量变化  app.onGlobalDataChange = null;  },  handleGlobalDataChange: function(event) {  // 检查事件中的数据是否是我们关心的全局参数  if (event.key === 'userInfo') {  // 更新页面的数据绑定  this.setData({  userInfo: event.value  });  // 根据需要执行其他操作,如重新渲染视图等  }  }  
});

在上面的代码中,当全局变量变化时,updateGlobalData 方法会调用 triggerGlobalEvent 来遍历当前所有打开的页面,并调用每个页面上的 onGlobalDataChange 方法。每个页面需要在 onLoad 生命周期方法中绑定这个方法,并在 onUnload 生命周期方法中解绑,以避免内存泄漏。

注意事项:

  • 确保在页面的 onUnloadonHide 生命周期方法中取消订阅事件,以避免内存泄漏。
  • 如果你的小程序结构复杂,或者全局参数变化频繁,考虑使用更高级的状态管理方案,如 Vuex(如果你使用的是小程序与 Vue 结合的框架)或其他状态管理库。
  • 不要过度依赖全局状态,尽量保持组件的独立性,通过 props 和 events 进行父子组件间的通信。全局状态应仅用于存储那些确实需要在多个页面间共享的数据。

http://www.ppmy.cn/server/3010.html

相关文章

【华为OD机试】跳马【C卷|200分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 马是象棋(包括中国象棋和国际象棋)中的棋子,走法是每步直一格再斜一格, 即先横着或者直者走一格,然后再斜着走一个对角线,可进可退,可越过河界,俗称"马走日"字。 给定 m…

最新在Fedora Linux安装MongoDB服务器的简单教程

本指南将帮助你在 Fedora 39/38/37/36 或您正在使用的任何其他版本上安装最新或旧版本的 MongoDB 数据库服务器。 MongoDB 是一种流行的 NoSQL 数据库服务器,提供社区版和企业版。它以其高性能、灵活性和可扩展性而闻名。它是一个无模式数据库,因此允许…

特殊文件java

properties 属性文件 里边存放 键值对键不能重复文件后缀一般是 properties 结尾的 使用properties读取属性文件 public class PropertiesTest1 {public static void main(String[] args) throws Exception {//1.创建一个properties对象Properties properties new Propertie…

网工-BGP协议全面学习笔记(待更新和完善...)

作者:BSXY_19计科_陈永跃 BSXY_信息学院 注:未经允许禁止转发任何内容 网工-BGP协议全面学习笔记 1、OSPF基础2、BGP报文3、BGP案例4、BGP属性待更新和完善... 1、OSPF基础 在EGP协议中,引入了AS(Autonomous System,自治系统)的概…

linux设置程序在开机时自启动

​常见的有三种方式:1、/etc/rc.local文件中添加自启动命令 对于某些没有使用systemd的Linux发行版,可以在/etc/rc.local文件中添加自启动命令。请确保该文件具有可执行权限。例如,在/etc/rc.local文件中添加以下内容: /…

使用go和消息队列优化投票功能

文章目录 1、优化方案与主要实现代码1.1、原系统的技术架构1.2、新系统的技术架构1.3、查看和投票接口实现1.4、数据入库MySQL协程实现1.5、路由配置1.6、启动程序入口实现 2、压测结果2.1、设置Jmeter线程组2.2、Jmeter聚合报告结果,支持11240/秒吞吐量2.3、Jmeter…

文心一言VSchatGPT4

文心一言和GPT-4各有优势,具体表现在不同的测试场景下。 在某些测试场景中心一言的表现优于GPT-4,例如在故事的完整度和情节吸引力方面,文心一言表现得更加符合指令,情节更吸引人。这可能得益于其模型在训练时对中文语境的深入理…

加载 docker 镜像文件 centos7 系统 lnmp 环境 php8.2 php5.2 php7.4

# 加载镜像从tar文件 链接&#xff1a;https://pan.baidu.com/s/1s2yf7iroI-tBTK5b9zxxnA 提取码&#xff1a;6666 docker load < my_migration_image.tar # 运行新容器&#xff0c;可以使用相同的参数和命令 8233 电脑访问时对应的端口 80 docker 上的nginx 端口号 …