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

小蓝 • 2024-12-12 13:05 • 编程

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

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

在小程序中，通过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