- 新增地址流程:
- 下单页 → 地址列表页 (1次跳转)
- 地址列表页 → 新增地址页 (1次跳转)
- 保存地址 → 返回地址列表页 (1次返回,自动刷新列表)
- 选择地址流程:
- 地址列表页 → 选中地址 → 返回下单页 (1次返回)
- 更换地址:
- 下单页 → 地址列表页 (1次跳转)
- 选中新地址 → 返回下单页 (1次返回)
这样就完全避免了需要两次返回才能回到下单页的情况,每次操作都是单次跳转或单次返回,符合用户直觉且不会产生冗余页面栈。然而使用wx.navigateBack
本身不支持直接传递参数,但可以通过以下方法实现参数传递:
使用事件通道
- 最符合小程序设计理念
- 安全且不会污染全局命名空间
- 支持复杂对象传递
下单页(order.js)
Page({data: {selectedAddress: null},onSelectAddress() {wx.navigateTo({url: '/pages/address/list',events: {// 定义接收地址更新的回调updateAddress: (address) => {console.log('收到新地址:', address)this.setData({ selectedAddress: address })}},success: (res) => {// 保存事件通道引用this.eventChannel = res.eventChannel}})},// 提交订单onSubmit() {if (!this.data.selectedAddress) {wx.showToast({ title: '请选择地址', icon: 'none' })return}// 提交逻辑...}
})
地址列表页(address/list.js)
Page({onLoad() {// 获取事件通道const eventChannel = this.getOpenerEventChannel()this.eventChannel = eventChannel},onSelectAddress(e) {const address = e.currentTarget.dataset.address// 通过事件通道发送数据if (this.eventChannel) {this.eventChannel.emit('updateAddress', address)}// 返回下单页wx.navigateBack()},// 新增地址后返回列表页onAddAddress() {wx.navigateTo({url: '/pages/address/add',events: {// 监听新增地址完成事件addressAdded: () => {this.loadAddresses() // 刷新地址列表}}})}
})
新增地址页(address/add.js)
Page({onSubmit() {// 保存地址逻辑...// 获取事件通道const eventChannel = this.getOpenerEventChannel()// 通知地址列表页刷新if (eventChannel) {eventChannel.emit('addressAdded')}// 返回地址列表页wx.navigateBack()}
})
使用事件通道是最推荐的方式,它不仅支持参数传递,还能保持页面间的解耦,是微信小程序页面间通信的最佳实践。