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

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

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

相关推荐
Nan_Shu_6143 分钟前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
计算机学姐21 分钟前
基于微信小程序的扶贫助农系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
发财北26 分钟前
房屋管理系统开发流程
小程序
月月吃喝27 分钟前
【PyQt5】嵌套多线程数据交互实现
开发语言·qt·交互
游戏开发爱好者828 分钟前
Nginx HTTPS 深入实战 配置、性能与排查全流程(Nginx https
运维·nginx·ios·小程序·https·uni-app·iphone
游戏开发爱好者82 小时前
TCP 抓包分析:tcp抓包工具、 iOS/HTTPS 流量解析全流程
网络协议·tcp/ip·ios·小程序·https·uni-app·iphone
Q_Q5110082853 小时前
python+uniapp基于微信小程序美食点餐系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
2501_916008893 小时前
iOS 26 软件性能测试全流程,启动渲染资源压力对比与优化策略
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张4 小时前
iOS 26 兼容测试实战,机型兼容、SwiftUI 兼容性改动
android·ios·小程序·uni-app·swiftui·cocoa·iphone
OEC小胖胖4 小时前
连接世界:网络请求 `wx.request`
前端·微信小程序·小程序·微信开放平台