Navigator和導航欄之間的差別以及用法場景的分析

差別：

   1.

navigator 是屬于小程式元件中的， 導航欄

是屬于小程式API中的

   2.navigator元件是用在axml頁面中跳轉的導航，它有4種類型（見下表）；導航欄API是用在js中實作頁面跳轉的

   3.navigator是通過給屬性open-type指派的方法來實作其對應的跳轉功能，導航欄是通過封裝好的API中方法（如下表）實作其對應的功能

關聯：

navigator的屬性open-type對應導航欄API中的相應功能，參考該表了解  

navigator（open-type）	導航欄
navigate（預設值）	對應my.navigateTo的功能
redirect	對應my.redirectTo的功能
switchTab	對應my.switchTab的功能
navigateBack	對應my.navigateBack的功能

建議：

如果需要在跳轉做其他邏輯處理建議使用導航欄API，不做的話建議使用navigator元件

用法場景：

1.my.navigateTo：

保留目前頁面，跳轉到應用内的某個指定頁面，路徑後可帶參數，參數規則如下：路徑與參數之間使用?分隔，參數鍵與參數值用=相連，不同參數必須用&分隔；如 path?key1=value1&key2=value2；

使用 my.navigateBack 可以傳回到原頁面；頁面最大深度為10，即可連續調用 10 次 navigateTo

示例代碼：

my.navigateTo({
  url: 'new_page?count=100'
})           

2.my.redirectTo：

關閉目前頁面，跳轉到應用内的某個指定頁面，路徑後可帶參數，參數規則如下：路徑與參數之間使用?分隔，參數鍵與參數值用=相連，不同參數必須用&分隔；如path?key1=value1&key2=value2

my.redirectTo({
  url: 'new_page?count=100'
})           

3.my.switchTab:

跳轉到指定 tabBar 頁面，并關閉其他所有非 tabBar 頁面；跳轉的頁面的路徑需要在app.json的tabBar中聲明的頁面且路徑後不能帶參數

// app.json
{
  "tabBar": {
    "items": [{
      "pagePath": "home",
      "name": "首頁"
    },{
      "pagePath": "user",
      "name": "使用者"
    }]
  }
}           

my.switchTab({
  url: '/home'
})           

4.my.navigateBack:

關閉目前頁面，傳回上一級或多級頁面。可通過 getCurrentPages 擷取目前的頁面棧資訊，決定需要傳回幾層；傳回的頁面數，如果 delta 大于現有頁面數，則傳回到首頁。

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，
// 而 redirectTo 方法則不會。見下方示例代碼

// 此處是one頁面
my.navigateTo({
  url: 'two?pageId=10000'
})

// 此處是two頁面
my.navigateTo({
  url: 'one?pageId=99999'
})

// 在three頁面内 navigateBack，将傳回one頁面
my.navigateBack({
  delta: 2
})           

my.navigateTo 和 my.redirectTo 不允許跳轉到 tabbar 頁面；如果需要跳轉到 tabbar 頁面，請使用 my.switchTab

5.my.reLaunch:

關閉目前所有頁面，跳轉到應用内的某個指定頁面。如果頁面不為 tabbar 頁面則路徑後可以帶參數。參數規則如下：路徑與參數之間使用?分隔，參數鍵與參數值用=相連，不同參數必須用&分隔；如path?key1=value1&key2=value2

my.reLaunch({
  url: '/page/index'
})           

6.my.setNavigationBar:

設定導航欄文字及樣式，導航欄底部邊框顔色，支援十六進制顔色值。若設定了 backgroundColor，則borderBottomColor 不會生效，預設會和 backgroundColor 顔色一樣

my.setNavigationBar({
  title: '你好',
  backgroundColor: '#108ee9',
  success() {
    my.alert({
      content: '設定成功', 
    });
  },
  fail() {
    my.alert({
      content: '設定是失敗',
    });
  },
});           

7.my.showNavigationBarLoading:

顯示導航欄 loading

my.showNavigationBarLoading();           

8.my.hideNavigationBarLoading:

隐藏導航欄 loading

my.hideNavigationBarLoading();