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

  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()
  }
})

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

相关推荐
迎風吹頭髮25 分钟前
Linux内核架构浅谈60-Linux块设备驱动:请求队列与BIO结构的交互流程
linux·运维·交互
江城开朗的豌豆38 分钟前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
江城开朗的豌豆44 分钟前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
说私域1 小时前
开源AI大模型AI智能名片S2B2C商城小程序在护肤品文案痛点表达中的应用与效果研究
人工智能·小程序
weixin_177297220691 小时前
盲盒一番赏小程序系统开发:重构潮玩消费的沉浸式革命
小程序·重构·盲盒
weixin_177297220691 小时前
短剧小程序系统开发:开启影视娱乐新纪元
小程序·短剧
小小王app小程序开发1 小时前
线下剧本杀预约小程序核心功能玩法解析:轻量化载体重构娱乐消费生态
小程序·重构·娱乐
说私域1 小时前
信息传递视角下开源AI智能名片链动2+1模式S2B2C商城小程序对零售企业的赋能研究
人工智能·小程序·零售
韩立学长1 小时前
【开题答辩实录分享】以《智能垃圾回收小程序》为例进行答辩实录分享
spring boot·小程序
菜鸟una3 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript