ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

【微信小程序】- 监听全局globalData数据

2026/10/3 0:13:29 拓冰建站 浏览量
【微信小程序】- 监听全局globalData数据

【微信小程序】- 监听全局globalData数据

  • 数据劫持(Object.defineProperty)
    • 实现
    • 适用场景

数据劫持(Object.defineProperty)

实现

通过拦截 globalData 的属性读写实现自动监听,适合精确监听特定变量。
​实现步骤​:

  1. ​在 app.ts/app.js 中劫持数据属性​:
    // app.ts
    App({globalData: {userInfo: {},},...// 定义劫持方法defineWatcher: function(key, callback) {const obj = this.globalData;let val = obj[key];Object.defineProperty(obj, key, {set: (value) => {val = value;callback(value); // 触发回调},get: () => val});}
    })
    
  2. 在页面中启用劫持监听​:
    // 需要监听页面的对应ts/js文件
    Page({onLoad() {const app = getApp();app.defineWatcher('userInfo', (newVal: any) => {this.setData({avatarUrl: newVal.avatarUrl,nickName: newVal.nickName});});}
    });

适用场景

适用场景: 精确监听特定变量
优势: 自动触发,无需显式调用更新
限制: 兼容性依赖 ES5,无法监听新增属性