微信小程序如何实现再多个页面共享数据

在微信小程序中,实现多个页面共享数据有以下几种常用方式,根据场景选择最适合的方案:

  1. 全局变量(App.js)
    适用场景:简单数据共享(非响应式)
    实现方式:

javascript

// app.js

App({

globalData: {

userInfo: null,

token: ""

}

})

// 任意页面获取/修改

const app = getApp();

app.globalData.token = "new_token"; // 写入数据

console.log(app.globalData.token); // 读取数据

缺点:数据变更不会自动触发页面更新。

  1. 本地缓存(Storage)
    适用场景:持久化数据(如用户登录状态)
    实现方式:

javascript

// 存数据

wx.setStorageSync('key', { name: 'Alice' });

// 取数据(任意页面)

const data = wx.getStorageSync('key');

注意:

同步方法 Sync 结尾,异步用 wx.setStorage

单个 key 最大 1MB,总上限 10MB

用户清除缓存时数据会丢失

  1. 事件总线(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 中处理)

  1. 状态管理库(如 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

优点:自动更新视图,适合中大型项目。

  1. 页面传参(URL参数)
    适用场景:简单数据传递到下一页
    实现方式:

javascript

// 页面A跳转

wx.navigateTo({

url: '/pages/pageB?data=' + JSON.stringify({ id: 1 })

})

// 页面B获取

Page({

onLoad(options) {

const data = JSON.parse(options.data);

}

})

限制:只适用于单向传递,数据量不宜过大。

  1. 数据库(云开发)
    适用场景:多端实时同步数据

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 加密存储

相关推荐
说私域20 分钟前
基于开源AI智能名片链动2+1模式与S2B2C商城小程序的微商品牌规范化运营研究
人工智能·小程序·开源
2501_9159090629 分钟前
iOS 加固工具实战解析,主流平台审核机制与工具应对策略
android·ios·小程序·https·uni-app·iphone·webview
The_era_achievs_hero29 分钟前
UniappDay04
vue.js·微信小程序·uni-app
2501_915106323 小时前
iOS WebView 调试实战,第三方脚本加载失败与内容安全策略冲突问题排查指南
android·ios·小程序·https·uni-app·iphone·webview
paopaokaka_luck7 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
老虎062713 小时前
JavaWeb(苍穹外卖)--学习笔记13(微信小程序开发,缓存菜品,Spring Cache)
笔记·学习·微信小程序
郭邯18 小时前
小程序中自定义组件的样式隔离
微信小程序
每天开心21 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
老华带你飞1 天前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽1 天前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x