微信小程序全局狀態的深入講解
前言
在微信小程序中,可以利用 App.js 的 globalData 作為中間橋梁,在 Page, Component 之間,包括頁面與頁面,頁面與組件,組件與組件之間傳遞需要傳遞的信息。但是,我們不能及時的知道 globalData 下的變化,在新建小程序的官方的默認事例中,獲取 UserInfo 這一網絡操作有延遲的,為此寫瞭很多不必要的代碼。就連官方案例都存在這一情況,相信在開發中你也會遇到類似的情況。在本文中將介紹如何解決這一類問題。
需求分析
相信以下情況是我們在沒有全局狀態管理下常有的操作:
- 在 Page,Component 的 OnLoad,Attached 兩個生命周期鉤子函數中,進行一些從 App 的 globalData 賦值一些已經存在的屬性到頁面或組件中的 data 中。
- 在最開始就存在一些異步的網絡請求,獲取的數據用於全局,剛開始可能這個 globalData 還沒有相關屬性,直到請求成功,才把相關屬性添加到 globalData,而這時 Page 的從 globalData 的賦值操作可能已經完成瞭,隻不過是 undefined,為此需要進一步的判斷再進行賦值到 Page,Component 中。如果隻是一兩個這個還說很簡單的,但是多個頁面,或者多個變量都需要賦值的話,我想你會拒絕並尋找偷懶的辦法。
- 一些在頁面和組件從 globalData 賦值的變量不僅是用於判斷、展示,我們可能還需要依據用戶交互而改變變量的值,那麼在其他頁面,其他組件中同樣的變量也需要統一改變。
以上情況我們可提出以下幾點需求:
- 在頁面,組件初始加載時,盡早的從 globalData 獲取並賦值到頁面,組件所需要的一些屬性
- 及時的獲取一些 globalData 某一屬性的變化,並進行一些後續相關操作
- 在改變 Page,Component 的值的同時,其他頁面,組件也進行一樣的改變
下面是需求的原始代碼
// app.js App({ globalData: { userInfo: null }, onLaunch(){ wx.getSetting({ success: res => { if(res.authSetting['scope.userInfo']){ wx.getUserInfo({ success: res => { this.globalData.userInfo = res.userInfo // 需求2 if (this.userInfoReadyCallback) { // 存在此回調函數,意味著 page 執行瞭 onLoad // 且沒有獲取到 userInfo 並賦值到 page 的 data 中 // 執行此回調函數,賦值到相應的頁面中 this.userInfoReadyCallback(res) } } }) } } }) } })
// Pages/index/index.js const app = getApp() Page({ // ... onLoad(options){ // 需求1 const userInfo = app.globalData.userInfo userInfo && this.setData({useInfo}) // 需求2 // 如果沒有獲取到 app.globalData.userInfo // 意味還未執行 wx.getUserInfo 的回調函數 // 給 app 添加響應的一個回調函數,綁定此時的 this 到回調函數 userInfo || app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo }) delete app.userInfoReadyCallback } } })
這是官方小程序案例的代碼,我隻做瞭一點修改,這裡隻是展示瞭需求 2 ,globalData 屬性從無到有時執行頁面設置的回調函數,並沒有實現每一次都會執行回調函數,需求 3 的代碼比較復雜,不在此展示。
我們可以思考,以上幾點需求需要實現的,一定要有的代碼有哪些。可以發現,需求 1 和需求 3 主要就是頁面,組件初始化,和 globalData 屬性被改變時都需要使用 this.setData 方法,隻不過每次 this 的指向的實例不同。而需求 2 則是應該存在一個回調函數,且回調函數的 this 也應該指向相應的實例,在 globalData 屬性被改變時執行這些回調函數。
從時間點來看,我們有兩個,一個是頁面,組件初始化,一個是 globalData 屬性改變時,那麼第一個時間點,我們可以考慮到小程序的生命周期的鉤子函數,onLoad 和 attached,在這兩個時間點執行 this.setData 的操作。而 globalData 屬性的改變都是我們主動或者用戶事件而產生的,就是可以看作這一操作是一個對 globalData 某個屬性的事件,而這個事件發生後再去執行一些寫好的回調函數。
從操作對象來看,基本都是頁面和組件的實例 this,以及 app.globalData。
需求理論性總結
綜上,我們可以在初始化時,進行自動的 this.setData(不用自己手動),和保存 this(用於事件執行時指向相應的實例),存儲相應的回調函數為事件(事件就是未執行的函數),在需要時主動觸發這個事件即可。那麼可以看到,整個流程下來,我們需要一個橫跨 app,page,component 之間的一個變量,用於劫持初始化的鉤子函數,進行自動化賦值,存儲相應的事件,暴露一個事件觸發的接口。
紙上得來終覺淺,絕知此事要躬行
看到這裡,相信你已經有一定的瞭解全局狀態管理,那麼到底如何實現呢?在這裡,我要強調,如果你閱讀此文後對此有一定的瞭解瞭,我說的思路,那麼你一定要自己嘗試實現出代碼,不管是否好壞,總是比沒有實現的好,在自己實現中也許有更多的收獲。下面以上上面案例展示一下簡單的實現代碼,給沒看太明白的一個思路。在下次我會寫一遍相關代碼實現的講解,應該會有。
// app.js class Store { constructor(app){ this['event'] = {} this.app = app } autoSet(globalData, instance){ const instanceData = {} for (let prop of globalData){ instanceData[prop] = this.app.globalData[prop] const callBack = (newValue) => { instance.setData({[prop]: newValue}) instance.watch[prop] && instance.watch[prop].call(instance, newValue) } this.addEvent(prop, callBack) instance.setData(instanceData) callBack(instanceData[prop]) delete instance.watch delete instance.globalData } } addEvent(eventName, callBack){ this.event[eventName] = this.event[eventName] || [] this.event[eventName].push(callBack) } dispatch(eventName, newValue){ this.app.globalData[eventName] = newValue this.event[eventName] && this.event[eventName].forEach(item => item(newValue)) } } App({ globalData: { userInfo: null }, onLaunch(){ // new 一個實例並保存到小程序 app 中,用於全局調用 this.store = new Store(this) wx.getSetting({ success: res => { if(res.authSetting['scope.userInfo']){ wx.getUserInfo({ success: res => { // 獲取到 userInfo 後,觸發事件 this.store.dispatch('userInfo', res.userInfo) } }) } } }) } })
// Pages/index/index.js const app = getApp() Page({ // ... data: { userName: null }, // globalData 數組用於自動賦值 globalData: ['userInfo'], // 監聽相應的 globalData 屬性,設置回調函數 watch: { userInfo(userInfo){ console.log('userInfo 更新啦', this) this.setData({userName: userInfo.nickName}) } }, onLoad(options){ // 傳入此 globalData,和實例,設置該實例需要的 data,創建事件 app.store.autoSet(this.globalData, this) // 其他你想做的... } })
上面的代碼並沒有劫持鉤子函數,隻是額外在函數開始時執行瞭綁定函數,而且也沒有頁面銷毀時,釋放內存的操作。還是有許多可優化的地方,這些都留到下一次講解。
總結
到此這篇關於微信小程序全局狀態的文章就介紹到這瞭,更多相關小程序全局狀態內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 微信小程序開發實用技巧之數據傳遞和存儲
- 微信小程序中的數據存儲實現方式
- 微信小程序怎麼加入JavaScript腳本,做出動態效果
- 微信小程序頁面返回傳值的4種解決方案匯總
- 使用微信小程序API,調用微信的各種內置能力。