iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序如何监听全局变量
  • 901
分享到

微信小程序如何监听全局变量

2024-04-02 19:04:59 901人浏览 泡泡鱼
摘要

最近工作上遇到一个问题,有个全局变量 red_heart,因为它在很多地方用到,当它发生改变了,用到的地方也要改变。但是原生小程序并没有像Vue这种相关的做法。所以我就想自己实现一个

最近工作上遇到一个问题,有个全局变量 red_heart,因为它在很多地方用到,当它发生改变了,用到的地方也要改变。但是原生小程序并没有像Vue这种相关的做法。所以我就想自己实现一个全局变量改变,用到这个变量的地方也重新渲染。

开始吧

首先全局变量里肯定要先有这个 red_heart


globalData: {
    red_heart:0,
  },

然后要在onLaunch方法里给全局变量加一个Proxy代理。

Proxy很好理解,懂得都懂。


this.globalData = new Proxy(this.globalData, {
      get(target, key){
        return target[key];
      },
      set:(target, key, value)=>{
        if(key === "red_heart"){
          this.globalDep.RedHeartDep.notifuy()
        }
        return Reflect.set(target, key, value);
      }
    });

主要看set方法里面有一个this.globalDep.RedHeartDep.notifuy(),这个是啥。这是我在全局创建的一个Dep,简称依赖收集。

代码


globalDep:{
    RedHeartDep:{
      subs:[],
      addSub(watch){
        this.subs.push(watch)
      },
      removeWatch(id){
        this.subs = this.subs.filter((item)=>{
          return item.id != id
        })
      },
      notifuy(){
        setTimeout(()=>{
          this.subs.forEach(w=>w.update())
        },0)
      }
    }
  }

subs是一个数组,用来收集依赖,addSub和removeWatch,notifuy是用来告诉这个东西要去更新了。

那现在还有一个问题,就是这个依赖在哪里添加呢,当然是在用到的地方添加,就是组件创建的时候。

附上组件js全部代码:


const app = getApp()
Component({
  properties: {

  },
  data: {
    red_heart:0
  },
  lifetimes:{
    attached(){
      let watch = {
        id:this.__wxExparsernodeId__,
        update:()=>{
          this.setData({
            red_heart:app.globalData.red_heart
          })
        }
      }
      app.globalDep.RedHeartDep.addSub(watch)
      app.globalData.red_heart = app.globalData.red_heart
    },
    detached(){
      app.globalDep.RedHeartDep.removeWatch(this.__wxExparserNodeId__)
    }
  },
  methods: {
    handClick(){
      app.globalData.red_heart++
      console.log(app.globalData)
    }
  }
})

在attached上添加依赖,在组件销毁的时候也不要忘记把依赖删除,这个id是小程序的一个编译id,直接拿来用了。
害就这样了就做好啦!

总结

到此这篇关于微信小程序如何监听全局变量的文章就介绍到这了,更多相关小程序监听全局内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 微信小程序如何监听全局变量

