微信小程序如何監(jiān)聽全局變量
最近工作上遇到一個問題,有個全局變量 red_heart,因為它在很多地方用到,當它發(fā)生改變了,用到的地方也要改變。但是原生小程序并沒有像Vue這種相關(guān)的做法。所以我就想自己實現(xiàn)一個全局變量改變,用到這個變量的地方也重新渲染。
開始吧
首先全局變量里肯定要先有這個 red_heart
globalData: { red_heart:0, },
然后要在onLaunch方法里給全局變量加一個Proxy代理。
Proxy很好理解,懂得都懂。
this.globalData = new Proxy(this.globalData, { get(target, key){ return target[key]; }, set:(target, key, value)=>{ if(key === "red_heart"){ this.globalDep.RedHeartDep.notifuy() } return Reflect.set(target, key, value); } });
主要看set方法里面有一個this.globalDep.RedHeartDep.notifuy(),這個是啥。這是我在全局創(chuàng)建的一個Dep,簡稱依賴收集。
代碼
globalDep:{ RedHeartDep:{ subs:[], addSub(watch){ this.subs.push(watch) }, removeWatch(id){ this.subs = this.subs.filter((item)=>{ return item.id != id }) }, notifuy(){ setTimeout(()=>{ this.subs.forEach(w=>w.update()) },0) } } }
subs是一個數(shù)組,用來收集依賴,addSub和removeWatch,notifuy是用來告訴這個東西要去更新了。
那現(xiàn)在還有一個問題,就是這個依賴在哪里添加呢,當然是在用到的地方添加,就是組件創(chuàng)建的時候。
附上組件js全部代碼:
const app = getApp() Component({ properties: { }, data: { red_heart:0 }, lifetimes:{ attached(){ let watch = { id:this.__wxExparserNodeId__, update:()=>{ this.setData({ red_heart:app.globalData.red_heart }) } } app.globalDep.RedHeartDep.addSub(watch) app.globalData.red_heart = app.globalData.red_heart }, detached(){ app.globalDep.RedHeartDep.removeWatch(this.__wxExparserNodeId__) } }, methods: { handClick(){ app.globalData.red_heart++ console.log(app.globalData) } } })
在attached上添加依賴,在組件銷毀的時候也不要忘記把依賴刪除,這個id是小程序的一個編譯id,直接拿來用了。
害就這樣了就做好啦!
總結(jié)
到此這篇關(guān)于微信小程序如何監(jiān)聽全局變量的文章就介紹到這了,更多相關(guān)小程序監(jiān)聽全局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript獲取URL參數(shù)的四種方法總結(jié)
在前端開發(fā)過程中難免會遇到處理url參數(shù)的問題,這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript獲取URL參數(shù)的四種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01JS實現(xiàn)網(wǎng)頁背景顏色與select框中顏色同時變化的方法
這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁背景顏色與select框中顏色同時變化的方法,實例分析了javascript操作select及css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02

javascript實現(xiàn)文本框標簽驗證的實例代碼

前端用echarts繪制含有多個分層的波形圖關(guān)鍵代碼

bootstrap自定義樣式之bootstrap實現(xiàn)側(cè)邊導航欄功能