微信小程序 - 全局监听globalData的某个属性变化，例如监听网络状态切换

前言

近日公司小程序项目中有个需求，商品列表页及商品详情页配置视频，视频在WiFi环境下自动播放，非WiFi环境下暂停播放。

一、小程序有获取网络类型的API

wx.getNetworkType(Object object)

先获取到当前网络环境是否是WiFi

//app.js 

App({
    
  onLaunch: function() {
    
    wx.getNetworkType({
    
      success: function (res) {
    
        if (res.networkType == 'wifi') {
    
          that.globalData.isWifi = true
        }
      }
    })
  },
  globalData: {
    
    isWifi: false
  }
})

在商品列表页，获取到当前isWifi的属性值

// goods_list.js

var app = getApp()
Page({
    
  data: {
    
    // 是否是wifi环境
    isWifi: false
  },
  onLoad: function(options) {
    
     this.setData({
    
       isWifi: app.globalData.isWifi
     });
   }
})

然而进行网络切换时，商品列表页获取到的当前网络状态不会发生任何改变。

二、微信小程序提供了监听网络状态变化事件

wx.onNetworkStatusChange(function callback)

我们可以使用该事件监听到网络切换变化

wx.onNetworkStatusChange((res) => {
    
  if (res.networkType == 'wifi') {
    
    that.globalData.isWifi = true
  } else {
    
    that.globalData.isWifi = false
  }
});

这时，网络状态切换便可以监听到了，但是app.js中isWifi属性变化改变，商品列表页值并不会随之改变，要怎么办呢。

三、使用Object.defineProperty()监听属性全局更改

回想下vue实现数据双向绑定原理：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

// 监听网络状态变化
setWatching: function (key,method) {
    
  let obj = this.globalData;
  //加个前缀生成隐藏变量，防止死循环发生
  let ori = obj[key];   //obj[key]这个不能放在Object.defineProperty里

  if (ori){
        //处理已经声明的变量，绑定处理
    method(ori);
  }
  Object.defineProperty(obj, key, {
    
    configurable: true, // 属性是否可以被删除或者可否被重新定义特性
    enumerable: true, // 是否可以被枚举,简单讲就是在使用Object.keys()时，是否能拿到键值
    set: function (value) {
    
      this['_' + key] = value;
      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];
      }
    }
  })
}

最后修改下，商品列表页获取isWifi属性的方法

// 监听网络状态变化
app.setWatching('isWifi', (v)=>{
    
  this.setData({
    
    isWifi: app.globalData.isWifi
  });
});

现在随意切换网络，在商品列表页便可以监听到了。

完。