色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

小程序框架頁面棧設計案例解析

電子工程師 ? 來源:博客園 ? 作者: 姜友瑤 ? 2020-11-04 13:55 ? 次閱讀

剛開始用小程序的時候沒怎么在意頁面的跳轉,也沒仔細看文檔中說的頁面棧的內容。只要能跳轉就行,wx.navigateTo,wx.redirectTo 這些方法一頓亂用。最后在做一個5層頁面的時候跳懵了。各種重復跳頁,怎么改都不好使,于是安心下來仔細看看API,發現這個路由還是有學問的。因此分享一下,希望對做小程序的網友也有一定的幫助。

頁面棧

首先我們要理解在小程序中頁面的路由是小程序框架本身控制的我們不要去手動管理, 小程序框架通過一個頁面棧的設計來管理所有的界面,為了便于理解你可以看一下示意圖。

?

如圖所示小程序的頁面棧最大能存放5個頁面,當頁面棧中的頁面等于5時,在使用navigateTo這種方式是不能再跳頁的。

下面我們分析一下頁面棧的變化過程,從分析中,我們需要明白的一個重要問題就是,當客戶按返回按鈕的時候究竟會跳轉到那個界面,這是我們分析頁面棧變化的的意義。

首先我們在頁面中調用兩次navigateTO,頁面棧情況如下

?

這時顯示的界面是pageC ,如果客戶在此時返回則會一切正常,回退的第一個界面是pageB,然后是pageA。但是如果在pageC 界面調用 wx.redirectTo({url:'pageD'}) 則情況就會不一樣看,我們先看一下跳轉到pageD后頁面棧的情況如何。

?

根據棧的情況,我們可以分析出。如果使用 wx.redirectTo跳轉到pageD頁面,然后在回退的時候是不能再次回退到pageC的,而會直接回退到pageB。

通過上面對頁面棧的分析,我們可以看到棧的變化是會影響客戶回退頁面的順序的,所以根據自己的需要合理的使用不同的跳轉方法是非常重要的。如果使用不當就會導致跳轉混亂讓人摸不清頭腦

下面分析一種調轉重復頁面的情況

如果我們的pageB頁面是一個數據列表頁面,比如商品列表,pageC是一個商品的編輯界面,一般我們會通過pageB然后進如pageC對商品進行修改,修改后返回pageB。這是很常見的一個場景,但是如果使用不當機會出現如下情況

?

如圖所示棧中出現了兩個相同的pageB界面,這個時候如果用戶按退出鍵就會出現一個頁面出現2次的情況,而且有一個界面的數據也是舊的數據。因此為了避免這個問題,我們應該在 PageC 頁面避免將 PageB重復壓入棧中,所以在pageC頁面 使用wx.navigateBack({delta:1}); 進行頁面回退。而數據刷新的問題則在頁面的onShow函數中進行即可。

路由方法與頁面棧變化對應關系


特別注意:

navigateTo,redirectTo只能打開非 tabBar 頁面。

switchTab只能打開 tabBar 頁面。

reLaunch可以打開任意頁面。

頁面底部的 tabBar 由頁面決定,即只要是定義為 tabBar 的頁面,底部都有 tabBar。

調用頁面路由帶的參數可以在目標頁面的onLoad中獲取。
編輯:hfy

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • API
    API
    +關注

    關注

    2

    文章

    1499

    瀏覽量

    61969
  • 路由
    +關注

    關注

    0

    文章

    278

    瀏覽量

    41837
  • 小程序
    +關注

    關注

    1

    文章

    234

    瀏覽量

    12126
