小程序页面路由传参方法

小程序页面路由传参是小程序开发中常见的需求，它允许在不同页面之间传递和接收数据。以下是几种常见的小程序页面路由传参方法：

1. URL参数传递

这是最直接和常用的传参方式。在跳转页面时，将需要传递的参数附加在URL后面，通过?和&分隔不同的参数。在目标页面的onLoad方法中，可以通过options参数获取这些传递过来的数据。

示例代码：

// 跳转页面并传递参数  
wx.navigateTo({  
  url: '/pages/detail/detail?id=123&name=test'  
});  
  
// 在目标页面的onLoad方法中接收参数  
onLoad(options) {  
  console.log(options.id); // 输出: 123  
  console.log(options.name); // 输出: test  
}

2. 全局变量传递

通过小程序的全局变量（通常定义在app.js的globalData对象中）来传递参数。在跳转前，将需要传递的数据存储在全局变量中，然后在目标页面中通过getApp()方法获取全局变量并读取数据。

示例代码：

// 在app.js中定义全局变量  
App({  
  globalData: {  
    key1: 'value1',  
    key2: 'value2'  
  }  
});  
  
// 在跳转前设置全局变量  
getApp().globalData.key1 = 'newValue1';  
  
// 跳转到目标页面  
wx.navigateTo({  
  url: '/pages/targetPage/targetPage'  
});  
  
// 在目标页面中获取全局变量  
const app = getApp();  
onLoad() {  
  console.log(app.globalData.key1); // 输出: newValue1  
}

3. 本地存储传递

使用小程序的本地存储API（如wx.setStorageSync和wx.getStorageSync）来传递参数。在跳转前，将需要传递的数据存储在本地存储中，然后在目标页面中读取这些数据。这种方式适用于需要跨页面、跨会话持久化存储的场景。

示例代码：

// 在跳转前存储数据到本地  
wx.setStorageSync('key1', 'value1');  
  
// 跳转到目标页面  
wx.navigateTo({  
  url: '/pages/targetPage/targetPage'  
});  
  
// 在目标页面中读取本地存储的数据  
onLoad() {  
  const value1 = wx.getStorageSync('key1');  
  console.log(value1); // 输出: value1  
}

4. 通信通道（EventChannel）传递

EventChannel是wx.navigateTo接口独有的，它允许两个页面之间建立一个通信渠道，实现数据的双向传递。在跳转前，可以在当前页面通过eventChannel.emit发送数据，在目标页面通过eventChannel.on接收数据。

示例代码（略去详细实现，因为涉及较多代码和逻辑，且非所有情况都适用）：

• 在当前页面通过eventChannel.emit发送数据。
• 在目标页面通过eventChannel.on接收数据。

5. 页面栈操作

虽然页面栈本身不直接用于传参，但你可以通过操作页面栈（如wx.navigateBack）来返回数据给上一个页面。然而，这通常不是直接传参的方式，而是结合其他机制（如全局变量、本地存储等）来实现数据的反向传递。

总结

小程序页面路由传参有多种方式，每种方式都有其适用场景。在实际开发中，应根据具体需求和场景选择合适的传参方式。URL参数传递是最简单直接的方式，适用于简单的数据传递；全局变量和本地存储适用于需要跨页面、跨会话持久化存储的场景；通信通道（EventChannel）适用于需要实现页面间双向通信的场景；而页面栈操作则更多地用于页面导航和返回逻辑的处理。