要不是看AI写的代码，我竟还不知道微信小程序居然有这么优雅的页面间传参的方法
最近在给我的工作室的一个网球微信小程序（亮拍）增加一个记账的功能，方便网球场地方进行记账。我就想着使用腾讯的AI开发助手CodeBuddy开帮我初始化一些页面。有一说一，这个免费的AI开发助手还是挺强的，能按照我的需求，把多个页面开发设计出来了，并且UI还做得有点可以。尽管做出来的页面有些许问题，比如使用的uniap的组件时候不帮我修改主题色，页面有些逻辑没有帮我完成等等，不过已经帮我提升了非常高的效率了。按以往的速度，这四五个页面至少要花个三天左右的开发时间，而使用AI开发助手，则只需要一天都不到，就能把四五个页面都开发完，我只需要检查并修改问题即可。
回到正题，在AI开发助手帮我开发新增记账的页面时，这个页面我们设计的时候需要选择一个分组，用于控制这个账单的查看权限，然后会有一个分组的选择组件。但我看AI帮我生成的一个分组选择的页面，我就很好奇，两个页面间是怎么传递选择的分组的信息的？不看不知道，原来微信小程序早就提供了页面间传复杂参数的优雅方法。只不过文档写的很少，因此用的人非常少。
在介绍新方法之前，在页面中传值的方法是这样的：
- 首先通过query从页面A传到页面B
- 等页面B操作完成之后，在通过全局的getApp().globalData来传递回页面A
- 等到操作完成之后，还需要对全局变量进行清理，否则会带来内存泄漏风险以及全局变量污染问题。
这种方法涉及到全局的变量，非常地不优雅。
下面我们来介绍一种更加优雅的页面间传递参数的方法：
假设我们有一个表单填写页面A，表单填写页面有一个分组选择的表单项，点击会跳转到一个分组选择页面B。那么页面A的跳转逻辑应该这样写：
{
// ...
methods:{
// 显示分组选择
showGroupPicker() {
wx.navigateTo({
url: '/pages/views/B',
events: {
// 监听分组选择结果
onGroupSelected: (group) => {
this.form.groupId = group.id
this.selectedGroupName = group.name
},
},
success: (res) => {
res.eventChannel.emit('acceptDataFromOpenerPage', this.form.groupId)
},
})
},
}
// ...
}
而在分组选择页面B中，要先接收初始的值，在选中分组后还需要把值传回到上一个页面A：
{
// ...
onLoad(){
const eventChannel = this.getOpenerEventChannel()
// 监听acceptDataFromOpenerPage事件，获取初始值
eventChannel.on('acceptDataFromOpenerPage', (groupId ) => {
let selectedGroup = null
this.groups.forEach(group=>{
if(group.id == groupId){
selectedGroup = group
throw new Error('break')
}
})
this.selectedGroup = selectedGroup
})
},
methods:{
// 点击分组
handleGroupClick(group) {
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('onGroupSelected', group)
uni.navigateBack()
},
// ...
}
// ...
}
这里的主角就是EventChannel，wx.navigateTo的events和success参数，以及this.getOpenerEventChannel()三个接口。
我们可以看到，新方法并没有使用到额外的全局变量，减少了全局变量的清理工作，而且还能传递复杂的对象，不可谓不优雅。这个新方法非常值得大家去使用。
