創建小程序項目進入時填寫，因需要用上第三方插件，所以要填上開發者的APPID，前往微信公眾平台去注冊一個賬號獲取APPID，在設置=>開發設置可以查看相關appid信息
簡單思路
底部導航添加三個子集，每個子集指向相應的頁面，兩個插件頁面，一個自定義組件頁面
一、設置tabBar
1、找到app.json設置tabBar，若沒有找到tabBar，自己添加並刷新
下面的tabBar是常見的寫法
"tabBar":{ "color":"black", "selectedColor":"#1afa29", "borderStyle":"black",
"backgroundColor":"#fff", "list":[ { "pagePath":"pages/weather/weather", "iconPath":"img/weather.png", "text":"天氣", "selectedIconPath":"img/weather.png" }, { "pagePath": "pages/book/book", "iconPath": "img/book.png", "text": "閱讀", "selectedIconPath": "img/book.png" } ] }
| 屬性 | 類型 | 必填 | 默認值 | 描述 |
|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字默認顏色 | |
| selectedColor | HexColor | 是 | tab 上的文字選中時的顏色 | |
| backgroundColor | HexColor | 是 | tab 的背景色 | |
| borderStyle | String | 否 | black | tabbar上邊框的顏色， 僅支持 black/white |
| list | Array | 是 | tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab | |
| position | String | 否 | bottom | 可選值 bottom、top |
| 屬性 | 類型 | 必填 | 說明 |
|---|---|---|---|
| pagePath | String | 是 | 頁面路徑，必須在 pages 中先定義 |
| text | String | 是 | tab 上按鈕文字 |
| iconPath | String | 是 | 圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px |
| selectedIconPath | String | 是 | 選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px |
注意項
1:必須保證tabBar["list"]里的所有子集屬性pagePath在pages都能找到，而且list第一個子集屬性pagePath值和pages第一個子集值保持一致，否則的話，整個底部導航都不出現
2:跳轉頁面需要注意，使用跳轉方法不恰當會導致跳轉失效（頁面路徑填寫需注意、細心）
用組件<navigator url="tabBar頁面路徑"></navigator>、方法wx.navigateTo({url:"tabBar頁面路徑"})、wx.redirectTo({url:"tabBar頁面路徑"})去跳轉到tabBar的某個頁面，這是會啥鳥動靜都沒有的，要想跳轉到tabBar的頁面，有專門的跳轉方法wx.switchTab({url:"tabBar頁面路徑"})，只會跳轉到tabBar頁面，非tabBar頁面則失效;當然，也可以直接用wx.reLaunch({url:"路徑"})，只要地址填寫正確，任何頁面都能跳轉。每一種跳轉方法都有它的特點，某某總結一下
- wx.navigateTo(Object)：在當前窗口跳轉非tabBar的頁面，可倒回上一個頁面
- wx.redirectTo(Object)：關閉當前頁面，在當前窗口跳轉非tabBar的頁面，不能倒回
- 組件<navigator>：由屬性決定其特點，例如改變屬性redirect值(<navigator url="路徑">點擊跳轉不關閉當前頁面、<navigator url="路徑" redirect=“true”>點擊跳轉關閉當前頁面）
- wx.switchTab(Object)：只能跳轉有tabBar的頁面
- wx.reLaunch(Object)：關閉所有頁面，打開到應用內的某個頁面。帶tabBar頁面路徑不能帶參數，非tabBar頁面可帶參數
二、使用第三方插件
1、前往微信公眾平台，登入賬號密碼，找到設置=>第三方服務=>插件管理，例：某某添加了“天氣預報”和“微信讀書”這兩個插件，審核速度快的把你的老婆都換了，就它兩了
2、添加成功后，點擊插件的詳情，查看開發文檔，要想使用第三方插件，必須知道這些信息：appid、版本號、usingComponents組件名
某某查看插件“附近”的詳情，得到appid、版本號、組件名這些信息
3、找到app.json，設置plugins，例：添加插件“附近”，名字取“nearBy”，version為版本號，provider為插件appID
設置完成后，在小程序編輯器找到“詳情”按鈕，某某的是右上角找到詳情的，查看下插件有沒有添加成功，如果沒有的話，控制台會報出“無特權使用插件”的相關錯誤
4、添加成功后，開始在應用頁面上使用插件了，找到應用頁面的json，例子：
某某找到near.json,設置usingComponents，隨便取個名叫“near-by”，“nearBy”是指app.json那里添加上的名字，group是指插件必要三大信息那里得到的，代碼如下：
"usingComponents":{ "near-by":"plugin://nearBy/group" }
然后在near.wxml添加自定義組件near-by
插件“附近”完成后，以同上做法去添加插件“城市選擇”，相信添加完畢后，保存刷新，有錯的找錯，解決不了的找百度，或者在下面評論問某某也是可以
三、自定義組件
1、創建文件夾為list，在文件夾list中創建component（注意：鼠標移到list，點擊右鍵，進入新建，選擇component鍵），list.json文件將 component 字段設為 true 才可以為自定義組件使用，否則無效
list.json
{ "component": true }
list.wxml
<text class="red"> 我是自定義的組件 </text> <text class="red"> 我是自定義的組件 </text> <text class="red"> 我是自定義的組件 </text>
list.wxss
.red{ color:red; font-weight:900; }
還有需要注意的list.wxss中不應該使用ID選擇器、屬性選擇器和標簽名選擇器
2、開始在應用頁面使用自定義組件了，例：custom文件夾
custom.json（隨便定義組件名，某某取my-list，然后填寫路徑）
{ "usingComponents": { "my-list": "../../list/list" } }
custom.wxml
<my-list />
刷新吧，到這里就應該結束了，沒有結束的話，就是過程中發生了錯誤或者某某寫的還是不完善，夠亂，也罷，有錯的找錯，解決不了的問百度，有耐心的也可以評論問
要源代碼的，在這：https://github.com/murenziwei/wxTest