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

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

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

相关推荐
ZC跨境爬虫1 小时前
跟着 MDN 学CSS day_12 :(值与单位的技能测试与深入理解)
前端·javascript·css·ui·交互
song5013 小时前
昇腾 910 的硬件架构:为什么它适合跑大模型
图像处理·人工智能·分布式·flutter·硬件架构·交互
七夜zippoe4 小时前
重构数字人交互体验:魔珐星云+DeepSeek打造情绪陪伴数字人全流程实战测评
重构·交互·数字人·deepseek·魔珐星云
song5014 小时前
多模态模型在昇腾上的部署架构
人工智能·分布式·深度学习·架构·transformer·交互
蜡笔小电芯4 小时前
【Electron】第4章—renderer.js 与页面交互逻辑
javascript·electron·交互
2501_9400417415 小时前
纯前端创意交互:五款全新实用工具与视觉应用生成指南
前端·交互
song5011 天前
对话:模型推理慢,怎么调
人工智能·分布式·深度学习·transformer·交互
咖啡八杯1 天前
微信小程序人脸认证1.0迁移2.0
后端·微信小程序
xshirleyl1 天前
微信小程序开发week8-慕尚花坊项目
微信小程序·小程序
admin and root1 天前
Claude+Trae大模型 配置Chrome MCP联动Yakit自动化渗透测试
微信小程序·渗透测试·自动化·攻防演练·ai安全·claude code·ai自动化渗透测试