一、小程序全局變量生命周期
小程序全局變量,在小程序運行期間始終存活,只有在小程序關閉或出現異常情況時才會消失。
在小程序中,通過getApp()方法獲取到一個唯一的全局對象,該全局對象就是小程序的全局變量,其作用域是整個小程序,由小程序自動創建和維護。
注意:小程序中頁面的生命周期與小程序全局變量沒有關係。
二、小程序全局變量繼承
小程序全局變量支持繼承,所以我們可以通過訪問getApp().全局變量名得到小程序全局變量中需要使用的數據。
// App.js App({ globalData: { userInfo: null, apiBaseUrl: 'https://api.domain.com', } }) // Page.js Page({ onLoad() { console.log(getApp().globalData.apiBaseUrl); // https://api.domain.com } })
三、小程序全局變量取值範圍
小程序全局變量中的值可以是任何類型,比如字符串、數字、對象等。不過需要注意的是,如果數據過大,可能會影響小程序的性能。因此,在使用全局變量時,需要控制數據的大小。
四、小程序全局變量清空
如果需要清空全局變量中的數據,可以通過重新賦值的方式來實現。
// App.js App({ globalData: { userInfo: null, apiBaseUrl: 'https://api.domain.com', }, clearGlobalData() { this.globalData.userInfo = null; } }) // Page.js Page({ onClickClear() { getApp().clearGlobalData(); } })
五、小程序全局變量改變
在小程序中,改變全局變量的值只需要一個等號即可,不需要額外的操作。
// App.js App({ globalData: { count: 0, }, increaseCount() { this.globalData.count++; } }) // Page.js Page({ onClickIncrease() { getApp().increaseCount(); } })
六、小程序全局變量使用
在小程序中,可以通過getApp()方法獲取到小程序全局變量,並且可以在小程序的任何地方使用。
// App.js App({ globalData: { token: null, }, checkToken() { if (!this.globalData.token) { console.log('用戶未登錄!'); } } }) // Page.js Page({ onLoad() { getApp().checkToken(); } })
七、小程序全局變量存放
小程序全局變量存放在小程序的標籤下,因此,如果需要使用小程序全局變量,則需要在標籤下聲明該全局變量。
// App.js App({ globalData: { userInfo: null, apiBaseUrl: 'https://api.domain.com', } }) // app.json { "global": { "apiBaseUrl": "https://api.test.domain.com" } } // Page.js Page({ onLoad() { console.log(getApp().globalData.apiBaseUrl); // https://api.test.domain.com } })
八、小程序全局變量賦值
在小程序中,可以直接給全局變量賦值,比如:
// App.js App({ globalData: { userInfo: {}, }, setUserInfo(userInfo) { this.globalData.userInfo = userInfo; } }) // Page.js Page({ onLoad() { let userInfo = {...}; getApp().setUserInfo(userInfo); } })
九、小程序全局變量的使用
小程序全局變量的使用非常靈活,可以用於全局狀態管理、數據緩存等多種場景。比如,在實現小程序的登錄功能時,可以將用戶的token存儲在全局變量中,方便在小程序的其他頁面中使用。
十、小程序全局變量監聽數值
小程序中,可以通過使用小程序API中的watch
方法來監聽小程序全局變量的數值的變化。
// App.js App({ globalData: { count: 0, }, watch: function(key, callback) { var obj = this.globalData; var val = obj[key]; Object.defineProperty(obj, key, { configurable: true, enumerable: true, set: function(value) { val = value; callback(value); }, get: function() { return val; } }) } }) // Page.js Page({ onLoad() { getApp().watch('count', function(value) { console.log(value); // 監聽count的值的變化 }); } })
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/245087.html