在微信小程序开发中，页面间传值是实现数据流转和交互的基础。根据不同的场景和数据类型，主要有以下几种传值方法： ### **一、URL 参数传值（最常用）** #### **1. 原理** 通过在页面路径的 URL 中添加查询参数（如 `?key=value`），在目标页面的 `onLoad` 生命周期中获取参数。 #### **2. 示例** **发送页面**： ```javascript // 跳转时携带参数 wx.navigateTo({ url: '/pages/detail/detail?id=123&name=doubao' }); ``` **接收页面（detail.js）**： ```javascript Page({ onLoad(options) { console.log(options.id); // 输出: 123 console.log(options.name); // 输出: doubao } }); ``` #### **3. 限制** - **数据类型**：仅支持字符串（需手动序列化/反序列化复杂数据）。 - **长度限制**：URL 长度有限，大数据可能截断（建议不超过 1KB）。 - **安全性**：敏感数据会暴露在 URL 中，不适合传递隐私信息。 ### **二、全局变量（App 实例）** #### **1. 原理** 将数据存储在 `App()` 实例的全局变量中，所有页面均可访问。 #### **2. 示例** **定义全局变量（app.js）**： ```javascript App({ globalData: { userInfo: null, sharedData: {} } }); ``` **发送页面**： ```javascript const app = getApp(); app.globalData.sharedData = { id: 123, name: 'doubao' }; wx.navigateTo({ url: '/pages/detail/detail' }); ``` **接收页面**： ```javascript const app = getApp(); Page({ onLoad() { console.log(app.globalData.sharedData); // 输出: { id: 123, name: 'doubao' } } }); ``` #### **3. 注意事项** - **数据持久化**：小程序切后台/重启可能导致数据丢失。 - **全局污染**：多人协作时易冲突，需谨慎使用。 - **生命周期管理**：需手动清理不再使用的数据，避免内存泄漏。 ### **三、本地存储（Storage）** #### **1. 原理** 使用 `wx.setStorage` 和 `wx.getStorage` 将数据存储在本地，适合跨页面、跨会话的数据传递。 #### **2. 示例** **发送页面**： ```javascript wx.setStorage({ key: 'detailData', data: { id: 123, content: '详细内容' } }); wx.navigateTo({ url: '/pages/detail/detail' }); ``` **接收页面**： ```javascript Page({ async onLoad() { try { const res = await wx.getStorage({ key: 'detailData' }); console.log(res.data); // 输出: { id: 123, content: '详细内容' } } catch (e) { console.error('获取数据失败', e); } } }); ``` #### **3. 特点** - **异步操作**：推荐使用 Promise 封装（如示例中的 `async/await`）。 - **容量限制**：微信小程序限制为 **10MB**，需控制数据大小。 - **持久化**：数据会长期存储，需手动调用 `wx.removeStorage` 清理。 ### **四、事件总线（Event Bus）** #### **1. 原理** 通过自定义事件中心实现页面间通信，适合非父子页面的数据传递。 #### **2. 实现步骤** **创建事件总线（event-bus.js）**： ```javascript // 单例模式创建事件中心 class EventBus { constructor() { this.events = {}; } // 注册事件 on(eventName, callback) { if (!this.events[eventName]) this.events[eventName] = []; this.events[eventName].push(callback); } // 触发事件 emit(eventName, data) { if (this.events[eventName]) { this.events[eventName].forEach(callback => callback(data)); } } // 移除事件 off(eventName, callback) { if (this.events[eventName]) { this.events[eventName] = this.events[eventName].filter( cb => cb !== callback ); } } } export default new EventBus(); ``` **发送页面**： ```javascript import eventBus from '../../utils/event-bus'; // 触发事件并传递数据 eventBus.emit('dataUpdate', { message: '数据已更新' }); ``` **接收页面**： ```javascript import eventBus from '../../utils/event-bus'; Page({ onLoad() { // 注册事件监听 this.eventCallback = (data) => { console.log('收到数据:', data); // 输出: { message: '数据已更新' } }; eventBus.on('dataUpdate', this.eventCallback); }, onUnload() { // 页面销毁时移除监听，避免内存泄漏 eventBus.off('dataUpdate', this.eventCallback); } }); ``` #### **3. 优势** - **松耦合**：页面间无需直接引用，通过事件解耦。 - **实时通信**：适合需要实时响应的场景（如消息推送）。 ### **五、页面栈操作（Page Stack）** #### **1. 获取上一页面实例** 当需要从目标页面返回数据给前一个页面时，可通过 `getCurrentPages()` 获取页面栈。 #### **2. 示例** **目标页面（B 页面）**： ```javascript // B 页面返回时传递数据给 A 页面 const pages = getCurrentPages(); const prevPage = pages[pages.length - 2]; // 获取上一个页面实例 // 调用 A 页面的方法并传数据 prevPage.setData({ selectedData: { id: 123, name: 'doubao' } }); // 返回上一页 wx.navigateBack(); ``` **前一页面（A 页面）**： ```javascript Page({ data: { selectedData: null }, // 在 A 页面的方法中接收数据 onLoad() { // 初始逻辑 }, onShow() { // 页面显示时可能已从 B 页面更新了 data console.log(this.data.selectedData); } }); ``` #### **3. 注意事项** - **页面栈索引**：`getCurrentPages()` 返回的数组中，最后一个元素是当前页面。 - **生命周期**：数据更新发生在 `navigateBack` 之后，需在 `onShow` 中处理。 ### **六、缓存API（如内存缓存）** #### **1. 原理** 自定义内存缓存工具，临时存储数据，适合轻量级数据传递。 #### **2. 示例** **创建缓存工具（cache.js）**： ```javascript const cache = {}; export default { set(key, value) { cache[key] = value; }, get(key) { return cache[key]; }, remove(key) { delete cache[key]; } }; ``` **发送页面**： ```javascript import cache from '../../utils/cache'; cache.set('tempData', { id: 123, type: 'article' }); wx.navigateTo({ url: '/pages/detail/detail' }); ``` **接收页面**： ```javascript import cache from '../../utils/cache'; Page({ onLoad() { const data = cache.get('tempData'); console.log(data); // 输出: { id: 123, type: 'article' } } }); ``` #### **3. 特点** - **内存存储**：小程序切后台/重启后数据丢失。 - **轻量级**：无需异步操作，性能优于 Storage。 ### **七、WebSocket 或 HTTP API** #### **1. 适用场景** 当数据需要持久化存储或跨设备共享时，可通过后端 API 实现。 #### **2. 示例流程** 1. **发送页面**：调用 API 将数据存储到服务器。 2. **接收页面**：调用相同 API 获取数据。 ```javascript // 发送页面 wx.request({ url: 'https://api.example.com/data', method: 'POST', data: { content: '需要传递的数据' }, success(res) { wx.navigateTo({ url: '/pages/receiver/receiver' }); } }); // 接收页面 wx.request({ url: 'https://api.example.com/data', method: 'GET', success(res) { console.log('获取的数据:', res.data); } }); ``` ### **八、总结与选择建议** | 方法 | 适用场景 | 数据类型 | 生命周期 | 复杂度 | |--------------------|-----------------------------------|----------------|----------------|--------| | **URL 参数** | 简单数据传递（如 ID、类型） | 字符串 | 单次跳转 | 低 | | **全局变量** | 频繁共享的数据（如用户信息） | 任意类型 | 小程序运行期间 | 中 | | **本地存储** | 持久化数据（如配置、历史记录） | 任意类型 | 长期 | 中 | | **事件总线** | 非父子页面实时通信 | 任意类型 | 按需管理 | 高 | | **页面栈操作** | 返回数据给前一个页面 | 任意类型 | 页面切换期间 | 中 | | **缓存工具** | 临时数据（如表单草稿） | 任意类型 | 内存有效 | 低 | | **API/WebSocket** | 跨页面、跨设备数据同步 | 任意类型 | 长期 | 高 | 根据数据大小、生命周期和复杂度选择合适的传值方式，避免过度设计。对于复杂场景，可组合多种方法实现高效数据流转。