收藏 人收藏

    評論

    相關推薦

    AUTOSAR通信協議解析 如何實現AUTOSAR通信

    通信協議是一個復雜的系統,它涵蓋了多種通信方式和模塊,以實現車內ECU之間的高效、可靠的數據交換。以下是對AUTOSAR通信協議的解析及實現AUTOSAR通信的方法: 一、AUTOSAR通信協議解析
    的頭像 發表于 12-17 14:54 ?349次閱讀

    SSM框架的源碼解析與理解

    MVC模式,使得開發Web應用程序變得更加高效和簡單。 1. Spring框架 基本功能: Spring是一個開源的Java平臺,它提供了全面的基礎設施支持,以便開發Java應用程序。Spring
    的頭像 發表于 12-17 09:20 ?194次閱讀

    SSM框架在Java開發中的應用 如何使用SSM進行web開發

    SSM框架,即Spring、SpringMVC和MyBatis的整合,是Java Web開發中常用的技術。它通過分層架構,實現了視圖、控制、業務邏輯和數據訪問的分離,提高了代碼的可維護性和可擴展性
    的頭像 發表于 12-16 17:28 ?435次閱讀

    HarmonyOS Web頁面加載的原理和優化方法

    在移動互聯網時代,應用的頁面渲染速度對于用戶體驗至關重要。相對于原生頁面,Web頁面的性能存在多方面的技術挑戰。本文以HarmonyOS的ArkWeb組件為基礎,介紹了Web頁面加載中
    的頭像 發表于 12-05 15:14 ?209次閱讀
    HarmonyOS Web<b class='flag-5'>頁面</b>加載的原理和優化方法

    深度解析研華全式AI產品布局

    在人工智能邁向邊緣智能化的浪潮中,研華科技通過“Edge AI+生態協同”戰略推動AIoT 2.0時代的產業落地。本文專訪研華科技產品總監邱柏儒,深度解析研華全式AI產品布局、差異化技術積累與生態共創實踐。
    的頭像 發表于 12-05 09:51 ?220次閱讀

    簡述大前端技術的渲染原理

    應用開發:Android、iOS、鴻蒙(HarmonyOS)等; ?Web前端框架:Vue、React、Angular等; ?小程序開發:微信小程序、京東小程序、支付寶小
    的頭像 發表于 11-07 10:11 ?207次閱讀

    Linux網絡協議的實現

    網絡協議是操作系統核心的一個重要組成部分,負責管理網絡通信中的數據包處理。在 Linux 操作系統中,網絡協議(Network Stack)負責實現 TCP/IP 協議簇,處理應用程序發起的網絡
    的頭像 發表于 09-10 09:51 ?302次閱讀
    Linux網絡協議<b class='flag-5'>棧</b>的實現

    Linux內核中的頁面分配機制

    Linux內核中是如何分配出頁面的,如果我們站在CPU的角度去看這個問題,CPU能分配出來的頁面是以物理頁面為單位的。也就是我們計算機中常講的分頁機制。本文就看下Linux內核是如何管理,釋放和分配這些物理
    的頭像 發表于 08-07 15:51 ?280次閱讀
    Linux內核中的<b class='flag-5'>頁面</b>分配機制

    鴻蒙開發:【頁面及任務鏈】

    單個UIAbility組件可以實現多個頁面,并在多個頁面之間跳轉,這種UIAbility組件內部的頁面跳轉關系稱為“頁面”,由ArkUI
    的頭像 發表于 06-14 10:10 ?409次閱讀
    鴻蒙開發:【<b class='flag-5'>頁面</b><b class='flag-5'>棧</b>及任務鏈】

    鴻蒙Ability Kit(程序框架服務)【UIExtensionAbility】

    [UIExtensionAbility]是UI類型的ExtensionAbility組件,需要與[UIExtensionComponent]一起配合使用,開發者可以在UIAbility的頁面中通過
    的頭像 發表于 06-05 09:19 ?1371次閱讀
    鴻蒙Ability Kit(<b class='flag-5'>程序</b><b class='flag-5'>框架</b>服務)【UIExtensionAbility】

    鴻蒙Ability Kit(程序框架服務)【Ability內頁面間的跳轉】

    基于Stage模型下的Ability開發,實現Ability內頁面間的跳轉和數據傳遞。
    的頭像 發表于 06-03 20:43 ?297次閱讀
    鴻蒙Ability Kit(<b class='flag-5'>程序</b><b class='flag-5'>框架</b>服務)【Ability內<b class='flag-5'>頁面</b>間的跳轉】

    鴻蒙Ability Kit(程序框架服務)【UIAbility內和UIAbility間頁面的跳轉】

    基于Stage模型下的UIAbility開發,實現UIAbility內和UIAbility間頁面的跳轉。
    的頭像 發表于 06-03 14:13 ?757次閱讀
    鴻蒙Ability Kit(<b class='flag-5'>程序</b><b class='flag-5'>框架</b>服務)【UIAbility內和UIAbility間<b class='flag-5'>頁面</b>的跳轉】

    通信網絡協議之UDP協議技術解析

    在通常的網絡協議中,TCP/IP協議是一個常見的示例,其中UDP和TCP都是傳輸層協議。傳輸層負責提供端到端的數據傳輸服務,它在網絡層(如IP協議)之上,為應用層(如HTTP、DNS、FTP)提供可靠的數據傳輸。
    發表于 02-01 11:00 ?975次閱讀
    通信網絡協議<b class='flag-5'>棧</b>之UDP協議技術<b class='flag-5'>解析</b>

    堆和的區別和使用注意事項

    堆和是在計算機科學中廣泛使用的兩種數據結構,它們具有不同的用途和特點。堆和的區別涉及到內存分配、訪問方式、數據存儲等方面。在使用堆和時,還需要注意一些細節,以確保程序的正確性和效
    的頭像 發表于 01-18 17:24 ?2189次閱讀

    鴻蒙開發-應用程序框架UIAbility的使用

    和router.RouterMode.Standard多實例模式。在單實例模式下:如果目標頁面的url在頁面中已經存在同url頁面,離
    發表于 01-17 16:36
    主站蜘蛛池模板: 伦理片97影视网| 欧美特级特黄AAAAA片| 受被攻做到腿发颤高h文| 在线 | 果冻国产传媒61国产免费| 广西美女色炮150p图| 凌馨baby| 亚洲日本在线不卡二区| 国产高清在线观看| 欧美影院在线观看完整版 mp4 | 中文字幕乱码一区AV久久| 国产高潮国产高潮久久久久久| 男女无遮挡吃奶gift动态图| 亚洲欧洲免费三级网站| 国产成人高清视频| 让人爽到湿的小黄书| 99er久久国产精品在线| 精品久久久久久久高清| 鞋奴的视频VK| 福利免费观看体检区| 欧美无码专区| 97精品少妇偷拍AV| 久久久99精品成人片中文| 亚洲精品青青草原avav久久qv| 国产69精品久久久久无码麻豆| 飘雪在线观看免费高清完整版韩国| 最美白虎逼| 久久久高清国产999尤物| 亚洲免费国产| 国产午夜免费视频片夜色| 天美传媒色情原创精品| 儿子日母亲B好爽| 人人插人人射| hdsex老太婆70| 欧美黑人巨大xxxxx| 99久久久无码国产精品不卡按摩| 久久综合久久伊人| 印度人XXx| 久久午夜夜伦鲁鲁片无码免费| 一本之道加勒比在线观看| 精品成人片深夜| 亚洲三级视频|