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

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

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

相关推荐
chilavert3181 小时前
技术演进中的开发沉思-219 Ajax:样式与事件
ajax·交互
ZeroNews内网穿透1 小时前
ZeroNews IP 访问控制能力
服务器·网络·网络协议·tcp/ip·安全·web安全·小程序
seeyoutlb2 小时前
微信小程序登录
微信小程序·小程序
TTGGGFF4 小时前
人工智能:用Gemini 3一键生成3D粒子电子手部映射应用
人工智能·3d·交互
Jing_Rainbow6 小时前
【Weapp-2 /Lesson19(2025-11-04)】微信小程序“博客园”项目深度解析:从架构到细节的完整剖析📱
微信·微信小程序·程序员
小皮虾7 小时前
拒绝卡顿!小程序图片本地“极速”旋转与格式转换,离屏 Canvas 性能调优实战
前端·javascript·微信小程序
k***121710 小时前
开源模型应用落地-FastAPI-助力模型交互-进阶篇-中间件(四)
开源·交互·fastapi
毕设源码-邱学长10 小时前
【开题答辩全过程】以 基于微信小程序的农商新闻网为例,包含答辩的问题和答案
微信小程序·小程序
小光学长10 小时前
基于微信小程序的家具商城系统g80l9675(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
数据库·微信小程序·小程序
云起SAAS10 小时前
1V1七彩测评抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·1v1七彩测评