• 小程序?qū)Ш?
  • 頁面跳轉(zhuǎn)底層原理
  • 原生小程序頁面
  • web-view 組件撐起的 h5 頁面
    • 使用說明
    • 場景舉例
      • 解決方案：
      • 不推薦使用的解決方案：
    • web-view 組件的返回
  • 小程序間跳轉(zhuǎn)
  • Tips

小程序?qū)Ш?/h1>

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

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

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

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

原生小程序頁面

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

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

web-view 組件撐起的 h5 頁面

使用說明

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

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

場景舉例

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

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

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

解決方案：

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

那么問題來了，怎么把點(diǎn)擊的鏈接傳到第二個頁面呢？
我們可以在 web-view 組件頁面使用 jssdk 中 h5 頁面跳轉(zhuǎn)到小程序頁面的方法 小程序.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
  
  
  

 
 
 

不推薦使用的解決方案：

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

web-view 組件的返回

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

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

小程序間跳轉(zhuǎn)

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

Tips

• 使用自定義導(dǎo)航欄時，請先參考原生頂部導(dǎo)航欄。通常情況下，為保證良好的用戶體驗(yàn)，可能需要自己實(shí)現(xiàn)默認(rèn)導(dǎo)航中的「返回/回首頁」等功能，此時可以借助 getCurrentPages 來判斷當(dāng)前頁面棧的深度，從而決定是否應(yīng)該展示「返回/回首頁」按鈕。

• 當(dāng)swanNativeVersion>=2.28.0時，小程序框架將回收二級頁面（非首頁 / 非 Tab 頁）左上角返回按鈕的自定義權(quán)限。在小程序二級頁面使用自定義導(dǎo)航欄時，小程序框架將提供統(tǒng)一的返回按鈕控制方案。詳情請參考非兼容性升級。

文章名稱：創(chuàng)新互聯(lián)百度小程序教程：小程序?qū)Ш?
網(wǎng)站網(wǎng)址：http://m.5511xx.com/article/cdpdpio.html