設定tabBar、使用第三方外掛和自定義元件使用簡單例項
建立小程式專案進入時填寫，因需要用上第三方外掛，所以要填上開發者的APPID，前往 ofollow,noindex">微信公眾平臺 去註冊一個賬號獲取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