小程序導航

在智能小程序中，導航跳轉是連接兩個頁面的紐帶，由于框架導航實現(xiàn)底層原理的黑盒效應，以及頁面容器的場景和類型不同，導致我們在開發(fā)小程序過程中，不能清晰的判斷頁面的一些表現(xiàn)，例如返回圖標（客戶端繪制的一個左箭頭圖標，位于頂部導航欄的最左側，用于返回上一個小程序頁面容器）與首頁圖標（客戶端繪制的一個小房子圖標，用于打開小程序 app.json 配置的首頁）使用場景不明確。
通過對小程序框架進行分析，我們整理了全面的導航原理以及頁面跳轉后客戶端的表現(xiàn)，希望為您的開發(fā)帶來幫助。
更多內容參見：頂部導航欄的 UI 設計參考文檔、導航路由開發(fā)文檔、web-view 組件開發(fā)文檔。

頁面跳轉底層原理

智能小程序提供了 5 種路由方式，即: navigateTo、redirectTo、navigateBack、switchTab、reLaunch，除直接調用 API 的方式，還可以通過 navigator 組件綁定屬性的方式觸發(fā)路由跳轉。
假設從 A 頁面跳轉到 B 頁面，針對 5 種不同的跳轉，通過對智能小程序分析，客戶端和小程序框架配合如下：

跳轉方式	實現(xiàn)方式	場景
navigateTo	小程序框架攜帶開發(fā)者參數(shù)，通知客戶端打開一個新的頁面容器，客戶端打開后將相關參數(shù)回傳給小程序框架，并通知框架開始加載開發(fā)者代碼，緊接著框架實例化一個新的頁面并將其推入頁面棧中，然后利用初始數(shù)據(jù)進行初始化頁面渲染。	只能打開非 tabBar 頁面
redirectTo	小程序框架攜帶開發(fā)者參數(shù)，通知客戶端打開一個新的頁面容器，客戶端打開后將相關參數(shù)回傳給小程序框架，并通知框架開始加載開發(fā)者代碼，緊接著框架將頁面棧頂?shù)男畔⒏聻榇D頁面的信息，同時創(chuàng)建頁面實例，然后利用初始數(shù)據(jù)進行初始化頁面渲染。	只能打開非 tabBar 頁面
navigateBack	有兩種方式返回上一個頁面，一種是主動操作（android 物理返回、雙端右滑、通過頂 bar 的返回按鈕），此場景下返回時客戶端會通知小程序框架將頁面棧頂頁彈出；另一種是調用 API 的方式或者利用 navigator 組件返回上一頁，此場景下是由框架直接通知客戶端關閉當前頁面容器，客戶端關閉成功后通知小程序框架將頁面棧頂頁彈出。	可作用于任意頁面
switchTab	有兩種方式進行 tab 切換，一種是主動操作（在 tab 頁點擊另一個 tab），客戶端會通知小程序框架對頁面棧信息進行更新，另一種是通過 API 或利用 navigator 組件通知客戶端跳轉到某一 tab 頁，客戶端跳轉完成時通知小程序框架進行頁面棧信息更新。	只能打開 tabBar 頁面
reLaunch	小程序框架將頁面棧清空，然后利用開發(fā)者傳入的 url 重新初始化為第一個頁面。	可打開任意頁面

原生小程序頁面

假設我們的所有頁面都在原生小程序頁面跳轉：

當首次打開的頁面為非二級頁面（app.json pages 配置的首項頁面或者 tabBar 頁面），那么此頁面不會有返回按鈕和首頁圖標，此時如果通過跳轉下一個新的頁面（客戶端新開一個容器，且不為 tabBar 頁面），則會在頂部導航欄左側增加一個返回按鈕；
當首次打開的頁面為二級頁面（非 app.json pages 配置的首項頁面或者非 tabBar 頁面），那么此頁面就會出現(xiàn)首頁圖標，此時如果通過導航跳轉下一個新的頁面（客戶端新開一個容器，且不為 tabBar 頁面），則會在首頁圖標左側增加一個返回按鈕；
在跳轉多次后，當我們操作返回到上一個頁面時，客戶端會將當前頁面容器關掉，將待返回到的頁面容器從后臺切到前臺展示，這一過程客戶端頂部導航欄不會有刷新操作。
如果我們不想使用客戶端的原生頂部導航欄，轉而想進行導航欄自定義，那么可以在 app.json 或者對應 page.json 增加配置（navigationStyle: custom），此時客戶端就會隱藏掉原生頂部導航欄，開發(fā)者就可以通過標簽樣式進行定制化導航欄（未包括狀態(tài)欄）。

web-view 組件撐起的 h5 頁面

使用說明

智能小程序官方并不推薦使用 web-view 組件承載 h5 頁面。
因為這和原生小程序頁面相比性能有極大的劣勢，并不能給我們的用戶帶來更好的體驗。但是，在初期階段確實存在將 h5 頁面先遷移到小程序中的訴求。

在 web-view 組件承載 h5 頁面中，如果想要跳轉到一個新的小程序頁面（即客戶端新開一個容器），需要配合 jssdk 進行操作。

