微信小程序把玩（三十九）navigation API

演示效果也看到了小程序也就提供這幾個處理導航控制。值得注意的是只能同時導航五個頁面

主要屬性：

導航條一些方法

wx.setNavigationBarTitle(object) 設置導航條的Title

導航標題可以通過三種方式設置，第一種是通過全局配置名字統一，第二種就是在page中新建個json文件配置它會覆蓋全局配置的title，第三種就是通過API設置。

wx.showNavigationBarLoading()設置在導航條上顯示Loading加載狀態

wx.hideNavigationBarLoading() 隱藏Loading加載狀態

導航視圖的一些方法

wx.navigateTo() 保留當前頁面進行跳轉，傳參時就像拼接GET參數一樣即可，代碼中會有體現

wx.redirectTo() 銷燬當前頁面進行跳轉，

wx.navigateBack() 返回上一個頁面

wxml

<button type="primary" bindtap="setNavigationBarTitle">設置navigationBarTitle</button>
<button type="primary" bindtap="showNavigationBarLoading">設置navigationBarLoading加載狀態</button>
<button type="primary" bindtap="hiddenNavigationBarLoading">隱藏navigationBarLoading加載狀態</button>
<button type="warn" bindtap="navigateTo"> 保留當前頁跳轉</button>
<button type="warn" bindtap="redirectTo"> 不保留當前頁面跳轉</button>
<button type="warn" bindtap="navigateBack">退回到上一個頁面</button>

json

{
    "navigationBarTitleText": "我是通過json配置的title"
}

js

//導入另一個頁面
var file = '../audio/audio'
Page({
  data:{
    text:"Page navigation"
  },
  onLoad:function(options){
    // 頁面初始化 options爲頁面跳轉所帶來的參數
  },
  /**
   * 設置NavigationTitle
   */
  setNavigationBarTitle: function() {
    wx.setNavigationBarTitle({
      title: '我是通過API設置的NavigationBarTitle'
    })
  },

  /**
   * 設置加載狀態
   */
  showNavigationBarLoading: function() {
    wx.showNavigationBarLoading()
  },

  /**
   * 隱藏加載狀態
   */
  hiddenNavigationBarLoading: function() {
    wx.hideNavigationBarLoading()
  },

  /**
   * 保留當前Page跳轉
   */
  navigateTo: function() {
    wx.navigateTo({
      //傳遞參數方式向get請求拼接參數一樣
      url: file + '?phone=18939571&password=1992',
      success: function(res) {
        console.log(res)
      },
      fail: function(err) {
        console.log(err)
      }

    })
  },
  /**
   * 關閉當前頁面進行跳轉當前頁面會銷燬
   */
  redirectTo: function() {
    wx.redirectTo({
       //傳遞參數方式向get請求拼接參數一樣
      url: file + '?phone=189395719&password=1992'
    })
  },
  /**
   * 退回到上一個頁面
   */
  navigateBack: function() {
    wx.navigateBack()
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})