
- 新增地址流程 :
- 下单页 → 地址列表页 (1次跳转)
- 地址列表页 → 新增地址页 (1次跳转)
- 保存地址 → 返回地址列表页 (1次返回,自动刷新列表)
- 选择地址流程 :
- 地址列表页 → 选中地址 → 返回下单页 (1次返回)
- 更换地址 :
- 下单页 → 地址列表页 (1次跳转)
- 选中新地址 → 返回下单页 (1次返回)
这样就完全避免了需要两次返回才能回到下单页的情况,每次操作都是单次跳转或单次返回,符合用户直觉且不会产生冗余页面栈。然而使用wx.navigateBack
本身不支持直接传递参数,但可以通过以下方法实现参数传递:
使用事件通道
- 最符合小程序设计理念
- 安全且不会污染全局命名空间
- 支持复杂对象传递
下单页(order.js)
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)
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)
js
Page({
onSubmit() {
// 保存地址逻辑...
// 获取事件通道
const eventChannel = this.getOpenerEventChannel()
// 通知地址列表页刷新
if (eventChannel) {
eventChannel.emit('addressAdded')
}
// 返回地址列表页
wx.navigateBack()
}
})
使用事件通道是最推荐的方式,它不仅支持参数传递,还能保持页面间的解耦,是微信小程序页面间通信的最佳实践。