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

在這里插入圖片描述

  1. 新增地址流程
    • 下單頁 → 地址列表頁 (1次跳轉)
    • 地址列表頁 → 新增地址頁 (1次跳轉)
    • 保存地址 → 返回地址列表頁 (1次返回,自動刷新列表)
  2. 選擇地址流程
    • 地址列表頁 → 選中地址 → 返回下單頁 (1次返回)
  3. 更換地址
    • 下單頁 → 地址列表頁 (1次跳轉)
    • 選中新地址 → 返回下單頁 (1次返回)

這樣就完全避免了需要兩次返回才能回到下單頁的情況,每次操作都是單次跳轉或單次返回,符合用戶直覺且不會產生冗余頁面棧。然而使用wx.navigateBack本身不支持直接傳遞參數,但可以通過以下方法實現參數傳遞:

使用事件通道
  • 最符合小程序設計理念
  • 安全且不會污染全局命名空間
  • 支持復雜對象傳遞

下單頁(order.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)

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)

Page({onSubmit() {// 保存地址邏輯...// 獲取事件通道const eventChannel = this.getOpenerEventChannel()// 通知地址列表頁刷新if (eventChannel) {eventChannel.emit('addressAdded')}// 返回地址列表頁wx.navigateBack()}
})

使用事件通道是最推薦的方式,它不僅支持參數傳遞,還能保持頁面間的解耦,是微信小程序頁面間通信的最佳實踐。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/89889.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/89889.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/89889.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

JVM與JMM

為了更清晰地對比JVM和JMM,我們可以采用表格形式,從定義、功能、結構、與多線程關系等方面進行詳細比較: 對比項JVM(Java Virtual Machine)JMM(Java Memory Model)定義一種虛構的計算機&#x…

【Docker基礎】Docker數據卷管理:docker volume rm及其參數詳解

目錄 1 引言:Docker Volume 的生命周期管理 2 docker volume rm命令基礎 2.1 命令作用 2.2 命令語法 3 參數深度解析 3.1 基礎參數表 3.2 高級參數詳解 3.2.1 --force(-f) 4 Volume刪除前置條件 4.1 可刪除狀態判斷 4.2 常見報錯處…

嵌入式系統內核鏡像相關(十)

文章目錄 前言一、點亮多個led燈的基礎實驗以及其中的問題1.1 基礎流程1.1.1 alinx教程的問題1.1.1.1 驅動程序中的亮/滅邏輯修改!1.1.1.1.1 邏輯錯誤的修改1.1.1.1.2 多燈亮/滅 1.1.1.2 驅動程序中引腳的問題以及與裸機開發的區別(重要)1.1.…

Word和Excel批量轉PDF新方法,操作簡單

PDF是一種跨平臺的文檔格式,無論在任何設備上查看,其排版、字體和圖像都不會發生變化。這確保了文檔的一致性,避免了由于不同軟件版本或操作系統引起的顯示問題。這款小巧的工具大小不到2MB,使用起來異常簡單。只需要把需要轉換的…

AI搜索 MCP最佳實踐

背景 那些 LLM 不知道的事 嘗試直接詢問LLM“今天天氣如何”時,會發現LLM無法回答——它既不知道“今天”是哪天,也無法獲取地理位置信息。這揭示了LLM的局限:缺乏與外部工具和實時數據的交互能力。 為解決這一問題,MCP&#x…

JVM 簡介與作用

🚀 JVM 簡介與作用 📚 深入理解 Java 虛擬機的核心概念與重要作用 📖 目錄 🤔 什么是 Java 虛擬機(JVM)🌐 JVM 在 Java 生態中的核心地位🔀 JVM 跨平臺原理剖析📝 總結 …

? OpenAudio S1:影視級文本轉語音與語音克隆Mac整合包

? OpenAudio S1:影視級文本轉語音與語音克隆Mac整合包 🚀 OpenAudio S1 簡介 OpenAudio S1 是由 Fish Audio 開發的 Fish Speech 系列的最新一代人工智能語音生成模型。該模型旨在大幅提升 AI 語音生成的技術水平,為用戶提供更加自然、富有表…

spring加載外部properties文件屬性時,讀取到userName變量值和properties文件的值不一致

問題 使用spring DI注入外部properties文件屬性時&#xff0c;讀取到userName變量值和properties文件的值不一致。 bean屬性注入&#xff1a; <!--加載配置文件--> <context:property-placeholder location"classpath:*.properties"/><bean id"…

黑馬點評系列問題之基礎篇p7 06初識redis無法在虛擬機查到圖形化界面存進去的鍵

問題描述 在RESP中輸入了一些鍵(name,age等這些) 但是在圖形化界面里面輸入的&#xff0c;在非圖形化界面就找不到&#xff0c;在非圖形化界面里輸入的&#xff0c;在圖形化界面里就可以查到。 原因分析及解決 經過多次實驗&#xff0c;發現是因為在添加鍵名的時候&#xff0…

在VMware虛擬機中安裝Windows 98時,Explorer提示“該程序執行了非法操作,即將關閉”的解決辦法

在使用iso文件&#xff08;MD5: 0E496B5DCC519F550AAF0BCFBB4A11EA&#xff09;安裝Windows98時&#xff0c;遇到此提示。 雖然原因未知&#xff0c;也無需深入探究&#xff0c;但是根據網友在 https://www.bilibili.com/opus/435866522585702782 中給出的相似經驗&#xff…

在瀏覽器中使用SQLite(官方sqlite3.wasm)

有人可能會問&#xff1a;既然瀏覽器里又內置得IndexedDB&#xff0c;而且在IndexedDB里存數據&#xff0c;關了瀏覽器數據也不會丟&#xff0c;為什么還要在瀏覽器里用SQLite? 實際上&#xff0c;當 IndexedDB 內的數據量增多&#xff0c;數據和數據之間的關系變得復雜&…

數據結構(Java)--位運算

前言 本文為本小白學習數據結構的筆記&#xff0c;將以算法題為導向&#xff0c;向大家更清晰的介紹數據結構相關知識&#xff08;算法題都出自B站馬士兵教育——左老師的課程&#xff0c;講的很好&#xff0c;對于想入門刷題的人很有幫助&#xff09; 為什么要使用為位運算 位…

秋招Day14 - Redis - 應用

Redis如何實現異步消息隊列&#xff1f; List配合LPUSH和RPOP。 另外就是用 Redis 的 Pub/Sub 來實現簡單的消息廣播和訂閱。 但是這兩種方式都是不可靠的&#xff0c;因為沒有 ACK 機制所以不能保證訂閱者一定能收到消息&#xff0c;也不支持消息持久化。 Redis如何實現延時…

因果語言模型、自回歸語言模型、僅解碼器語言模型都是同一類模型

因果語言模型、自回歸語言模型、僅解碼器語言模型都是同一類模型 flyfish 因果語言模型&#xff08;causal Language Models&#xff09; 自回歸語言模型&#xff08;autoregressive language models&#xff09; 僅解碼器語言模型&#xff08;decoder-only language models&am…

jvm架構原理剖析篇

簡單題&#xff08;5道&#xff09; 考查內容&#xff1a;JVM運行時數據區域 題干&#xff1a;Java虛擬機棧的主要作用是&#xff1f; A. 存儲對象實例 B. 存儲方法調用和局部變量 C. 存儲靜態字段 D. 存儲字節碼指令 正確答案&#xff1a;B 解析&#xff1a;虛擬機棧用于存儲方…

智鏈萬物:人工智能驅動的產業智能化革命

當生成式AI在藝術與創意領域掀起風暴&#xff0c;大型語言模型重塑信息交互方式時&#xff0c;一場更為基礎、影響更為深遠的變革&#xff0c;正在全球實體經濟的根基處悄然發生并加速推進——這就是產業智能化。它并非簡單的“機器換人”&#xff0c;而是人工智能&#xff08;…

python中上下文管理器 與 try finally有什么區別

目錄 主要區別代碼對比何時使用哪種方式 主要區別 語法簡潔性 上下文管理器使用 with 語句&#xff0c;語法更簡潔優雅try-finally 需要顯式編寫異常處理代碼&#xff0c;更冗長 代碼復用性 上下文管理器可以封裝為類或函數&#xff0c;便于在多處復用try-finally 通常需要在每…

人體屬性識別+跌倒檢測:兒童行為監測與安全升級

智慧幼兒園的AI智能檢測盒應用實踐 背景&#xff1a;傳統園區管理的三大痛點 傳統幼兒園管理長期面臨三大核心挑戰&#xff1a;一是安全監控依賴人工巡查&#xff0c;存在視覺盲區與響應延遲&#xff0c;如某連鎖幼兒園曾因人工巡查疏漏&#xff0c;導致3起兒童跌倒事故未能及…

【ESP32-IDF筆記】09-UART配置和使用

環境配置 Visual Studio Code &#xff1a;版本1.98.2 ESP32&#xff1a;ESP32-S3 ESP-IDF&#xff1a;V5.4 支持型號&#xff1a;ESP32、ESP32-C2、ESP32-C3、ESP32-C5、ESP32-C6、ESP32-C61、ESP32-H2、ESP32-P4、 ESP32-S2、ESP32-S3 簡介 通用異步接收器/發送器 (UART) …

在 .NET Core 和 React 中使用 WebSockets 和 SignalR 進行實時數據傳輸

對于需要即時更新和通知的應用程序來說&#xff0c;實時數據傳輸至關重要。在 .NET Core 中&#xff0c;WebSocket 和 SignalR 提供了強大的工具來實現客戶端和服務器之間的實時通信。在本指南中&#xff0c;我們將探討如何在 .NET Core 應用程序中使用 WebSocket 和 SignalR 實…