微信小程序如何实现再多个页面共享数据
在微信小程序中，实现多个页面共享数据有以下几种常用方式，根据场景选择最适合的方案：
- 全局变量（App.js）
适用场景：简单数据共享（非响应式）
实现方式：
javascript
// app.js
App({
globalData: {
userInfo: null,
token: “”
}
})
// 任意页面获取/修改
const app = getApp();
app.globalData.token = “new_token”; // 写入数据
console.log(app.globalData.token); // 读取数据
缺点：数据变更不会自动触发页面更新。
- 本地缓存（Storage）
适用场景：持久化数据（如用户登录状态）
实现方式：
javascript
// 存数据
wx.setStorageSync(‘key’, { name: ‘Alice’ });
// 取数据（任意页面）
const data = wx.getStorageSync(‘key’);
注意：
同步方法 Sync 结尾，异步用 wx.setStorage
单个 key 最大 1MB，总上限 10MB
用户清除缓存时数据会丢失
- 事件总线（EventBus）
适用场景：跨页面实时通信
实现方式：
javascript
// app.js 中初始化事件中心
App({
eventBus: new Map(), // 简易版
on(event, callback) {
if (!this.eventBus.has(event)) this.eventBus.set(event, []);
this.eventBus.get(event).push(callback);
},
emit(event, data) {
if (this.eventBus.has(event)) {
this.eventBus.get(event).forEach(cb => cb(data));
}
}
})
// A页面发送事件
const app = getApp();
app.emit(‘dataUpdate’, { newData: 123 });
// B页面监听
app.on(‘dataUpdate’, data => {
console.log(‘收到数据:’, data);
this.setData({ received: data }) // 更新视图
});
优点：解耦页面间通信
缺点：需手动移除监听（可在 onUnload 中处理）
- 状态管理库（如 MobX）
适用场景：复杂应用响应式数据共享
步骤：
安装依赖：
bash
npm install mobx-miniprogram mobx-miniprogram-bindings
创建 Store：
javascript
// store.js
import { observable, action } from ‘mobx-miniprogram’;
export const store = observable({
count: 0,
increment: action(function() {
this.count++;
})
});
绑定到页面：
javascript
import { createStoreBindings } from ‘mobx-miniprogram-bindings’;
import { store } from ‘./store’;
Page({
onLoad() {
this.storeBindings = createStoreBindings(this, {
store,
fields: [‘count’], // 映射数据
actions: [‘increment’] // 映射方法
});
},
onUnload() {
this.storeBindings.destroy(); // 清理绑定
}
})
在页面中使用：
xml
{{count}}
+1
优点：自动更新视图，适合中大型项目。
- 页面传参（URL参数）
适用场景：简单数据传递到下一页
实现方式：
javascript
// 页面A跳转
wx.navigateTo({
url: ‘/pages/pageB?data=’ + JSON.stringify({ id: 1 })
})
// 页面B获取
Page({
onLoad(options) {
const data = JSON.parse(options.data);
}
})
限制：只适用于单向传递，数据量不宜过大。
- 数据库（云开发）
适用场景：多端实时同步数据
javascript
// 写入数据
const db = wx.cloud.database();
db.collection(‘data’).add({ data: { value: 100 } });
// 监听数据变化（所有页面）
const watcher = db.collection(‘data’).watch({
onChange: snapshot => console.log(‘新数据’, snapshot)
});
⭐ 方案推荐 ⭐
场景 推荐方案
简单全局数据（如用户信息） App.globalData
需要持久化的数据（如设置项） wx.setStorage
复杂应用状态管理 MobX 等状态库
页面间事件通知 EventBus
实时多端同步 云数据库
重要提示：
对于响应式数据更新，优先选择 MobX 或事件总线
避免滥用全局变量，大型项目用状态管理更易维护
敏感数据（如 token）不要存储在 globalData，用 Storage 加密存储