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

 更新时间:2021年04月09日 09:05:12   作者:Vegetable_dog  
这篇文章主要给大家介绍了关于微信小程序如何监听全局变量的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近工作上遇到一个问题,有个全局变量 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,直接拿来用了。
害就这样了就做好啦!

总结

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

相关文章

  • JavaScript获取URL参数的四种方法总结

    JavaScript获取URL参数的四种方法总结

    在前端开发过程中难免会遇到处理url参数的问题,这篇文章主要给大家总结介绍了关于JavaScript获取URL参数的四种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • JS实现网页背景颜色与select框中颜色同时变化的方法

    JS实现网页背景颜色与select框中颜色同时变化的方法

    这篇文章主要介绍了JS实现网页背景颜色与select框中颜色同时变化的方法,实例分析了javascript操作select及css样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • javascript数据结构之双链表插入排序实例详解

    javascript数据结构之双链表插入排序实例详解

    这篇文章主要介绍了javascript数据结构之双链表插入排序实现方法,较为详细的分析了插入排序的原理及双链表插入排序的实现技巧,对于学习JavaScript数据结构具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 移动端刮刮乐的实现方式(js+HTML5)

    移动端刮刮乐的实现方式(js+HTML5)

    本篇文章主要介绍了移动端刮刮乐的实现方法以及实现代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • js实现3D照片墙效果

    js实现3D照片墙效果

    这篇文章主要介绍了js实现3D照片墙效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • javaScript动态添加Li元素的实例

    javaScript动态添加Li元素的实例

    下面小编就为大家分享一篇javaScript动态添加Li元素的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 前端解析包含图片的excel文件完整步骤及代码示例

    前端解析包含图片的excel文件完整步骤及代码示例

    作为一名开发者,大家在开发过程中是不是经常遇到各种各样的文件,比如xlsx、word、ppt等办公类型的文件格式,这篇文章主要给大家介绍了关于前端解析包含图片的excel文件的相关资料,需要的朋友可以参考下
    2024-07-07
  • javascript实现文本框标签验证的实例代码

    javascript实现文本框标签验证的实例代码

    这篇文章主要介绍了javascript实现文本框标签验证的实例代码,需要的朋友可以参考下
    2018-10-10
  • 前端用echarts绘制含有多个分层的波形图关键代码

    前端用echarts绘制含有多个分层的波形图关键代码

    每次实现各种图表时,总会用到echarts,不得不说确实是一个非常好用的开源库,这篇文章主要给大家介绍了关于前端用echarts绘制含有多个分层的波形图的相关资料,需要的朋友可以参考下
    2024-03-03
  • bootstrap自定义样式之bootstrap实现侧边导航栏功能

    bootstrap自定义样式之bootstrap实现侧边导航栏功能

    bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单。接下来通过本文给大家介绍bootstrap实现侧边导航栏功能,感兴趣的朋友一起看看吧
    2018-09-09

最新评论