在实际开发中，经常会有页面间跳转时需要传递参数的场景，本文回顾一下微信小程序中常用的页面传参方式
演示前的准备
1. 为了方便演示，先创建两个页面，/pages/from/index 和 /pages/to/index，我们使用简便的创建方式，直接
在 app.json 中为 pages 数组添加两个页面的路径，然后保存，让微信开发者工具自动帮我们创建，重点代码 2 - 5 行：
{
"pages": [
"pages/a/index",
"pages/b/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
创建后的结构如下：
1. URL 传参
URL 传参的方式，非常简单常用，当参数不是特别多的时候建议使用：
- 声明 URL 参数，顾名思义，就是将参数写在 URL 中，如
/index?param1=value1¶m2=value2 - 在页面生命周期函数
onLoad(options)中通过函数参数options获取 URL 中的参数，如options.param1
示例：URL 传参：
1. Form 页面部分
(1) 在页面布局文件中添加链接标签 <navigator>，并在 url 属性中指定跳转地址，以及拼接待传递的参数：
<navigator url="/pages/to/index?param=B">点击跳转到 To 画面</navigator>
2. To 页面部分
(1) 在页面逻辑文件的在生命周期函数 onLoad(options) 中通过函数参数 options 获取 URL 中的参数：
Page({
data: {
param: ''
},
onLoad(options) {
this.setData({
param: options.param
})
}
})
(2) 页面布局文件中，展示获取的 URL 参数：
<view wx:if="{{param}}">From 画面传递的参数是：{{param}}</view>
3. 运行效果：
2. 向前一画面传参
这种传参的场景是，Form 页面跳转到 To 页面后，又从 To 页面跳回到 Form 页面，这时向 From 页面传参
向前一画面传参的核心点是，在 To 页面中使用 getCurrentPages() 获取 页面跳转记录栈 中的页面组件数组，然后通
过修改前一页面组件的值来实现传参的效果，注意，这种向前一画面传参的方式，要求使用页面组件压栈而非页面组
件卸载的跳转方式
示例：向前一画面传参：
1. Form 页面部分
(1) 在页面逻辑文件中定义接收参数的变量
Page({
data: {
param: ''
}
})
(2) 在页面布局文件中，创建跳转到 To 页面的链接，并在下面展示从 To 页面返回时的参数
<navigator url="/pages/to/index">点击跳转到 To 画面</navigator>
<view wx:if="{{param}}">To 画面传递的参数是：{{param}}</view>
2. To 页面部分
(1) 在页面逻辑文件中定义按钮点击事件的处理函数，在函数中使用 getCurrentPages() 获取 页面跳转记录栈 中前
一个页面的页面组件，并修改页面组件数据，最后通过 wx.navigateBack api 返回到前一画面
Page({
// 按钮点击事件处理函数
handleTap(){
// 从页面跳转栈中获取页面组件数组
const pages = getCurrentPages()
// 获取前一个画面的页面组件对象
const prePage = pages[pages.length - 2]
// 修改前一个画面的页面组件的属性值
prePage.setData({
param:'B'
})
// 弹栈返回到前一个画面
wx.navigateBack({
delta: 1,
})
}
})
(2) 在页面布局文件中添加一个按钮，并绑定点击事件和事件处理函数
<button bind:tap="handleTap">点击跳转到 Form 画面</button>
3. 运行效果：
3. 全局变量实现传参
这种方式很简单，直接利用了在 app.js 中定义的变量为全局变量的特性来实现，通过使用微信小程序的缓存功能
也可以实现全局变量传参的效果，原理一样
示例：全局变量实现传参
1. Form 页面部分
(1) 在页面逻辑文件中定义按钮点击事件的处理函数，触发后设置全局变量，最后跳转到目标页面，注意，不管是页
面逻辑文件、组件逻辑文件还是应用逻辑文件，修改自定义的属性都不需要使用 this.setData，直接修改即可：
Page({
handleTap() {
// 获取唯一的应用实例
const app = getApp()
console.log(app)
// 获取参数
app.param = 'A'
// 跳转
wx.navigateTo({
url: '/pages/to/index',
})
}
})
(2) 在页面布局文件中添加按钮，并绑定事件和事件处理函数：
<button bind:tap="handleTap">点击跳转到 To 画面</button>
2. To 页面部分
(1) 在页面逻辑文件中，定义生命周期函数，在函数内获取全局变量：
Page({
data: {
param: ''
},
onLoad() {
// 获取唯一的应用实例
const app = getApp()
// 获取参数
this.setData({
param: app.param
})
}
})
(2) 在页面布局文件中，展示参数：
<view wx:if="{{param}}">From 画面传递的参数是：{{param}}</view>
(3) 运行效果：
4. 发布事件
在使用微信小程序内置 api wx.navigateTo 进行跳转时，会有一个 success(res) 函数的回调，回调函数的参
数 res 中有一个 eventChannel 对象，该对象是页面间事件通信对象，可以利用该对象发布一个自定义事件，
并在目标页中对该事件进行监听
示例：发布事件
1. Form 页面部分
(1) 在页面逻辑文件中定义按钮点击事件的处理函数，在函数内使用 wx.navigateTo 进行页面跳转，并在 success 回
调函数内发布一个自定义事件
Page({
handleTap() {
// 跳转
wx.navigateTo({
// 目标路径
url: '/pages/to/index',
// 跳转后回调，利用页面间事件通信对象发布自定义事件
success(res){
res.eventChannel.emit('myEvent',{param:'A'})
}
})
}
})
(2) 在页面布局文件中添加按钮，并绑定事件和事件处理函数：
<button bind:tap="handleTap">点击跳转到 To 画面</button>
2. To 页面部分
(1) 在页面逻辑文件中，定义生命周期函数 onLoad，并在函数内监听 Form 页面发布的自定义函数：
Page({
data: {
param: ''
},
onLoad() {
// 获取页面间事件通信对象
const eventChannel = this.getOpenerEventChannel()
// 监听自定义事件
eventChannel.on('myEvent',(req)=>{
this.setData({
param: req.param
})
})
}
})
(2 在页面布局文件中，展示参数：
<view wx:if="{{param}}">From 画面传递的参数是：{{param}}</view>
3. 运行效果：
