微信小程序下单页—地址列表页—新增地址页 页面交互

  1. 新增地址流程
    • 下单页 → 地址列表页 (1次跳转)
    • 地址列表页 → 新增地址页 (1次跳转)
    • 保存地址 → 返回地址列表页 (1次返回,自动刷新列表)
  2. 选择地址流程
    • 地址列表页 → 选中地址 → 返回下单页 (1次返回)
  3. 更换地址
    • 下单页 → 地址列表页 (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()
  }
})

使用事件通道是最推荐的方式,它不仅支持参数传递,还能保持页面间的解耦,是微信小程序页面间通信的最佳实践。

相关推荐
汤姆yu3 小时前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序
说私域10 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域13 小时前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔13 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun17 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-545817 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
AxureMost2 天前
Axure常用交互功能案例-免费
交互·axure·photoshop
HERR_QQ2 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源