一、前言
小程序中的組件其實(shí)相當(dāng)于網(wǎng)頁(yè)中的HTML標(biāo)簽，只不過(guò)標(biāo)簽名字不一樣，接下來(lái)我們一起來(lái)看下微信小程序都給我們提供了哪些組件吧。
二、容器組件
可以存放其它組件的容器組件，目前主要有如下幾種：
<pre spellcheck="false" lang="cmd" cid="n7" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">cover-image覆蓋在原生組件之上的圖片視圖
cover-view覆蓋在原生組件之上的文本視圖
match-media 匹配檢測(cè)節(jié)點(diǎn)
movable-area的可移動(dòng)區(qū)域
movable-view可移動(dòng)的視圖容器，在頁(yè)面中可以拖拽滑動(dòng)
page-container頁(yè)面容器
scroll-view可滾動(dòng)視圖區(qū)域
share-element共享元素
swiper滑塊視圖容器
swiper-item僅可放置在swiper組件中，寬高自動(dòng)設(shè)置為100%
view視圖容器</pre>
這里小編來(lái)和大家說(shuō)說(shuō)常用的一些容器組件。
三、基礎(chǔ)內(nèi)容組件
這里給我們提供了常見(jiàn)的幾種圖標(biāo)還有進(jìn)度條，如果你想用HTML中的標(biāo)簽請(qǐng)?jiān)诟晃谋窘M件中使用，另外，小程序中的文本組件是text，如下：
<pre spellcheck="false" lang="cmd" cid="n13" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">icon圖標(biāo)
progress進(jìn)度條
rich-text富文本
text文本</pre>
四、表單組件
<pre spellcheck="false" lang="cmd" cid="n17" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">button按鈕
checkbox多選項(xiàng)目
checkbox-group多項(xiàng)選擇器，內(nèi)部由多個(gè)checkbox組成
editor富文本編輯器，可以對(duì)圖片、文字進(jìn)行編輯
form表單
input輸入框
keyboard-accessory設(shè)置 input / textarea 聚焦時(shí)鍵盤(pán)上方 cover-view / cover-image 工具欄視圖
label用來(lái)改進(jìn)表單組件的可用性
picker從底部彈起的滾動(dòng)選擇器
picker-view嵌入頁(yè)面的滾動(dòng)選擇器
picker-view-column滾動(dòng)選擇器子項(xiàng)
radio單選項(xiàng)目
radio-group單項(xiàng)選擇器，內(nèi)部由多個(gè) radio 組成
slider滑動(dòng)選擇器
switch開(kāi)關(guān)選擇器
textarea多行輸入框</pre>
五、導(dǎo)航組件
本項(xiàng)目?jī)?nèi)的頁(yè)面跳轉(zhuǎn)，不過(guò)不支持外部鏈接的跳轉(zhuǎn)。
<pre spellcheck="false" lang="cmd" cid="n22" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">functional-page-navigator僅在插件中有效，用于跳轉(zhuǎn)到插件功能頁(yè)
navigator頁(yè)面鏈接</pre>
六、媒體組件
<pre spellcheck="false" lang="cmd" cid="n26" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">audio音頻
camera系統(tǒng)相機(jī)
image圖片
live-player實(shí)時(shí)音視頻播放（v2.9.1 起支持同層渲染）
live-pusher實(shí)時(shí)音視頻錄制（v2.9.1 起支持同層渲染）
video視頻（v2.4.0 起支持同層渲染）
voip-room多人音視頻對(duì)話(huà)</pre>
七、地圖
<pre spellcheck="false" lang="cmd" cid="n30" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">map地圖（v2.7.0 起支持同層渲染，相關(guān)api wx.createMapContext</pre>
八、畫(huà)布
<pre spellcheck="false" lang="" cid="n33" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">canvas 畫(huà)布</pre>
九、開(kāi)放組件
<pre spellcheck="false" lang="cmd" cid="n37" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">web-view承載網(wǎng)頁(yè)的容器
adBanner 廣告
ad-custom原生模板 廣告
official-account公眾號(hào)關(guān)注組件
open-data用于展示微信開(kāi)放的數(shù)據(jù)</pre>
專(zhuān)門(mén)用來(lái)做廣告或者獲取小程序的用戶(hù)的數(shù)據(jù)。
十、原生組件
<pre spellcheck="false" lang="cmd" cid="n41" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">native-component小程序中的部分組件是由客戶(hù)端創(chuàng)建的原生組件</pre>
小程序的原生組件為：
camera
canvas
input（僅在focus時(shí)表現(xiàn)為原生組件）
live-player
live-pusher
map
textarea
video
原生組件的層級(jí)是最高的，所以頁(yè)面中的其他組件無(wú)論設(shè)置 z-index 為多少，都無(wú)法蓋在原生組件上。原生組件還無(wú)法在 picker-view中使用。
原生組件的事件監(jiān)聽(tīng)不能使用 bind:eventname 的寫(xiě)法，只支持 bindeventname。原生組件也不支持 catch 和 capture 的事件綁定方式。原生組件會(huì)遮擋 vConsole 彈出的調(diào)試面板。為了解決原生組件層級(jí)最高的限制。小程序?qū)ｉT(mén)提供了 cover-view和 cover-image組件，可以覆蓋在部分原生組件上面。這兩個(gè)組件也是原生組件，但是使用限制與其他原生組件有所不同。
十一、無(wú)障礙訪(fǎng)問(wèn)
<pre spellcheck="false" lang="cmd" cid="n63" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">aria-component滿(mǎn)足視障人士對(duì)于小程序的訪(fǎng)問(wèn)需求</pre>
十二、導(dǎo)航欄
<pre spellcheck="false" lang="cmd" cid="n66" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">navigation-bar 頁(yè)面導(dǎo)航條配置節(jié)點(diǎn)，用于指定導(dǎo)航欄的一些屬性</pre>
十三、頁(yè)面屬性配置節(jié)點(diǎn)
<pre spellcheck="false" lang="cmd" cid="n69" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">page-meta頁(yè)面屬性配置節(jié)點(diǎn)，用于指定頁(yè)面的一些屬性、監(jiān)聽(tīng)頁(yè)面事件</pre>
十四、可視化
如果你覺(jué)得一個(gè)個(gè)寫(xiě)組件很麻煩，那么你可以使用可視化的方式來(lái)使用組件，如圖：
這樣可以幫助我們快速構(gòu)建頁(yè)面。
十五、ui組件
雖然微信給我們提供了一些組件，但是這些組件并不是特別美觀(guān)，于是乎，小編決定使用一些已經(jīng)寫(xiě)好了三方的組件，這里推薦騰訊團(tuán)隊(duì)做的一個(gè)ui組件庫(kù)-----WeUI。這里小編已經(jīng)下載好了，給大家一個(gè)地址：https://url18.ctfile.com/f/7715018-519360361-ee1b16（訪(fǎng)問(wèn)密碼：6511），下載好了之后，我們將其放入到項(xiàng)目中去，然后添加到項(xiàng)目的全局樣式文件，如圖：
然后就可以使用了，如圖：
雖然說(shuō)weui的組件做的還不錯(cuò)，基本上不用我們自己寫(xiě)樣式，但是文檔寫(xiě)的不適合小白學(xué)習(xí)，所以這里小編給大家推薦一款新的小程序組件庫(kù)，他就是iview weapp，下載地址：https://url18.ctfile.com/f/7715018-519360357-566602（訪(fǎng)問(wèn)密碼：6511），由于iview weapp和weui的樣式文件不一樣，因此我們只有一個(gè)個(gè)導(dǎo)入，需要什么導(dǎo)入什么，首先打開(kāi)頁(yè)面配置文件，如下：
然后使用自定義的組件名來(lái)使用這個(gè)組件，如下：
注：這里我們需要?jiǎng)h除example和build，否則會(huì)報(bào)錯(cuò)。
十六、自定義組件
在實(shí)際開(kāi)發(fā)中，并不是所有的組件都能滿(mǎn)足我們的需求，我們總有需要自己寫(xiě)組件的時(shí)候，微信小程序可以讓我們輕松實(shí)現(xiàn)自定義組件，首先我們創(chuàng)建一個(gè)自定義的組件文件夾，然后分別寫(xiě)入頁(yè)面，樣式和腳本，如圖：
然后我們將該組件導(dǎo)入到我們要應(yīng)用到該組件的頁(yè)面配置文件中去，如圖：
然后引入該組件bb，如圖：
十七、數(shù)據(jù)傳遞
很多時(shí)候，咱們組件中的數(shù)據(jù)并不全是靜態(tài)的，有的時(shí)候也要做成動(dòng)態(tài)的響應(yīng)式的組件，這個(gè)時(shí)候需要我們進(jìn)行數(shù)據(jù)傳遞，首先我們需要在頁(yè)面文件夾的js文件中去添加需要傳遞的數(shù)據(jù)的鍵值對(duì)，如圖：
十八、條件渲染
還是使用上面的d1數(shù)據(jù)，條件渲染是將我們所設(shè)置的條件進(jìn)行對(duì)比，哪個(gè)組件的條件符合就顯示哪個(gè)組件，如圖：
十九、列表渲染
主要是通過(guò)遍歷的方式來(lái)輸出一些數(shù)組字典對(duì)象，如下：
二十、模板
使用模板增加了代碼的復(fù)用性，想用哪個(gè)就用哪個(gè)，如圖：
這里的模板中的data屬性我們也可以直接在里面給他賦值，如圖：
二十一、引入模板
雖然我們可以自己制作模板，但是很多時(shí)候?yàn)榱舜a的簡(jiǎn)潔性，我們需要進(jìn)行拆分代碼，這個(gè)時(shí)候就可以使用引入的概念，在此之前，我們需要寫(xiě)一個(gè)模板文件，如圖：
然后導(dǎo)入它，如圖：
當(dāng)然，除此之外還有一個(gè)更簡(jiǎn)單的導(dǎo)入方法，如圖：
可以看到，template中的內(nèi)容他是不會(huì)包含進(jìn)去的，也就是說(shuō)他只會(huì)引入除模板以外的組件和內(nèi)容。
二十二、總結(jié)
本文主要講到了關(guān)于微信小程序中的組件的應(yīng)用，其實(shí)也就是我們熟知的頁(yè)面標(biāo)簽，通過(guò)他們我們可以在頁(yè)面中嵌入一些元素，由于現(xiàn)在很多三方組件的崛起，建議大家盡量用三方框架去做。感興趣請(qǐng)關(guān)注小編公眾號(hào)“簡(jiǎn)易編程網(wǎng)”。
注：文中組件的來(lái)歷及解釋部分參考微信開(kāi)放文檔
