① 微信小程序_組件
1.基礎組件：
什麼是組件：
<ul>
<li>組件是視圖層的基本組成單元。</li>
<li>組件自帶一些功能與微信風格的樣式。</li>
<li>一個組件通常包括開始標簽
和結束標簽
，屬性
用來修飾這個組件，內容
在兩個標簽之內。</li>
</ul>
2.屬性類型
<ul>
<li>Boolean 布爾值 組件寫上該屬性，不管該屬性等於什麼，其值都為true
，只有組件上沒有寫該屬性時，屬性值才為false
。如果屬性值為變數，變數的值會被轉換為Boolean類型</li>
<li>Number 數字 1
, 2.5</li>
<li>String 字元串 "string"</li>
<li>Array 數組 [ 1, "string" ] </li>
<li>Object 對象 { key: value } </li>
<li>EventHandler 事件處理函數名 "handlerName"
是 Page中定義的事件處理函數名</li>
<li>Any 任意屬性 </li>
</ul>
3.共同屬性類型
id , class , style , hidden , data-* , bind* / catch*
4.特殊屬性
幾乎所有組件都有各自定義的屬性，可以對該組件的功能或樣式進行修飾
5.組件列表
基礎組件分為以下八大類：
視圖容器(View Container)：
view 視圖容器 , scroll-view 可滾動視圖容器, swiper 滑塊視圖容器
基礎內容(Basic Content)：
icon 圖標, text 文字, progress 進度條
表單(Form)：
button 按鈕, form 表單， input 輸入框， checkbox 多想選擇器, radio 單選器， picker 列表選擇器, slider 滾動選擇器, switch 開關選擇器, label 標簽.
操作反饋（Interaction）
action-sheet 上拉菜單
modal 模態彈窗
toast 消息提示框
loading 載入提示符
導航Navigation
navigator 應用鏈接
多媒體(Media)
audio 音頻, image 圖片， video 視頻
** 地圖 **
map 地圖
畫布Canvas
canvas 畫布
flex: vt.折曲，使收縮； vi.玩去，收縮
② 微信小程序---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',
})
}
③ 微信小程序ui框架有哪些
微信小程序開發，是目前火爆的開發方式，也是適應中小企業快速解決的一個方案。選擇一個合適自己的開發UI框架，能夠讓自己開發速度提升數倍。
推薦兩個小程序UI框架：
WeUI
WeUI是由微信官方設計團隊分別支持微信H5網頁和微信原生小程序的開源UI組件
ColorUI
ColorUI是開源且支持原生小程序的UI組件，由於我目前在幫朋友改一個原生的微信小程序，所以就選擇了這款開源組件。
④ 微信小程序使用iconfont及引入vant-icon使用iconfont
（此步驟時可以精簡文件，只復制保留iconfont.wxss文件到assets/iconfont文件友激稿下，其餘文件刪好孝除，依然會正常顯示圖標）
准備工作到此已經完成，接下來鉛譽進入項目配置使用；
可以使用view text等標簽引入iconfont；
頁面效果：
其中：
引入VantUI組件內容可參考 VantUI官網快速上手 進行配置；
頁面效果：