当前位置: 首页 > 工具软件 > AppJS > 使用案例 >

微信小程序app.js中的全局变量globalData改变,如何通知其它页面界面显示改变,小程序中如何在其他页面中监听到globalData中值的变化

金泉
2023-12-01

微信小程序app.js中的全局变量globalData改变,如何通知其它页面界面显示改变,小程序中如何在其他页面中监听到globalData中值的变化


在小程序中,我们一般在app.js的onLaunch中发起登录请求,由于是请求是异步的,这时候你发下在页面的page.js中,会发现取不到值。这里我们使用监听全局变量globalData的变化,目前还没发下小程序有自带的监听机制,这里我们自己来实现。

1. 在app.js 中添加监听函数

 // 监听全局变量变化
  watch: function (variate, method) {
    var obj = this.globalData;
    let val = obj[variate];// 单独变量来存储原来的值
    Object.defineProperty(obj, variate, {
      configurable: false,
      enumerable: true,
      set: function (value) {
        val = value;// 重新赋值
        method(variate,value);// 执行回调方法
      },
      get: function () {
        // 在其他界面调用getApp().globalData.variate的时候,这里就会执行。
        return val; // 返回当前值
      }
    })
  },

2. 在页面的page.js中注册监听

onLoad: function () {
    getApp().watch('user',this.watchBack);
}

user: 监听的app.js中的全局变量名

 globalData: {
    user: {},
 }

this.watchBack: 当前页面的监听回调函数,第三步中实现回调函数

3. 在页面的page.js中实现监听回调函数

 watchBack: function (name,value) {
    console.log('name==' + name);
    console.log(value);
    console.log(getApp().globalData.user);

    // 可以这样
    let data = {};
    data[name] = value;
    this.setData(data);

    // 也可以这样
    if (name === 'user') {
       this.setData({
          user: getApp().globalData.user,
       });
    }
 }

 类似资料: