微信小程序全局监听globalData

微信小程序内全局监听globalData变化

让微信小程序内实现如同Vue内watch一样的全局监听逻辑。

1.app.js内定义全局变量和监听函数

// app.js

// 定义全局变量
globalData: {
    isShow: true, // 是否显示
},

// 利用defineProperty定义监听器
watch: function(key, method) {
    var obj = this.globalData;
    //加个前缀生成隐藏变量，防止死循环发生
    let ori = obj[key]; //obj[key]这个不能放在Object.defineProperty里
    if (ori) { //处理已经声明的变量，绑定处理
        method(ori);
    }
    Object.defineProperty(obj, key, {
        configurable: true,
        enumerable: true,
        set: function(value) {
            this['_' + key] = value;
            console.log('是否会被执行2')
            method(value);
        },
        get: function() {
            // 在其他界面调用key值的时候，这里就会执行。
            if (typeof this['_' + key] == 'undefined') {
                if (ori) {
                    //这里读取数据的时候隐藏变量和 globalData设置不一样，所以要做同步处理
                    this['_' + key] = ori;
                    return ori;
                } else {
                    return undefined;
                }
            } else {
                return this['_' + key];
            }
        }
    })
},

2.组件或者页面内初始化时挂载监听

// 拿到全局app对象
const app = getApp();

// 组件写法 component.js
data: {
    showTip: false, // 是否展示提示
},
created(options) {
    app.watch('isShow',(v)=>{
        this.setData({
            showTip:v
        })
    })
}

// 页面内写法 page.js
data: {
    showTip: false, // 是否展示提示
},
onLoad(options) {
    app.watch('isShow',(v)=>{
        this.setData({
            showTip:v
        })
    })
}

3.页面内直接调用

<view hidden="{{!showTip}}" class="tip-wrap">
   是否展示这句话
</view>