微信小程序中如何进行页面传参？

推荐答案

在微信小程序中，页面传参可以通过以下几种方式实现：

1. URL 传参：在跳转页面时，通过 wx.navigateTo 或 wx.redirectTo 等方法，将参数拼接在 URL 后面，目标页面通过 onLoad 方法的 options 参数获取。

   // www.javascriptcn.com code example
   // 页面 A 跳转并传参
   wx.navigateTo({
     url: '/pages/pageB/pageB?param1=value1&param2=value2'
   });
   
   // 页面 B 获取参数
   Page({
     onLoad: function(options) {
       console.log(options.param1); // 输出: value1
       console.log(options.param2); // 输出: value2
     }
   });

2. 全局变量传参：通过 getApp() 方法获取全局对象，将参数存储在全局对象中，目标页面再从全局对象中获取。

   // www.javascriptcn.com code example
   // app.js
   App({
     globalData: {
       param1: null,
       param2: null
     }
   });
   
   // 页面 A 设置全局变量
   const app = getApp();
   app.globalData.param1 = 'value1';
   app.globalData.param2 = 'value2';
   
   // 页面 B 获取全局变量
   const app = getApp();
   Page({
     onLoad: function() {
       console.log(app.globalData.param1); // 输出: value1
       console.log(app.globalData.param2); // 输出: value2
     }
   });

3. 事件总线传参：通过自定义事件或使用第三方库（如 eventBus）来实现页面间的通信。

   // www.javascriptcn.com code example
   // 页面 A 触发事件
   const eventBus = require('eventBus');
   eventBus.emit('customEvent', { param1: 'value1', param2: 'value2' });
   
   // 页面 B 监听事件
   const eventBus = require('eventBus');
   Page({
     onLoad: function() {
       eventBus.on('customEvent', function(data) {
         console.log(data.param1); // 输出: value1
         console.log(data.param2); // 输出: value2
       });
     }
   });

本题详细解读

URL 传参

URL 传参是最常用的页面传参方式，适用于简单的参数传递。通过 wx.navigateTo 或 wx.redirectTo 等方法跳转页面时，将参数拼接在 URL 后面，目标页面通过 onLoad 方法的 options 参数获取。这种方式简单直接，但传递的参数只能是字符串类型，且 URL 长度有限制。

全局变量传参

全局变量传参适用于需要在多个页面间共享数据的场景。通过 getApp() 方法获取全局对象，将参数存储在全局对象中，目标页面再从全局对象中获取。这种方式可以传递复杂的数据类型，但需要注意全局变量的生命周期，避免内存泄漏。

事件总线传参

事件总线传参适用于需要解耦的页面间通信场景。通过自定义事件或使用第三方库（如 eventBus）来实现页面间的通信。这种方式可以实现页面间的松耦合通信，但需要额外引入事件管理机制，增加了代码复杂度。

根据具体场景选择合适的传参方式，可以提高代码的可维护性和性能。