前提：建議還沒學HTML、CSS、JavaScript、JSON、vue、Ajax的兄弟姐妹們，先去把這些基礎補好過一遍，不然不好理解微信小程序

前面這一篇已經講過一次<navigator>跳轉頁面的用法了，今天詳細講解一下

回顧：

小程序導航跳轉頁面有兩種方式——>

第一種是用【<navigator>組件】直接跳轉，簡單用web角度理解就是類似直接用<a>標簽超鏈接跳轉，叫做【聲明式導航】；

第二種是用【wx.switchTab( )】跳轉，簡單用web角度理解就是類似利用JavaScript函數跳轉，叫做【編程式導航】。這個就先不講，先講第一種【聲明式導航】

一、聲明式導航

聲明式導航也分兩種

1、tabBar頁面跳轉

tabBar在【JSON配置】會講，tabBar就是小程序底部或頂部那個導航欄，如果這個頁面配置了這條導航欄，那么要跳轉到導航欄的頁面就是用這個方法

正常json那里配置了下面導航欄一點就可以跳轉

那要是我還想通過點上面主體頁面的地方跳轉到導航欄上某個頁面就這樣

代碼編寫規則如下：

url必須有'/'開頭，必須要設置open-type="switchTab"，不設置沒用

<!-- 聲明式導航：導航到tabBar -->
<navigator url="/pages/16_9-grid/9-grid" open-type="switchTab">導航到tabBar</navigator>
<!-- url必須有'/'開頭！！！ -->

2、非tabBar頁面跳轉

那要跳轉到不是導航欄的頁面，就得用這個方法

代碼編寫規則如下：

導航到非tabBar可以不用設置open-type，如果設置了，值只能是navigate

<!-- 聲明式導航：導航到非tabBar -->
<navigator url="/pages/17_aiAPI/aiAPI" open-type="navigate">導航到非tabBar</navigator>
<!-- 導航到非tabBar可以不用設置open-type，如果設置了，值只能是navigate -->

3、返回上一頁或多頁

在跳轉到的頁面設置【返回跳轉】

代碼編寫規則如下：

不需要寫url，直接open-type="navigateBack"

返回多頁就要設置detal,值就是返回多少頁

<!-- 返回1頁 -->
<navigator open-type="navigateBack">返回上一頁</navigator><!-- 返回多頁 -->
<!-- 返回多頁就要設置detal,值就是返回多少頁 -->
<navigator open-type="navigateBack" delta="2">返回2頁</navigator>

二、編程式導航

編程式導航就可以簡單理解：在js文件里讓它跳轉；那它跟<navigator>有啥區別？這不是多此一舉嗎？

很明顯是有區別的，你navigator只有設置這個組件才可以跳轉頁面；但是編程式導航只需要組件綁定事件就可以實現跳轉了，比如<button>、<view>、<swiper>......這些組件綁定了編程式導航，就都可以實現跳轉了，而且還可以在跳轉的時候執行其他事情

【編程式導航】的【跳轉tabBar頁面函數】和【跳轉非tabBar頁面函數】的對象參數的包含的配置屬性：

1、【編程式導航】的【跳轉tabBar頁面函數】

用wx.switchTab( {...} )函數，可以注意也就是把【聲明式導航】里【open-type="switchTap"】換成在js里寫【wx.switchTab( )】而已，效果和【聲明式導航】的【跳轉tabBar頁面函數】一樣

<!-- WXML部分 -->
<button bind:tap="goto_tabBar">跳轉第二頁</button>

//JS部分
Page({goto_tabBar(){// wx.switchTab()跳轉tabBar頁面wx.switchTab({url: '/pages/16_9-grid/9-grid',//下面這些要是沒有特殊要求的話，不寫其實也行，這里只是做個展示success: function() {console.log('跳轉成功')},fail: function() {console.log('跳轉失敗')},complete: function() {console.log('成功、失敗都會執行')}})}
})

2、【編程式導航】的【跳轉非tabBar頁面函數】

用wx.navigateTo( {...} )函數，可以注意也就是把【聲明式導航】里【open-type="navigate"】換成在js里寫【?wx.navigateTo( )】而已，效果和【聲明式導航】的【跳轉非tabBar頁面函數】一樣

<!-- WXML部分 -->
<button bind:tap="goto_navigator">跳轉非tarBar頁面</button>

//JS部分
Page({goto_navigator(){// wx.navigateTo()跳轉非tabBar的頁面wx.navigateTo({url: '/pages/17_aiAPI/aiAPI',//下面這些要是沒有特殊要求的話，不寫其實也行，這里只是做個展示success: function() {console.log('跳轉成功')},fail: function() {console.log('跳轉失敗')},complete: function() {console.log('成功、失敗都會執行')}})}
})

3、【編程式導航】的【返回頁面函數】

用wx.switchTab( {...} )函數，可以注意也就是把【聲明式導航】里【open-type="navigate"】換成在js里寫【?wx.navigateTo( )】而已，效果和【聲明式導航】的【跳轉非tabBar頁面函數】一樣

返回一頁

<!-- WXML部分 -->
<button bind:tap="backto_last">返回上一頁</button>

//JS部分
Page({//返回上一頁backto_last(){//返回上一頁的話就啥也不用寫，有個wx.navigateBack()就夠了wx.navigateBack()}
})

返回多頁

<!-- WXML部分 -->
<button bind:tap="backto_2page">返回2頁</button>

//JS部分
Page({backto_2page(){//直接返回多頁wx.navigateBack({delta: 2 //只需要多這一步，跟<navigator>組件的返回多頁一樣加一個delta})}
})

【編程式導航】的【返回頁面函數】的對象參數的包含的配置屬性：

三、導航傳參

沒什么難的知識點，一句話簡單說明：跟Ajax的帶參數網址一模一樣。只需要在網址后加一個"?"，然后后面拼接參數，參數寫成"參數=參數值"形式，多個參數"&"隔開，搞定。

不管是【聲明式導航】還是【編程式導航】都是一樣，在url那改就行了

<!-- WXML部分 -->
<navigator url="/pages/17_aiAPI/aiAPI?name=CZM&age=23" open-type="navigate">導航到非tabBar</navigator>//JS部分
wx.navigateTo({url: '/pages/17_aiAPI/aiAPI?name=CZM&age=23'
)}//都是一樣的方式傳參

然后這些參數還會在onLoad函數自動獲取到，要使用它的話可以掛到data上

//JS部分
Page({data:{//可以用data來獲取頁面加載時獲取到的【參數對象】，注意是【對象】query: {}},//事件監聽函數會在跳轉到該頁面的時候，自動獲取到參數，這里就試一下把參數輸出來onLoad: function(option) {console.log(option)//因為option獲取到了參數，但是他只是局部形參，在別的函數就不能用了//那就用this.setData()把參數值掛到datathis.setData({query: option})},
//現在在別的函數通過用data的值來使用獲取到的參數值method1: function(){console.log("在別的函數輸出獲取到的參數：")console.log(this.data.query)}
})