問(wèn)題來(lái)源

最近工作需要寫小程序頁(yè)面，其中有個(gè)頁(yè)面情況為：父頁(yè)面中包含了一個(gè)組件頁(yè)面，組件頁(yè)面中又包含了另外一個(gè)組件頁(yè)面。

需求為：點(diǎn)擊最后一個(gè)組件頁(yè)面中的一個(gè)view，需要顯示最外層父頁(yè)面中的一個(gè)彈出層，并且動(dòng)態(tài)的展示值，這個(gè)值的來(lái)源就是最后一個(gè)組件頁(yè)面中的內(nèi)容。

處理辦法

當(dāng)時(shí)想到的就是使用全局變量，在 app.js 中定義好全局變量，點(diǎn)擊組件頁(yè)面時(shí)就修改全局變量的值，父頁(yè)面同樣使用全局變量的值，這樣一來(lái)就可以動(dòng)態(tài)打開/關(guān)閉彈出層且傳遞值了。

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

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

在其他頁(yè)面就使用 getApp().globalData.參數(shù)名 = 值 的形式來(lái)改變參數(shù)值， 使用 getApp().globalData.參數(shù)名 的形式來(lái)獲取值。

這樣能正常賦值，但是由于都是在同一個(gè)界面展示，我需要更新值后，馬上得到最新的值。上面簡(jiǎn)單的設(shè)置獲取就不起作用了。

那么，就需要監(jiān)聽 globalData 中的屬性了。

首先是 app.js：

//app 全局屬性監(jiān)聽 watch: function (method) { var obj = this.globalData; Object.defineProperty(obj, "data", { //這里的 data 對(duì)應(yīng) 上面 globalData 中的 data configurable: true, enumerable: true, set: function (value) { //動(dòng)態(tài)賦值，傳遞對(duì)象，為 globalData 中對(duì)應(yīng)變量賦值 this._showPictureDetail = value.showPictureDetail; this._pictureTime = value.pictureTime; this._pictureAddress = value.pictureAddress; method(value); }, get: function () { //獲取全局變量值，直接返回全部 return this.globalData; } }) },

接下來(lái)就是在組件頁(yè)面事件中動(dòng)態(tài)賦值：

//圖片拍攝詳情查看 viewPictureDetailInfo: function (e) { // 修改 app 全局屬性值， 由于 globalData.data 是個(gè)對(duì)象，因?yàn)樯婕暗叫薷亩鄠€(gè)參數(shù)，所以需要傳遞對(duì)象 app.globalData.data = { '_showPictureDetail': true, '_pictureTime': e.currentTarget.dataset.phototime, '_pictureAddress': e.currentTarget.dataset.address } },

最后就是在最外層父頁(yè)面添加 app.js 監(jiān)聽回調(diào)，動(dòng)態(tài)修改變量值，以達(dá)到動(dòng)態(tài)打開/關(guān)閉彈出層和展示內(nèi)容了：

// 首先需要在父頁(yè)面 onLoad() 方法中添加監(jiān)聽以及指定監(jiān)聽回調(diào)方法// 設(shè)置 App 監(jiān)聽回調(diào)// 如果其他頁(yè)面修改了 app.js 中的 showPictureDetail 值, 就會(huì)觸發(fā)回調(diào)getApp().watch(self.watchBack)//定義監(jiān)聽回調(diào)方法//app 監(jiān)聽回調(diào)方法 watchBack: function (value) { //這里的value 就是 app.js 中 watch 方法中的 set, 返回整個(gè) globalData this.setData({ showPictureDetail: value._showPictureDetail, pictureTime: value._pictureTime, pictureAddress: value._pictureAddress }); },