您的位置:

小程序全局变量的详细阐述

一、小程序全局变量生命周期

小程序全局变量,在小程序运行期间始终存活,只有在小程序关闭或出现异常情况时才会消失。

在小程序中,通过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的值的变化
    });
  }
})