我們使用app.json文件來對(duì)微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab 等。

如果我們的小程序是一個(gè)多tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），那么我們可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及tab 切換時(shí)顯示的對(duì)應(yīng)頁面。

在微信小程序中，我們想設(shè)置多tab頁的話，可以通過在app.json中設(shè)置tabBar中的list。list中路徑的順序代表了其在tab中顯示的順序。而在page中設(shè)定的tab的路徑中的第一個(gè)路徑，則是頁面初始化完成時(shí)顯示的tab頁。因此，假設(shè)我們想要頁面一初始化完成，切換到第二個(gè)tab頁，可以在page中調(diào)換配置的路徑的順序。 
下面讓我們結(jié)合代碼和圖片一起看看效果。

在app.json中配置如下：

1. {
2. "pages":[
3.  
4. "pages/main/simple/text",
5. "pages/main/advanced/text",
6. "pages/main/mine/text",
7. "pages/main/recharge/text",
8. "pages/logs/logs"
9. ],
10. "window":{
11. "backgroundTextStyle":"light",
12. "navigationBarBackgroundColor": "#444444",
13. "navigationBarTitleText": "文字",
14. "navigationBarTextStyle":"#ffffff"
15. }
16. ,
17. "tabBar": {
18. "color": "#7A7E83",
19. "selectedColor": "#3cc51f",
20. "borderStyle": "black",
21. "backgroundColor": "#ffffff",
22. "list": [
23. {
24. "pagePath": "pages/main/simple/text",
25. "iconPath": "pages/image/basic.png",
26. "selectedIconPath": "pages/image/basic_HL.png",
27. "text": "基礎(chǔ)"
28. },
29. {
30. "pagePath": "pages/main/advanced/text",
31. "iconPath": "pages/image/advance.png",
32. "selectedIconPath": "pages/image/advance_HL.png",
33. "text": "高級(jí)"
34. },
35. {
36. "pagePath": "pages/main/mine/text",
37. "iconPath": "pages/image/mine.png",
38. "selectedIconPath": "pages/image/mine_HL.png",
39. "text": "我的"
40. }
41. ]
42. }
43. }

在tabBar中一起設(shè)定了3個(gè)tab頁，分別是“基礎(chǔ)”、“高級(jí)”、“我的”，分別對(duì)應(yīng)的路徑是：

1. pages/main/simple/text，
2. pages/main/advanced/text，
3. pages/main/mine/text

他的屬性“list”按照上面的配置，顯示的界面如下：

即頁面初始化完成默認(rèn)打開tab是“基礎(chǔ)”頁面。

如果我們將上面的配置中，僅僅對(duì)pages屬性做一下變動(dòng)，即調(diào)換“基礎(chǔ)”頁面和“高級(jí)”頁面的順序

1. "pages":[
2.  
3. "pages/main/advanced/text",
4. "pages/main/simple/text", "pages/main/advanced/text", "pages/main/mine/text", "pages/main/recharge/text", "pages/logs/logs"
5. ]

顯示的界面如下：

從圖1和圖2，我們可以看出，頁面初始化完成后，顯示的是“高級(jí)”頁面。也就是說多tab頁面，在pages屬性中定義的第一個(gè)tab路徑就是頁面初始化完成顯示的界面。

如果僅僅對(duì)原配置的tabBar屬性中的list屬性做變動(dòng)：

1. "tabBar": {
2. "color": "#7A7E83",
3. "selectedColor": "#3cc51f",
4. "borderStyle": "black",
5. "backgroundColor": "#ffffff",
6. "list": [
7.  
8. {
9. "pagePath": "pages/main/advanced/text",
10. "iconPath": "pages/image/advance.png",
11. "selectedIconPath": "pages/image/advance_HL.png",
12. "text": "高級(jí)"
13. },
14. {
15. "pagePath": "pages/main/simple/text",
16. "iconPath": "pages/image/basic.png",
17. "selectedIconPath": "pages/image/basic_HL.png",
18. "text": "基礎(chǔ)"
19. },
20. { "pagePath": "pages/main/mine/text", "iconPath": "pages/image/mine.png", "selectedIconPath":
21. "pages/image/mine_HL.png", "text": "我的" } ] }

將“高級(jí)”頁面和“初級(jí)”頁面的順序調(diào)換一下，效果如下：

對(duì)比圖1和圖3，發(fā)現(xiàn)在底部的tab中，“高級(jí)”排在了“初級(jí)”的前面，而頁面初始化完成顯示的界面還是“基礎(chǔ)”頁面。

總結(jié)：可以在app.json中配置多tab頁面。tabBar中的list中定義的tab頁面路徑的順序代表了在tab中顯示的順序，在pages屬性定義的tab路徑中，第一個(gè)tab頁面路徑，就是頁面初始化完成顯示的頁面。因此，如果我們想讓頁面初始化完成的時(shí)候，就跳轉(zhuǎn)到第二個(gè)tab頁面，可以在pages屬性中將第二個(gè)tab頁面定義在路徑的最前面