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

前言

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

介绍

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

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

示例

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

在 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();

当全局变量 currentUser 的值发生改变时，我们可以通过设置 getApp().globalData.currentUser 的值来触发监听器函数。在触发监听器函数之后，所有注册的监听器函数都会被依次调用，并及时更新页面或组件的数据。

在实际开发中，我们可以根据实际需求定义不同的全局变量和监听器函数，并在不同的页面或组件中注册这些监听器函数，以实现更灵活和高效的数据传递和共享。