場景舉例

當需要從 h5 無縫轉接到小程序，首先想到的就是小程序內放置一個web-view組件來鏈接之前的 h5 頁面，一行代碼就完成了遷移到小程序的難題。
實際情況如下圖：

小程序，頁面左上角沒有返回按鈕，只能不停的往下點，無法返回。
問題原因：
使用 web-view 組件的 h5 中跳轉到 h5 的下一個頁面，客戶端并沒有打開一個新的小程序頁面，而是在當前 web-view 組件加載了新的網(wǎng)頁，這樣導致客戶端的頁面棧沒有增加新的小程序頁面，導航欄的返回按鈕沒有出現(xiàn)，導航欄上還是原來的按鈕。

正常情況下，小程序直接打開一個非首頁小程序頁面，會出現(xiàn)首頁圖標，如未點擊首頁或者右上角“更多”里面的回首頁或者首頁圖標，在跳轉到新的小程序頁面的時候，首頁圖標將會一直存在。

解決方案：

通過跳轉新的小程序頁面，比如在將要加載的 h5 也放個 web-view 組件，觸發(fā)新的小程序頁面加載，下一個頁面的左上角是會有返回按鈕，體驗上和原生一致。
效果圖：

那么問題來了，怎么把點擊的鏈接傳到第二個頁面呢？
我們可以在 web-view 組件頁面使用 jssdk 中 h5 頁面跳轉到小程序頁面的方法 小程序.webView.navigateTo，然后再攜帶一個 url 參數(shù)：
代碼示例

 
 
 
  
  
  navigate(url) {
  
  
   swan.webView.navigateTo({url: '../webview/webview?weburl=' + url});
  
  
  }

接著在小程序另外一個新的 web-view 組件頁面中：
代碼示例

 
 
 
  
  
  Page({
  
  
   data: {
  
  
   url:''
  
  
   },
  
  
   // 監(jiān)聽頁面加載，獲取H5頁面?zhèn)鬟f過來的weburl
  
  
   onLoad: function (options) {
  
  
   this.setData({
  
  
   url: options.weburl
  
  
   });
  
  
   }
  
  
  });

并賦值給 webview.小程序中的 src 屬性：

 
 
 
  
  
  // pages/webview/webview.swan

不推薦使用的解決方案：

客戶端上可以通過側滑返回到 web-view 組件的上一個網(wǎng)頁內容。缺點：一方面沒有原生導航棧返回的動畫效果，另一個方面作為用戶來說，這個操作隱藏的比較深，難以發(fā)現(xiàn)。
在每個 h5 頁面都加上一個帶返回按鈕的導航欄。缺點：因為小程序頁面的頭部已經有個導航欄了，再加一個的話就顯得非常的不協(xié)調，影響用戶體驗。
使用自定義導航欄樣式，新增導航欄，在 app.json 或者對應 page.json 增加配置（navigationStyle: custom），缺點：web-view 組件頁面不支持自定義導航欄樣式。

web-view 組件的返回

點擊返回按鈕：

如果當前是在使用 web-view 組件的小程序頁面，web-view 組件首先回退展示的前一個 h5 內容，類似瀏覽器的網(wǎng)頁返回。
如果 web-view 組件沒有內容可以返回，就觸發(fā)小程序頁面棧的返回效果。
如果是當前小程序頁面棧首頁，再返回，會回到上一個小程序或者非小程序 NA 頁面。
舉例：

小程序頁面棧內部導航流程圖：

小程序間跳轉

當我們從一個小程序打開另一個小程序，單個小程序間頁面跳轉參見原生小程序頁面、web-view 組件撐起的 h5 頁面，目前百度 App 客戶端最多支持打開 6 個小程序，超出之后會按打開順序依次替換掉最先打開的小程序，當用戶主動進行小程序切換（點擊右上角的關閉按鈕，將當前小程序送入后臺，或者在 android 多任務管理中直接切換到某一個小程序頁面）時，會觸發(fā)每個小程序的部分生命周期，并不會刷新導航欄。因此可以在跳轉到某個小程序后，繼續(xù)使用之前的導航跳轉方法。
小程序間的導航流程圖：

Tips

使用自定義導航欄時，請先參考原生頂部導航欄。通常情況下，為保證良好的用戶體驗，可能需要自己實現(xiàn)默認導航中的「返回/回首頁」等功能，此時可以借助 getCurrentPages 來判斷當前頁面棧的深度，從而決定是否應該展示「返回/回首頁」按鈕。
當swanNativeVersion>=2.28.0時，小程序框架將回收二級頁面（非首頁 / 非 Tab 頁）左上角返回按鈕的自定義權限。在小程序二級頁面使用自定義導航欄時，小程序框架將提供統(tǒng)一的返回按鈕控制方案。詳情請參考非兼容性升級。

分享名稱：創(chuàng)新互聯(lián)百度小程序教程：小程序導航
URL標題：http://www.dlmjj.cn/article/cdpdpio.html

日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

新聞中心