微信小程序全局数据共享

一、前言

在微信小程序开发中，随着项目规模的扩大，多个页面之间需要共享一些公共数据，例如：

• 用户登录状态
• 用户信息
• 购物车数据
• 配置信息
• 主题设置等

如何高效地实现 跨页面的数据共享与管理，是提升小程序可维护性、降低耦合度的关键。

本文将带你全面掌握 微信小程序中实现全局数据共享的多种方式，包括：

✅ 使用 app.js 全局变量
✅ 使用 globalData 实现基础共享
✅ 使用自定义模块封装全局状态管理
✅ 使用本地缓存 wx.setStorageSync()
✅ 使用第三方状态管理方案（如 Redux 小程序适配）
✅ 实战案例：用户登录状态共享

并通过完整的代码示例帮助你快速上手并灵活应用。

二、什么是全局数据共享？

全局数据共享 是指在整个小程序生命周期内，多个页面和组件可以访问和修改一组共享的数据。它不同于单个页面的 data 数据，而是面向整个小程序的“全局变量”。

✅ 常见应用场景：

三、使用 globalData 实现全局数据共享

这是最基础也是最常用的全局数据共享方式。

✅ 步骤1：在 app.js 中定义 globalData

// app.js
App({
  globalData: {
    userInfo: null,
    token: '',
    theme: 'light'
  }
});

✅ 步骤2：在页面中读取或修改 globalData

// pages/index/index.js
const app = getApp();

Page({
  onLoad() {
    // 读取全局数据
    console.log('当前主题：', app.globalData.theme);

    // 修改全局数据
    app.globalData.userInfo = { name: 'Qwen', avatar: 'https://example.com/avatar.jpg' };
  }
});

✅ 注意事项：

• getApp() 获取的是小程序实例，必须在页面加载后调用。
• 不建议频繁修改 globalData，应结合本地存储或状态管理优化性能。

四、封装全局状态管理模块（推荐）

为了提高可维护性和解耦，我们可以封装一个全局状态管理模块。

✅ 步骤1：创建 utils/globalState.js

// utils/globalState.js
const app = getApp();

const GlobalState = {
  setUserInfo(userInfo) {
    app.globalData.userInfo = userInfo;
    wx.setStorageSync('userInfo', userInfo);
  },

  getUserInfo() {
    return app.globalData.userInfo || wx.getStorageSync('userInfo');
  },

  setToken(token) {
    app.globalData.token = token;
    wx.setStorageSync('token', token);
  },

  getToken() {
    return app.globalData.token || wx.getStorageSync('token');
  }
};

module.exports = GlobalState;

✅ 步骤2：在页面中使用

// pages/userCenter/userCenter.js
const GlobalState = require('../../utils/globalState');

Page({
  onLoad() {
    const userInfo = GlobalState.getUserInfo();
    if (userInfo) {
      console.log('用户信息：', userInfo);
    } else {
      wx.navigateTo({ url: '/pages/login/login' });
    }
  }
});

五、使用本地缓存进行持久化共享

如果希望数据在小程序关闭后依然保留，可以使用本地缓存。

✅ 示例：保存和读取登录状态

// 登录成功时
wx.setStorageSync('isLoggedIn', true);
wx.setStorageSync('token', 'abc123xyz');

// 页面检查是否登录
const isLoggedIn = wx.getStorageSync('isLoggedIn');
if (!isLoggedIn) {
  wx.showToast({ title: '请先登录' });
}

六、使用第三方状态管理库（进阶）

如果你的小程序项目较为复杂，建议引入类似 Redux 的状态管理模式。

✅ 推荐库：

• Miniprogram-simplied-redux
• Taro + Redux（适用于多端开发）

✅ 简单使用流程（以简化版为例）：

npm install miniprogram-simplied-redux

// store.js
import { createStore } from 'miniprogram-simplied-redux';

const initialState = {
  cartCount: 0
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TO_CART':
      return { ...state, cartCount: state.cartCount + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);
export default store;

// 页面中使用
import store from '../../store';

Page({
  addToCart() {
    store.dispatch({ type: 'ADD_TO_CART' });
    console.log('当前购物车数量：', store.getState().cartCount);
  }
});

七、实战案例：用户登录状态共享

✅ 功能描述：

• 登录页设置全局状态
• 首页判断是否登录
• 用户中心页显示用户信息

✅ 登录页逻辑（login.js）

const GlobalState = require('../../utils/globalState');

Page({
  data: {
    username: '',
    password: ''
  },
  onInputUsername(e) {
    this.setData({ username: e.detail.value });
  },
  onInputPassword(e) {
    this.setData({ password: e.detail.value });
  },
  onSubmit() {
    // 模拟登录成功
    const userInfo = { name: this.data.username, avatar: 'https://example.com/avatar.jpg' };
    GlobalState.setUserInfo(userInfo);
    GlobalState.setToken('mock-token-123');

    wx.navigateBack(); // 返回上一页
  }
});

✅ 首页逻辑（index.js）

const GlobalState = require('../../utils/globalState');

Page({
  onLoad() {
    const userInfo = GlobalState.getUserInfo();
    if (!userInfo) {
      wx.navigateTo({ url: '/pages/login/login' });
    } else {
      console.log('欢迎回来：', userInfo.name);
    }
  }
});

✅ 用户中心页（userCenter.js）

const GlobalState = require('../../utils/globalState');

Page({
  data: {
    userInfo: {}
  },
  onLoad() {
    const userInfo = GlobalState.getUserInfo();
    this.setData({ userInfo });
  }
});

八、常见问题与解决方案

九、总结对比表：全局数据共享方式一览

十、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！