微信小程序全局變量改變監聽

問題來源

最近工做須要寫小程序頁面，其中有個頁面狀況爲：父頁面中包含了一個組件頁面，組件頁面中又包含了另一個組件頁面。需求爲：點擊最後一個組件頁面中的一個view，須要顯示最外層父頁面中的一個彈出層，而且動態的展現值，這個值的來源就是最後一個組件頁面中的內容。

處理辦法

當時想到的就是使用全局變量，在 app.js 中定義好全局變量，點擊組件頁面時就修改全局變量的值，父頁面一樣使用全局變量的值，這樣一來就能夠動態打開/關閉彈出層且傳遞值了。

下面先看看 app.js 中怎麼定義的：

globalData: { openid: '', userInfo: null, _showPictureDetail: false, _pictureTime: '', _pictureAddress: '', //改變量用戶存放全局變量修改過程當中的值傳遞, 傳遞對象
 data: {} }

在其餘頁面就使用 getApp().globalData.參數名 = 值 的形式來改變參數值， 使用 getApp().globalData.參數名 的形式來獲取值。

這樣能正常賦值，可是因爲都是在同一個界面展現，我須要更新值後，立刻獲得最新的值。上面簡單的設置獲取就不起做用了。

那麼，就須要監聽 globalData 中的屬性了。

首先是 app.js：

//app 全局屬性監聽
  watch: function (method) { var obj = this.globalData; Object.defineProperty(obj, "data", {  //這裏的 data 對應 上面 globalData 中的 data configurable: true, enumerable: true, set: function (value) { //動態賦值，傳遞對象，爲 globalData 中對應變量賦值 this._showPictureDetail = value.showPictureDetail; this._pictureTime = value.pictureTime; this._pictureAddress = value.pictureAddress; method(value); }, get: function () { //獲取全局變量值，直接返回所有 return this.globalData; } }) },

接下來就是在組件頁面事件中動態賦值：

//圖片拍攝詳情查看
    viewPictureDetailInfo: function (e) { // 修改 app 全局屬性值， 因爲 globalData.data 是個對象，由於涉及到修改多個參數，因此須要傳遞對象
      app.globalData.data = { '_showPictureDetail': true, '_pictureTime': e.currentTarget.dataset.phototime, '_pictureAddress': e.currentTarget.dataset.address } },

最後就是在最外層父頁面添加 app.js 監聽回調，動態修改變量值，以達到動態打開/關閉彈出層和展現內容了：

// 首先須要在父頁面 onLoad() 方法中添加監聽以及指定監聽回調方法 // 設置 App 監聽回調 // 若是其餘頁面修改了 app.js 中的 showPictureDetail 值, 就會觸發回調
getApp().watch(self.watchBack) //定義監聽回調方法 //app 監聽回調方法
  watchBack: function (value) { //這裏的value 就是 app.js 中 watch 方法中的 set, 返回整個 globalData this.setData({ showPictureDetail: value._showPictureDetail, pictureTime: value._pictureTime, pictureAddress: value._pictureAddress }); },

這樣，在父頁面中使用 showPictureDetail..這幾個變量就能夠動態展現了。

PS：我這邊的業務需求涉及到多個變量的監聽，若是你只有一個變量的監聽，那麼只須要修改 app.js 中 watch 方法的 Object.defineProperty 內容由對象傳遞變爲單個值傳遞便可。在更新值和獲取值時傳遞就是一個值，而不是對象。

能夠參考：http://www.javashuo.com/article/p-cwzipyno-bb.html

原文出處：https://www.cnblogs.com/dream-saddle/p/11180053.html