- 新增地址流程:
- 下單頁 → 地址列表頁 (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()}
})
使用事件通道是最推薦的方式,它不僅支持參數傳遞,還能保持頁面間的解耦,是微信小程序頁面間通信的最佳實踐。