微信小程序全局變量改變監(jiān)聽的實(shí)現(xiàn)方法
問題來源
最近工作需要寫小程序頁(yè)面,其中有個(gè)頁(yè)面情況為:父頁(yè)面中包含了一個(gè)組件頁(yè)面,組件頁(yè)面中又包含了另外一個(gè)組件頁(yè)面。
需求為:點(diǎn)擊最后一個(gè)組件頁(yè)面中的一個(gè)view,需要顯示最外層父頁(yè)面中的一個(gè)彈出層,并且動(dòng)態(tài)的展示值,這個(gè)值的來源就是最后一個(gè)組件頁(yè)面中的內(nèi)容。
處理辦法
當(dāng)時(shí)想到的就是使用全局變量,在 app.js 中定義好全局變量,點(diǎn)擊組件頁(yè)面時(shí)就修改全局變量的值,父頁(yè)面同樣使用全局變量的值,這樣一來就可以動(dòng)態(tài)打開/關(guān)閉彈出層且傳遞值了。
下面先看看 app.js 中怎么定義的:
globalData: { openid: '', userInfo: null, _showPictureDetail: false, _pictureTime: '', _pictureAddress: '', //改變量用戶存放全局變量修改過程中的值傳遞, 傳遞對(duì)象 data: {} }
在其他頁(yè)面就使用 getApp().globalData.參數(shù)名 = 值 的形式來改變參數(shù)值, 使用 getApp().globalData.參數(shù)名 的形式來獲取值。
這樣能正常賦值,但是由于都是在同一個(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; } }) },
接下來就是在組件頁(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 }); },
這樣,在父頁(yè)面中使用 showPictureDetail..這幾個(gè)變量就可以動(dòng)態(tài)展示了。
PS:我這邊的業(yè)務(wù)需求涉及到多個(gè)變量的監(jiān)聽,如果你只有一個(gè)變量的監(jiān)聽,那么只需要修改 app.js 中 watch 方法的 Object.defineProperty 內(nèi)容由對(duì)象傳遞變?yōu)閱蝹€(gè)值傳遞即可。在更新值和獲取值時(shí)傳遞就是一個(gè)值,而不是對(duì)象。
可以參考:http://www.dbjr.com.cn/article/165365.htm
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
js Array對(duì)象的擴(kuò)展函數(shù)代碼
有時(shí)候我們需要對(duì)js的array對(duì)象擴(kuò)展一些功能,這里簡(jiǎn)單介紹下,方便需要的朋友2013-04-04javascript計(jì)算當(dāng)月剩余天數(shù)(天數(shù)計(jì)算器)示例代碼
本文介紹了利用Javascript在網(wǎng)頁(yè)上計(jì)算當(dāng)前月份的剩余天數(shù)的方法,大家參考使用吧2014-01-01javascript 利用arguments實(shí)現(xiàn)可變長(zhǎng)參數(shù)
在C#中,有可變長(zhǎng)參數(shù)params[],但是在js中,如何實(shí)現(xiàn)這種可變參數(shù)呢?本片文章主要介紹利用arguments,實(shí)現(xiàn)可變長(zhǎng)參數(shù)。有需要的請(qǐng)參考下2016-11-11JavaScript?12個(gè)有用的數(shù)組技巧
數(shù)組是Javascript最常見的概念之一,它為我們提供了處理數(shù)據(jù)的許多可能性,熟悉數(shù)組的一些常用操作是很有必要的。本文將為大家介紹12個(gè)有用的JavaScript數(shù)組技巧,需要的朋友可以參考一下2021-12-12JavaScript學(xué)習(xí)筆記之取值函數(shù)getter與取值函數(shù)setter詳解
這篇文章主要介紹了JavaScript取值函數(shù)getter與取值函數(shù)setter,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08改進(jìn)UCHOME的記錄發(fā)布,增強(qiáng)可訪問性用戶體驗(yàn)
今天是看到UCDChina上的一篇文章文章 ,是關(guān)于SNS的用戶體驗(yàn)問題,發(fā)覺文中提到的第一個(gè)細(xì)節(jié),UCHOME就做的不好,于是改進(jìn)了一下。2011-01-01微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07