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

頁(yè)面跳轉(zhuǎn)底層原理

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

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

原生小程序頁(yè)面

假設(shè)我們的所有頁(yè)面都在原生小程序頁(yè)面跳轉(zhuǎn)：

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

web-view 組件撐起的 h5 頁(yè)面

使用說(shuō)明

智能小程序官方并不推薦使用 web-view 組件承載 h5 頁(yè)面。
因?yàn)檫@和原生小程序頁(yè)面相比性能有極大的劣勢(shì)，并不能給我們的用戶帶來(lái)更好的體驗(yàn)。但是，在初期階段確實(shí)存在將 h5 頁(yè)面先遷移到小程序中的訴求。

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

場(chǎng)景舉例

當(dāng)需要從 h5 無(wú)縫轉(zhuǎn)接到小程序，首先想到的就是小程序內(nèi)放置一個(gè)web-view組件來(lái)鏈接之前的 h5 頁(yè)面，一行代碼就完成了遷移到小程序的難題。
實(shí)際情況如下圖：

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

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

解決方案：

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

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

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

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

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

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

 
 
 
  
  
  // pages/webview/webview.swan

不推薦使用的解決方案：

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

web-view 組件的返回

點(diǎn)擊返回按鈕：

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

小程序頁(yè)面棧內(nèi)部導(dǎo)航流程圖：

小程序間跳轉(zhuǎn)

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

Tips

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

網(wǎng)頁(yè)名稱：創(chuàng)新互聯(lián)百度小程序教程：小程序?qū)Ш?
文章起源：http://fisionsoft.com.cn/article/cdpdpio.html

新聞中心