百度智能小程序 小程序?qū)Ш?/h1>

在智能小程序中，導(dǎo)航跳轉(zhuǎn)是連接兩個頁面的紐帶，由于框架導(dǎo)航實現(xiàn)底層原理的黑盒效應(yīng)，以及頁面容器的場景和類型不同，導(dǎo)致我們在開發(fā)小程序過程中，不能清晰的判斷頁面的一些表現(xiàn)，例如返回圖標(biāo)（客戶端繪制的一個左箭頭圖標(biāo)，位于頂部導(dǎo)航欄的最左側(cè)，用于返回上一個小程序頁面容器）與首頁圖標(biāo)（客戶端繪制的一個小房子圖標(biāo)，用于打開小程序 app.json 配置的首頁）使用場景不明確。

通過對小程序框架進行分析，我們整理了全面的導(dǎo)航原理以及頁面跳轉(zhuǎn)后客戶端的表現(xiàn)，希望為您的開發(fā)帶來幫助。

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

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

原生小程序頁面

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

• 當(dāng)首次打開的頁面為非二級頁面（app.json pages 配置的首項頁面或者 tabBar 頁面），那么此頁面不會有返回按鈕和首頁圖標(biāo)，此時如果通過跳轉(zhuǎn)下一個新的頁面（客戶端新開一個容器，且不為 tabBar 頁面），則會在頂部導(dǎo)航欄左側(cè)增加一個返回按鈕；
• 當(dāng)首次打開的頁面為二級頁面（非 app.json pages 配置的首項頁面或者非 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)而想進行導(dǎo)航欄自定義，那么可以在 app.json 或者對應(yīng) page.json 增加配置（navigationStyle: custom），此時客戶端就會隱藏掉原生頂部導(dǎo)航欄，開發(fā)者就可以通過標(biāo)簽樣式進行定制化導(dǎo)航欄（未包括狀態(tài)欄）。

web-view 組件撐起的 h5 頁面

使用說明

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

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

場景舉例

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

小程序，頁面左上角沒有返回按鈕，只能不停的往下點，無法返回。

問題原因：

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

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

解決方案：

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

那么問題來了，怎么把點擊的鏈接傳到第二個頁面呢？我們可以在 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
<web-view src="{{url}}"></web-view>

不推薦使用的解決方案：

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

web-view 組件的返回

點擊返回按鈕：

• 如果當(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)用戶主動進行小程序切換（點擊右上角的關(guān)閉按鈕，將當(dāng)前小程序送入后臺，或者在 android 多任務(wù)管理中直接切換到某一個小程序頁面）時，會觸發(fā)每個小程序的部分生命周期，并不會刷新導(dǎo)航欄。因此可以在跳轉(zhuǎn)到某個小程序后，繼續(xù)使用之前的導(dǎo)航跳轉(zhuǎn)方法。小程序間的導(dǎo)航流程圖：Tips：

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