一、小程序全局变量生命周期
小程序全局变量,在小程序运行期间始终存活,只有在小程序关闭或出现异常情况时才会消失。
在小程序中,通过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/n/245087.html
微信扫一扫
支付宝扫一扫