微信小程式全域性變數改變監聽
阿新 • • 發佈:2019-07-13
問題來源
最近工作需要寫小程式頁面,其中有個頁面情況為:父頁面中包含了一個元件頁面,元件頁面中又包含了另外一個元件頁面。需求為:點選最後一個元件頁面中的一個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 內容由物件傳遞變為單個值傳遞即可。在更新值和獲取值時傳遞就是一個值,而不是物件。
可以參考:https://blog.csdn.net/qq_40126542/article/details/8883