小程序页面间传参的六种方式总结
在日常中，小程序页面间传参是一个常见的需求。不同的业务场景下，传参的方式也不尽相同。根据官方文档和实际工作经验，我总结出了六种常用的传参方式，下面一一为大家讲解。
1. 全局变量传参
全局变量是小程序中一个固定的属性，存储的数据可以在整个项目的任意地方使用。这种方式适合存储一些全局共享的数据。
代码示例：
```javascript
// 设置全局变量
App({
globalData: {
userInfo: null
}
})
// 获取全局变量
const app = getApp()
console.log(app.globalData.userInfo)
```
2. 缓存传参
微信为每个小程序提供了缓存功能，单个参数最大支持1MB，数据总和最大支持10MB。缓存适合存储一些需要持久化的数据。
代码示例：
```javascript
// 设置缓存
wx.setStorageSync('key', 'value')
// 获取缓存
const value = wx.getStorageSync('key')
console.log(value)
```
3. URL传参
URL传参是最常见的传参方式，直接在URL中携带参数。不过，URL的长度是有限的，且不支持特殊字符，可以通过编码、解码的方式解决。
代码示例：
```javascript
// 编码传参
const encodedParam = encodeURIComponent('特殊字符')
wx.navigateTo({
url: `/pages/index/index?param=${encodedParam}`
})
// 解码接收
const decodedParam = decodeURIComponent(options.param)
console.log(decodedParam)
```
3.1 页面跳转传参
页面跳转时，可以通过URL传参的方式将参数传递给目标页面。
代码示例：
```javascript
wx.navigateTo({
url: '/pages/detail/detail?id=123'
})
```
3.2 组件跳转传参
在父组件中使用子组件时，可以通过属性传递参数。
代码示例：
```javascript
// 父组件
// 子组件
Component({
properties: {
propName: String
}
})
```
4. 父子组件传参
父子组件传参在传输一些组件数据时非常方便，只需要我们分辨清楚传递与获取的方式。
代码示例：
```javascript
// 父组件
Page({
data: {
parentData: '父组件数据'
}
})
// 子组件
Component({
properties: {
childData: String
}
})
```
5. 通信通道传参
通信通道是`wx.navigateTo`独有的传参方式，页面可以互相传参，但该通道仅存在于`wx.navigateTo`的接口调用时才有效。
代码示例：
```javascript
wx.navigateTo({
url: '/pages/detail/detail',
success: function(res) {
res.eventChannel.emit('eventName', { data: '传递的数据' })
}
})
```
6. 页面栈传参
页面栈是一个非常强大的功能，它本质上不是向页面传参，而是直接修改页面参数和方法。通过页面栈，我们可以拿到该页面的对象，然后对该页面的各项数据和函数进行操作。
代码示例：
```javascript
const pages = getCurrentPages()
const prevPage = pages[pages.length - 2]
prevPage.setData({
data: '修改的数据'
})
```
总结
不同的传参方式适用于不同的场景。全局变量和缓存适合存储全局共享的数据，URL传参适合简单的页面跳转，父子组件传参适合组件间的数据传递，通信通道和页面栈传参则适合更复杂的场景。在实际中，我们可以根据具体需求选择合适的传参方式。
希望这篇文章能帮助大家更好地理解小程序页面间传参的多种方式，提升效率！
