在微信小程序中,实现多个页面共享数据有以下几种常用方式,根据场景选择最适合的方案:
- 全局变量(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 加密存储