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

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

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

相关推荐
说私域4 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域7 小时前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔7 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
XM-545811 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳2 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui