小程序全局变量与组件内部实时监听全局变量的改变

前言：

        小程序的全局变量的设置与修改，并且在页面内部、组件内部实时监听我们全局变量的改动，来实现我们的一些功能效果，比如全局弹框，比如全局loadding效果等等。

实现效果：

        请求后台前展示loadding,

        请求后台后关闭loadding

 

实现步骤：

1、全局变量的设置与修改

app.js中配置：

App({
    
  //全局监听loadding状态
  watch:function(method){
    var obj = this.globalData;
    //注意，这里的comLoadding对应的是globalData定义的变量
    Object.defineProperty(obj,"comLoadding", {
      configurable: true,
      enumerable: true,
      set: function (value) {
        //_comLoadding 是自己起的名字，只要和get里面的保持统一就行，方法内部使用变量
        this._comLoadding = value;
        method(value);
      },
      get:function(){
        return this._comLoadding
      }
    })
  },  
  globalData: {
    comLoadding:false
  }
    
 
})

2、页面内部监听与修改

监听方法：

onLoad: function (options) {
     /**
     * @tip：loadding的控制状态与全局的控制字段连接
     *       1、组件初始化
     *       2、绑定组件内部watch
     * @time 2022.9.7
     * @author zwh
     * ---------------------START--------------------------
     * */
    const self = this;
    // 注意：watchBack后面要重新绑定this,否则下边的this找不到
    getApp().watch(self.watchBack.bind(self));
    // ---------------------END--------------------------
},
// 监听全局的loadding状态
watchBack(comLoadding){
 
    // 监听数据会拿到与当前值相同的数据
    if(comLoadding === this.data.loadingFlag) return
    // 关闭loadding增加延时效果，目的是效果展示
    if(!comLoadding){
      setTimeout(()=>{
        this.setData({
          loadingFlag:comLoadding,
        })
      },500)
    }else{
      this.setData({
        loadingFlag:comLoadding,
      })
    }
 
},

修改公共变量方法：

//修改全局的内容
getApp().globalData.comLoadding = true  
getApp().globalData.comLoadding = false

3、组件内部监听

监听方法：

Component({
    pageLifetimes: {
        show() {
            
            /**
               * @tip：loadding的控制状态与全局的控制字段连接
               *       1、组件初始化
               *       2、绑定组件内部watch
               * @time 2022.9.7
               * @author zwh
               * ---------------------START--------------------------
               * */
                  const self = this;
                  // 注意：watchBack后面要重新绑定this,否则下边的this找不到
                  getApp().watch(self.watchBack.bind(self));
              // ---------------------END--------------------------
 
        }
    },
    methods: {
        // 监听全局的loadding状态
        watchBack(comLoadding){
          // 监听数据会拿到与当前值相同的数据
          if(comLoadding === this.data.loadingFlag) return
          // 关闭loadding增加延时效果，目的是效果展示
          if(!comLoadding){
            setTimeout(()=>{
              this.setData({
                loadingFlag:comLoadding,
              })
            },500)
          }else{
            this.setData({
              loadingFlag:comLoadding,
            })
          }
        },
    }
 
 
})

修改公共变量方法：

//修改全局的内容
getApp().globalData.comLoadding = true  
getApp().globalData.comLoadding = false

4、公共 请求接口中  request.js中改变公共变量

//打开loadding
const noNeedLoaddingRouters = ['consumer/live/room-product-list','consumer/loadingImg/find-loading-img']
let needLodding = noNeedLoaddingRouters.filter(v => v === url.split('api/live/')[1]).length > 0 ? true : false
if(!needLodding){
   getApp().globalData.comLoadding = true
}
 
//请求接口
wx.request({
    url: url,
    data,
    method,
    header: {},
    success:async (res) => {
        //关闭loadding
        getApp().globalData.comLoadding = false
 
    },
    fail: (error) => {
        //关闭loadding
        getApp().globalData.comLoadding = false
 
    }
}