A. 微信小程序實現tab切換
微信小程序使用的是類似MVVM類型的框架，本質是數據驅動視圖，換句話來說就是邏輯層（javascript）去驅動界面層（view）的改變，功能實現核心主要在於操作數據。
下面來詳細講解，微信小程序如何實現tab切換功能，如下圖所示：
在wxml文件裡面，搭建結構。其中，tab盒子是tab整體，btns裡面的view是切換按鈕，cons裡面的view是切換的盒子內容。
把切換按鈕btns和內容cons渲染出來。在js文件裡面書寫數據，並且在wxml文件裡面通過wx:for進行列表渲染輸出。
通過彈性布局去書寫樣式。添加cur當前類名去控制當前按鈕的樣式和當前顯示的內容盒子。
注意微信小程序使用的是rpx可以自適應的單位，規定所有屏幕寬度為750rpx，在iPhone6設備屏幕寬度換算是2rpx=1px。
邏輯層添加了active數據控制當前顯示盒子。
wxml要書寫判斷驗證去控制盒子是否有cur類名。
上面表達式表示，如果當前項的索引值index等於數據active，則此項有cur這個類名，否則就沒有。注意cur類名是控制當前按鈕樣式和當前顯示內容盒子的。
有cur這個類名的按鈕會顯示當前的樣式，有cur這個類名的內容盒子是顯示的，但是否有這個類名是通過active這個數據決定的。所以最後我們只需要把active這個數據的值修改成用戶點擊按鈕的索引值即可實現tab切換功能。
首先要給按鈕btn自定義索引值等於循環當前項的index，微信小程序給組件自定義索引值是通過在組件身上添加data-index=」{{index}}」屬性，然後在js裡面即可通過事件對象裡面的e.currentTarget.dataset.index屬性獲取用戶點擊按鈕的索引值。
給按鈕自定義索引值和綁定事件，綁定點擊事件通過給按鈕組件添加屬性bindtap=「函數名」，此處設置函數名為toggle。
把active的值設置為用戶點擊按鈕的索引值，即可實現tab切換功能。
e.currentTarget.dataset.index獲取用戶點擊按鈕的索引值，微信小程序通過this.setData()去修改data裡面的數據內容。
B. 微信小程序頁面返回
返回頁面同時需要刷新數據
當我們頁面跳轉到三級頁面後，點擊左上角的返回按鈕，能夠直接返回到首頁
比如我們現在希望在第四級頁面返回首頁後刷新，我們需要在 onShow 方法中調用 onLoad() 方法
在 data 里定義屬性後，也可以獲取到上個頁面傳過來的值
比如：
從 A 頁面到 B 頁面帶的對象 a = {name: '小明', age: '18'}
從 C 頁面到 B 頁面帶的對象 c = {pname: '小紅', page: '17'}
像這樣對象內部的欄位名稱不一樣，B頁面在拿到該對象後無法解析
在全局中定義變數 e ，在 A 頁面中跳轉前設置
在全局中定義變數 e ,在 C 頁面中跳轉前設置
在 B 頁面 onLoad() 方法中取值
原文： https://blog.csdn.net/uniquehzx/article/details/86011843
C. 微信小程序頁面常用的5種跳轉方法
為了不讓用戶在使用小程序時造成困擾，微信小程序規定頁面路徑只能是 五層 ，所以需盡量避免多層級的交互方式。 而頁面跳轉則涉及到多個頁面層級。
保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。
需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑後可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；
如 'path?key=value&key2=value2'
eg:
wx.navigateTo({
url:'test?id=1'
})
這種跳轉方式默認有返回按鈕，返回到上一個頁面
關閉當前頁面，跳轉到應用內的某個頁面。
需要跳轉的應用內非 tabBar 的頁面的路徑，路徑後可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；
如 'path?key=value&key2=value2'
eg:
wx.redirectTo({
url:'test?id=1'
})
這種跳轉方式默認有返回按鈕，返回到上一個頁面的再上一層
需要跳轉的應用內頁面路徑 , 路徑後可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；
如 'path?key=value&key2=value2'，如果跳轉的頁面路徑是 tabBar 頁面則不能帶參數
eg:
wx.reLaunch({
url:'test?id=1'
})
這種跳轉方式默認沒有返回按鈕，不需要默認返回按鈕的頁面就可以使用這個api了
需要跳轉的 tabBar 頁面的路徑（需在 app.json 的 tabBar 欄位定義的頁面），路徑後不能帶參數
{
"tabBar": {
"list": [{
"pagePath":"index",
"text":"首頁"
},{
"pagePath":"other",
"text":"其他"
}]
}
}
wx.switchTab({
url:'/index'
})
我們需要調轉到tabbar定義的頁面的時候，就需要這個api了。踩過這個坑的人就知道，除了這個api，其他的都不能跳轉到tabar定義過的頁面
關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當前的頁面棧，決定需要返回幾層。
D. 微信小程序---tabBar&頁面跳轉
1、tabBar
在app.json文件中添加tabBar節點。tabBar是小程序客戶端底部或頂部tab欄的實現。
（1）tabBar相關屬性
color：tab上的文字默認顏色，僅支持十六進制顏色。
selectedColor：tab上的文字選中時的顏色，僅支持十六進制顏色。
backgroundColor：tab的背景色，僅支持十六進制顏色。
borderStyle：tabbar上邊框的顏色， 僅支持 black / white。
position：tabBar的位置，默認值是: bottom，僅支持 bottom / top。當 position 為 top 時，不顯示 icon。
custom：自定義tabBar。
"tabBar": {
"color": "#000000",
"selectedColor": "#336699",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"position": "bottom"
}
（2）list
list：tab的列表。
list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。
pagePath：頁面路徑，必須在pages 中先定義。
text：tab 上按鈕文字。
iconPath：圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網路圖片。selectedIconPath：選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網路圖片。
"list": [
{
"text": "首頁",
"pagePath": "pages/index/index",
"iconPath": "assets/icon/home.png",
"selectedIconPath": "assets/icon/home2.png"
},
{
"text": "列表",
"pagePath": "pages/list/list",
"iconPath": "assets/icon/list.png",
"selectedIconPath": "assets/icon/list2.png"
}
]
2、頁面跳轉
（1）跳轉普通頁面
方法① navigator組件
<!-- 跳轉到普通頁，可以通過返回按鈕返回 -->
<navigator url="../detail/detail">到詳情頁</navigator>
方法② navigateTo()方法
navigateTo()方法，用於跳轉普通頁面。
<view bindtap="gotoDetail">到詳情頁</view>
gotoDetail(){
//使用全局api跳轉，navigateTo()方法，用於跳轉普通頁面
wx.navigateTo({
url: '../detail/detail',
})
}
（2）跳轉tabBar頁面
方法① navigator組件
如果要使用navigator組件跳轉tabBar頁面，需要設置open-type="switchTab"。
<!-- 跳轉到tabBar頁面，不可以通過返回按鈕返回。因為跳轉到指定的tabBar頁面後，會關閉其他所有頁面 -->
<navigator url="../list/list" open-type="switchTab">到列表頁</navigator>
方法② switchTab()方法
switchTab()方法，用於跳轉tabBar頁面。
<view bindtap="gotoList">到列表頁</view>
gotoList(){
wx.switchTab({
url: '../list/list',
})
}