問題來源

最近工作需要寫小程式頁面，其中有個頁面情況為：父頁面中包含了一個元件頁面，元件頁面中又包含了另外一個元件頁面。需求為：點選最後一個元件頁面中的一個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