一、小程序全局变量生命周期
小程序全局变量,在小程序运行期间始终存活,只有在小程序关闭或出现异常情况时才会消失。
在小程序中,通过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的值的变化 }); } })