一個C#程序員學習微信小程序路由的筆記

　　路由你們應該都知道，在微信小程序也是有的，畢竟它是單頁面應用程序。在WeChat中有五種跳轉方式，分別是wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack。今天咱們就說一說 如何使用這幾個API來跳轉頁面，而且咱們還要學習如何進行傳參，還要知道頁面棧這個知識。 

　　在此以前，必定要學習下頁面棧這個東西，要否則你就廢了，小程序的頁面棧最多能夠存放10個頁面，當等於10的時候，你就沒法再用 navigateTo API的時候，你就沒法在進行跳轉了，由於它是原頁面保留，在原來的頁面上面進行添加的。

　　若是你還不懂的話，這麼說吧，好比使用navigateTo從A頁面跳轉了B，又從B跳轉到了C，最後從C跳轉到了A那這個頁面棧就已經到達了3個！我以爲已經說的差很少了。

 

　　但若是你使用了 redirectTo就不同了，就在上面的實例中，假如咱們從B跳轉到了C使用了redirectTo那麼就至關於有兩個頁面棧，由於使用它將會替換當前頁面。

　　說了這麼多，就是想講下各類跳轉方式，它的做用不一樣，因此不適當的使用就會讓客戶懵逼。下面是我總結路由API的做用。

navigateTo, redirectTo 只能打開非 tabBar 頁面（一個是有回退按鈕，後者沒有）

。switchTab 只能打開 tabBar 頁面。

 　　好比想要跳轉，你能夠給按鈕一個事件，而且在Js中配對方法，就行了，代碼實現是這樣的。

<button class="btn-ask" bindtap='mytab'><image src='/images/btn_ask.png' /></button>

　　Js的實現也很簡單，就是經過wx對象的方法來進行跳轉（上面說的跳轉，都有！）

mytab:function(){
    wx.showToast({
      title: '加載中', icon: 'loading', duration: 1000 }) wx.navigateTo({ url: '../rediters/redi' }) }

除了經過調用方法的形式，還能夠經過  navigator  標籤，這個標籤就很是舒服了，由於咱們的Js一般是要和後端的數據交互，根本不要這些垃圾代碼，show代碼！

<navigator url='../rediters/redi' hover-class="changestyle" redirect>hahaha</navigator> //那個hover-class的樣式 是點擊效果！

帶上  redirect 就沒有返回按鈕，反而就有了。如今咱們說一下在跳轉的時候如何帶參跳轉！

只須要在定義的時候帶上參數就能夠了

wx.navigateTo({
      url: '../rediters/rediters?queryId=1' })

而後在Page中的Load事件中獲取。

　　onLoad: function (options) {
　　　　console.log(options)
　　},

但如今問題來了，如何傳遞多個參數，或者傳遞個對象，而且如何接收呢？

wx.navigateTo({
      url: '../rediters/rediters?queryId=1&State=2&name=3' })

在傳遞的時候，寫上多個參數，那麼在load事件的 Options中，它就變成了一個對象。

 傳遞一個對象也可這個差很少。只不過你能夠經過Js的方法把它變成Json進行傳遞。

 wx.navigateTo({
      url: '../rediters/rediters?testData=' + JSON.stringify(this.data.testData) })

以後在load事件中進行 parse就能夠了。