本文链接: https://www.lsjlt.com/news/123165.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序如何监听全局变量
    最近工作上遇到一个问题,有个全局变量 red_heart,因为它在很多地方用到,当它发生改变了,用到的地方也要改变。但是原生小程序并没有像Vue这种相关的做法。所以我就想自己实现一个...
    99+
    2024-04-02
  • 微信小程序怎样监听全局变量
    这篇文章主要讲解了“微信小程序怎样监听全局变量”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序怎样监听全局变量”吧!开始吧首先全局变量里肯定要先有这个 red_heartglobal...
    99+
    2023-06-14
  • 微信小程序中如何使用全局变量
    这篇文章主要介绍微信小程序中如何使用全局变量,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!全局变量的使用每个小程序都需要在 app.js 中调用 App 方法注册小程序示例,绑定生命...
    99+
    2024-04-02
  • 微信小程序页面如何获取全局变量
    微信小程序页面获取全局变量的案例:app.js文件代码:App({globalData{test:"hello world"}})index.js文件代码:var app =getApp()...
    99+
    2024-04-02
  • 微信小程序中如何监听网络状态变化
    这篇“微信小程序中如何监听网络状态变化”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“微信小程序中如何监听网络状态变化”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下...
    99+
    2023-06-26
  • 微信小程序如何声明变量
    这篇文章主要为大家展示了“微信小程序如何声明变量”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序如何声明变量”这篇文章吧。概念WXS 中的变量均为值的引用。没有声明的变量直接赋值使用,会...
    99+
    2023-06-26
  • 【微信小程序】全局配置
    目录 全局配置文件及常用的配置项 全局配置 - window 1. 小程序窗口的组成部分 2. 了解 window 节点常用的配置项  3. 设置导航栏的标题 4. 设置导航栏的背景色  5. 设置导航栏的标题颜色 6. 全局开启下拉刷新功...
    99+
    2023-09-10
    微信小程序 小程序 前端 javascript 开发语言
  • 微信小程序如何停止监听罗盘数据
    本文将为大家详细介绍“微信小程序如何停止监听罗盘数据”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“微信小程序如何停止监听罗盘数据”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获...
    99+
    2023-06-26
  • 微信小程序如何开始监听罗盘数据
    这篇“微信小程序如何开始监听罗盘数据”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“微信小程序如何开始监听罗盘数据”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们...
    99+
    2023-06-26
  • 微信小程序如何监听蓝牙适配器状态变化事件
    这篇“微信小程序如何监听蓝牙适配器状态变化事件”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“微信小程序如何监听蓝牙适配器状态变化事件”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇...
    99+
    2023-06-26
  • 微信小程序checkbox如何变小
    这篇“微信小程序checkbox如何变小”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序checkbox如何变小”文...
    99+
    2023-06-26
  • 【微信小程序】全局配置 - tabBar
    目录 全局配置 - tabBar 1. 什么是 tabBar 2. tabBar 的 6 个组成部分 3. tabBar 节点的配置项 4. 每个 tab 项的配置选项 全局配置 - 案例:配置 tabBar 1. 需求描述 2. 实现步骤...
    99+
    2023-09-03
    微信小程序 开发语言 小程序 javascript
  • 微信小程序实现监听页面滚动
    本文实例为大家分享了微信小程序实现监听页面滚动的具体代码,供大家参考,具体内容如下 1.正常状态下 2.页面滚动到大于100时显示定位到顶部的view盒子 3.html部分 &l...
    99+
    2024-04-02
  • 微信小程序如何监听手势滑动切换页面
    这篇文章给大家分享的是有关微信小程序如何监听手势滑动切换页面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序 监听手势滑动切换页面实例详解1.对应的xml里写上手势开始、...
    99+
    2024-04-02
  • 微信小程序如何监听用户主动截屏事件
    这篇文章主要为大家展示了微信小程序如何监听用户主动截屏事件,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“微信小程序如何监听用户主动截屏事件”这篇文章吧。监听用户主动截屏事件,用户使用系统截屏按键截...
    99+
    2023-06-26
  • SAP UI5和微信小程序框架里的全局变量是怎样的
    这篇文章给大家介绍SAP UI5和微信小程序框架里的全局变量是怎样的,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。SAP UI5在全局变量sap中。ui有许多有用的实用工具服务可用,例如当前浏览器和操作系统信息。并使用...
    99+
    2023-06-04
  • Uniapp微信小程序实现全局事件监听并进行数据埋点的方法
    目录零、前言一、软件环境二、相关分析及实现uniapp编译微信小程序时对于事件的处理分析源Vue模板及编译产物wxml对照微信小程序自定义组件Component分析事件对象并编写事件...
    99+
    2022-11-16
    微信小程序监听全局点击事件 小程序全局变量监听 uniapp微信小程序全局事件监听
  • 微信小程序中如何监听用户主动截屏事件
    这篇“微信小程序中如何监听用户主动截屏事件”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“微信小程序中如何监听用户主动截屏事件”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所...
    99+
    2023-06-26
  • vue如何监听变量
    在vue中监听变量的方法:1.新建项目,引入vue;2.定义监听对象;3.使用watch方法监听对象中的变量;具体步骤如下:首先,新建一个html项目,并在项目中引入vue;import Vue from 'vue'引入vue后,在项目中定...
    99+
    2024-04-02
  • 微信小程序做全局登录弹窗
    需求:在任意需要弹出登录的页面,后台返回需要登录状态码,弹出登录弹窗进行登录,并刷新当前页面 过程:因为微信小程序无法封装一个全局组件通过方法全局调用。因此只能封装一个公共组件,在需要弹窗的页面注册并...
    99+
    2023-10-01
    微信小程序 小程序 微信 前端
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作