微信小程序如何在其他页面监听globalData中值的变化？

在微信小程序中，如果你想在一个页面监听 globalData 中某个值的变化，可以通过以下方法实现：

使用事件监听方式

1. 在 app.js 中定义全局数据 (globalData)：

// app.js
App({
  globalData: {
    userInfo: null, // 示例：定义一个 userInfo 对象
  }
});

2. 在其他页面中监听 globalData 变化：

在其他页面的 onShow 生命周期中设置监听事件，以便在页面显示时更新数据。

// pages/otherPage/otherPage.js
const app = getApp(); // 获取小程序实例

Page({
  onShow: function () {
    // 监听 userInfo 的变化
    this.setData({
      userInfo: app.globalData.userInfo
    });

    // 或者使用事件监听方式
    app.watchUserInfo(userInfo => {
      this.setData({
        userInfo
      });
    });
  }
});

3. 在 app.js 中添加全局事件监听器

在 app.js 中添加一个全局的事件监听器，用于监听 globalData 中某个值的变化，并在变化时触发事件

// app.js
App({
  globalData: {
    userInfo: null,
  },
  watchUserInfo(callback) {
    this.globalDataWatcher = callback;
  },
  setGlobalData(data) {
    for (let key in data) {
      if (this.globalData.hasOwnProperty(key)) {
        this.globalData[key] = data[key];
        if (this.globalDataWatcher) {
          this.globalDataWatcher(this.globalData[key]);
        }
      }
    }
  }
});

4. 在需要修改 globalData 的地方调用 setGlobalData

在需要修改 globalData 的页面或组件中，调用 setGlobalData 方法更新值，并触发监听器。

// pages/modifyPage/modifyPage.js
const app = getApp();

Page({
  updateUser() {
    const newUserInfo = { name: 'John Doe', age: 30 }; // 示例：新的用户信息
    app.setGlobalData({ userInfo: newUserInfo });
  }
});

注意事项：

事件监听的实现：在 App 实例中，通过定义一个 watchUserInfo 方法和 setGlobalData 方法，实现了全局数据的监听和更新。

页面生命周期中的使用：通常在页面的 onShow 生命周期中获取最新的 globalData 数据，确保页面每次展示时数据都是最新的。