鳕鱼天空

This is Mr Wang's Tech Blog.

微信小程序 页面监听全局变量的变化

前言

在前段时间的开发过程中,遇到了一个需要监听是否有推送的需求,需要在不同的页面监听全局变量从而进行条件渲染,因此总结了一下便有了下篇文章.

介绍

当我们开发一个大型的微信小程序时,通常会涉及到多个页面或组件之间的数据传递和共享,而全局变量可以方便地实现这一需求。但是当全局变量的值发生变化时,我们需要及时地更新页面或组件的数据,以保证用户界面的实时性。这时候,我们就需要用到监听器的机制。

监听器是一种设计模式,用于在对象状态发生改变时,自动调用特定的函数。在微信小程序中,我们可以通过定义一个全局变量来存储所有的监听器函数,并在需要监听的页面或组件中注册监听器函数,以实现对全局变量的监听。当全局变量的值发生改变时,我们就可以通过遍历所有的监听器函数,并依次调用这些函数,及时更新页面或组件的数据。

示例

下面是一个在微信小程序中实现监听器机制的示例代码:

在 App.js 中定义全局变量和注册监听器方法

App({
  globalData: {
    currentUser: null, // 全局变量 currentUser
    listeners: [], // 存储监听器函数的数组
  },
  // 注册监听器函数的方法
  registerListener: function (listener) {
    this.globalData.listeners.push(listener);
  },
  // 触发监听器函数的方法
  triggerListeners: function () {
    var listeners = this.globalData.listeners;
    for (var i = 0; i < listeners.length; i++) {
      listeners[i]();
    }
  }
})

在需要监听的页面或组件中注册监听器函数

Page({
  onLoad: function () {
    // 注册监听器函数
    getApp().registerListener(this.onCurrentUserChange.bind(this));
  },
  onCurrentUserChange: function () {
    // 全局变量 currentUser 的值发生改变时,调用该函数
    this.setData({
      currentUser: getApp().globalData.currentUser
    })
  }
})

在全局变量发生改变时触发监听器函数

getApp().globalData.currentUser = {
  name: '小明',
  age: 20
};
getApp().triggerListeners();

 

CSS var() 函数 伪代码 变量(包含微信小程序写法)

通过动态绑定style,声明css变量"--bgColor",把变量”color”赋给“--bgColor”

HTML:

<div ref="chart-circle" class="chart-circle" :style="{ '--bgColor': color }"></div>

微信小程序:

<view  class="chart-circle" style="--bgColor:{{color}}"></view>
.chart-circle {
  width: 80px;
  height: 80px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--bgColor);
  }
}

w3shool中演示

C++类中静态变量和静态方法使用介绍

静态成员的提出是为了解决数据共享的问题。实现共享有许多方法,如:设置全局性的变量或对象是一种方法。但是,全局变量或对象是有局限性的。这一章里,我们主要讲述类的静态成员来实现数据的共享。

  静态数据成员

  在类中,静态成员可以实现多个对象之间的数据共享,并且使用静态数据成员还不会破坏隐藏的原则,即保证了安全性。因此,静态成员是类的所有对象中共享的成员,而不是某个对象的成员。

  使用静态数据成员可以节省内存,因为它是所有对象所公有的,因此,对多个对象来说,静态数据成员只存储一处,供所有对象共用。静态数据成员的值对每个对象都是一样,但它的值是可以更新的。只要对静态数据成员的值更新一次,保证所有对象存取更新后的相同的值,这样可以提高时间效率。

  静态数据成员的使用方法和注意事项如下:

  1、静态数据成员在定义或说明时前面加关键字static。//静态变量的定义

  2、静态成员初始化与一般数据成员初始化不同。静态数据成员初始化的格式如下:

    <数据类型><类名>::<静态数据成员名>=<值>  //静态变量的初始化

  这表明:

         (1) 初始化在类体外进行,而前面不加static,(这点需要注意)以免与一般静态变量或对象相混淆。

  (2) 初始化时不加该成员的访问权限控制符private,public等。

  (3) 初始化时使用作用域运算符来标明它所属类,因此,静态数据成员���类的成员,而不是对象的成员。

  3、静态数据成员是静态存储的,它是静态生存期,必须对它进行初始化。

  4、引用静态数据成员时,采用如下格式:

   <类名>::<静态成员名>   //静态变量的使用方式

  如果静态数据成员的访问权限允许的话(即public的成员),可在程序中,按上述格式来引用静态数据成员。

  下面举一例子,说明静态数据成员的应用:

 
 1 class StaticTest
 2 {
 3 public:
 4     StaticTest(int a, int b, int c);
 5     void GetNumber();
 6     void GetSum();
 7     static void f1(StaticTest &s);
 8 private:
 9     int A, B, C;
10     static int Sum;
11 };
12 
13 
14 
15 #include "StaticTest.h"
16 #include <iostream>
17 using namespace std;
18 
19 int StaticTest::Sum = 0;//静态成员在此初始化
20 
21 StaticTest::StaticTest(int a, int b, int c)
22 {
23     A = a;
24     B = b;
25     C = c;
26     Sum += A + B + C;
27 }
28 
29 void StaticTest::GetNumber()
30 {
31     cout << "Number = " << endl;
32 }
33 
34 void StaticTest::GetSum()
35 {
36     cout << "Sum = " << Sum <<endl;
37 }
38 
39 void StaticTest::f1(StaticTest &s)
40 {
41     
42     cout << s.A << endl;//静态方法不能直接调用一般成员,可以通过对象引用实现调用
43     cout << Sum <<endl;
44 }
45 
46 #include "StaticTest.h"
47 #include <stdlib.h>
48 
49 
50 int main(void)
51 {
52     StaticTest M(3, 7, 10), N(14, 9, 11);
53     M.GetNumber();
54     N.GetSum();
55     M.GetNumber();
56     N.GetSum();
57     StaticTest::f1(M);
58     system("pause");
59     return 0;
60 }
 

 

注意,static成员的初始化要在实现中进行,不能在头文件进行。

从输出结果可以看到Sum的值对M对象和对N对象都是相等的。这是因为在初始化M对象时,将M对象的三个int型数据成员的值求和后赋给了Sum,于是Sum保存了该值。在初始化N对象时,对将N对象的三个int型数据成员的值求和后又加到Sum已有的值上,于是Sum将保存另后的值。所以,不论是通过对象M还是通过对象N来引用的值都是一样的,即为54,s.A=3。

静态成员函数

  静态成员函数和静态数据成员一样,它们都属于类的静态成员,它们都不是对象成员。因此,对静态成员的引用不需要用对象名。

  在静态成员函数的实现中不能直接引用类中说明的非静态成员,可以引用类中说明的静态成员(这点非常重要)。如果静态成员函数中要引用非静态成员时,可通过对象来引用。从中可看出,调用静态成员函数使用如下格式:<类名>::<静态成员函数名>(<参数表>);

 

转自: http://www.cnblogs.com/ppgeneve/p/5091794.html