Wechat applet - Global Monitoring of certain attribute changes of GlobalData, such as monitoring of network state switching

Preface

Recently, there is a demand in the company's applet project , Product list page and product details page configuration video , Video in WiFi Automatically play in the environment , Not WiFi Pause playback in the environment .

One 、 Applet has access to network types API

wx.getNetworkType(Object object)

First, get whether the current network environment is WiFi

//app.js 

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

On the product list page , Get to the current isWifi The attribute value

// goods_list.js

var app = getApp()
Page({
    
  data: {
    
    //  Whether it is wifi Environmental Science 
    isWifi: false
  },
  onLoad: function(options) {
    
     this.setData({
    
       isWifi: app.globalData.isWifi
     });
   }
})

However, when the network is switched , The current network status obtained from the product list page will not change .

Two 、 Wechat applet provides monitoring for network state change events

wx.onNetworkStatusChange(function callback)

We can use this event to listen for network handover changes

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

At this time , When the network state is switched, you can listen , however app.js in isWifi Attribute change , The value of the product list page does not change , What to do .

3、 ... and 、 Use Object.defineProperty() Listen for global changes to attributes

In retrospect vue Realize the principle of two-way data binding ： Data hijacking combined with publishers - How subscriber mode works , adopt Object.defineProperty() To hijack the setter,getter, Publish messages to subscribers when data changes , Trigger corresponding listening callback .

//  Monitor network state changes 
setWatching: function (key,method) {
    
  let obj = this.globalData;
  // Add a prefix to generate hidden variables , Prevent dead circulation 
  let ori = obj[key];   //obj[key] This can't be put in Object.defineProperty in 

  if (ori){
        // Handle declared variables , Binding processing 
    method(ori);
  }
  Object.defineProperty(obj, key, {
    
    configurable: true, //  Whether attributes can be deleted or redefined 
    enumerable: true, //  Whether it can be enumerated , To put it simply, you are using Object.keys() when , Whether the key value can be obtained 
    set: function (value) {
    
      this['_' + key] = value;
      method(value);    // Callback function when data changes , Realize synchronization function 
    },
    get: function () {
    
      //  Call in other interfaces key When it's worth it , It will be implemented here .
      if (typeof this['_' + key] == 'undefined'){
    
        if(ori) {
    
          // Here, variables and are hidden when reading data  globalData The settings are different , So we have to do synchronization 
          this['_' + key] = ori;
          return ori;
        } else {
    
          return undefined;
        }
      } else {
    
        return this['_' + key];
      }
    }
  })
}

Last modification , Product list page isWifi Method of attribute

//  Monitor network state changes 
app.setWatching('isWifi', (v)=>{
    
  this.setData({
    
    isWifi: app.globalData.isWifi
  });
});

Now feel free to switch networks , You can listen on the product list page .

End .