# 微信小程序--組件 目錄結構
[toc]
---
## 組件導讀
<table>
<tr>
<td>分組</td>
<td>組件名</td>
<td>描述</td>
</tr>
<tr>
<td rowspan="8">視圖容器</td>
<td>movable-view</td>
<td>可移動的視圖容器,在頁面中可以拖拽滑動</td>
</tr>
<tr>
<td>movable-area</td>
<td>movable-view的可移動區域</td>
</tr>
<tr>
<td>cover-image</td>
<td>覆蓋在原生組件之上的圖片視圖</td>
</tr>
<tr>
<td>cover-view</td>
<td>覆蓋在原生組件之上的文本視圖</td>
</tr>
<tr>
<td>scroll-view</td>
<td>可滾動視圖區域</td>
</tr>
<tr>
<td>swiper</td>
<td>滑塊視圖容器</td>
</tr>
<tr>
<td>swiper-item</td>
<td>僅可放置在swiper組件中,寬高自動設置為100%</td>
</tr>
<tr>
<td>view</td>
<td>視圖容器</td>
</tr>
<tr>
<td rowspan="4">基礎容器</td>
<td>icon</td>
<td>圖標</td>
</tr>
<tr>
<td>progress</td>
<td>進度條</td>
</tr>
<tr>
<td>rich-text</td>
<td>富文本</td>
</tr>
<tr>
<td>text</td>
<td>文本</td>
</tr>
<tr>
<td rowspan="15">表單組件</td>
<td>button</td>
<td>按鈕</td>
</tr>
<tr>
<td>checkbox-group</td>
<td>多選框組</td>
</tr>
<tr>
<td>checkbox</td>
<td>多選框</td>
</tr>
<tr>
<td>editor</td>
<td>富文本編輯器,可以對圖片、文字進行編輯</td>
</tr>
<tr>
<td>form</td>
<td>表單</td>
</tr>
<tr>
<td>input</td>
<td>輸入框</td>
</tr>
<tr>
<td>label</td>
<td>用來改進表單組件的可用性</td>
</tr>
<tr>
<td>picker</td>
<td>從底部彈起的滾動選擇器</td>
</tr>
<tr>
<td>picker-view</td>
<td>嵌入頁面的滾動選擇器</td>
</tr>
<tr>
<td>picker-view-column</td>
<td>滾動選擇器子項。僅可放置于picker-view中</td>
</tr>
<tr>
<td>radio-group</td>
<td>單項選擇器</td>
</tr>
<tr>
<td>radio</td>
<td>單選選擇</td>
</tr>
<tr>
<td>slider</td>
<td>滑動選擇器</td>
</tr>
<tr>
<td>switch</td>
<td>開關選擇器</td>
</tr>
<tr>
<td>textarea</td>
<td>多行輸入框</td>
</tr>
<tr>
<td rowspan="2">導航</td>
<td>navigator</td>
<td>頁面鏈接</td>
</tr>
<tr>
<td>functional-page-navigator</td>
<td>僅在插件中有效,用于跳轉到插件功能頁</td>
</tr>
<tr>
<td rowspan="6">媒體組件</td>
<td>image</td>
<td>圖片</td>
</tr>
<tr>
<td>audio</td>
<td>音頻</td>
</tr>
<tr>
<td>video</td>
<td>視頻</td>
</tr>
<tr>
<td>camera</td>
<td>系統相機</td>
</tr>
<tr>
<td>live-player</td>
<td>實時音視頻播放</td>
</tr>
<tr>
<td>live-pusher</td>
<td>實時音視頻錄制</td>
</tr>
<tr>
<td>地圖</td>
<td>map</td>
<td>地圖</td>
</tr>
<tr>
<td>畫布</td>
<td>canvas</td>
<td>畫布</td>
</tr>
<tr>
<td rowspan="4">開放能力</td>
<td>ad</td>
<td>Banner 廣告</td>
</tr>
<tr>
<td>official-account</td>
<td>公眾號關注組件</td>
</tr>
<tr>
<td>open-data</td>
<td>用于展示微信開放的數據</td>
</tr>
<tr>
<td>web-view</td>
<td>承載網頁的容器</td>
</tr>
</table>
---
## 微信小程序--組件
> 組件寫在 `wxml` 文件中
---
### 一、視圖容器
#### 1、`view` 視圖容器
* 可以把view 當成html里的div標簽
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
hover-class|string|否|指定按下去的樣式類。當 hover-class="none" 時,沒有點擊態效果
hover-stop-propagation|boolean|否|指定是否阻止本節點的祖先節點出現點擊態
hover-start-time|number|否|按住后多久出現點擊態,單位毫秒
hover-stay-time|number|否|手指松開后點擊態保留時間,單位毫秒
> wxml示例:
```html
<view hover-class="a">我是歐陽克</view>
<view hover-class="a">我是歐陽鋒
<view hover-class="a" hover-stop-propagation>我是歐陽克</view>
</view>
<view hover-class="a" hover-stop-propagation hover-start-time="1000" hover-stay-time="5000">我是歐陽克</view>
```
> wxss示例:
```php
.a{
color:red;
}
```
---
### 二、基礎內容
#### 1、 `icon` 圖標
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
type|boolean|是|icon的類型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size|boolean|否|icon的大小
color|number|否|icon的顏色,同css的color
```html
<icon type="success" />
<icon type="success_no_circle" />
<icon type="info" />
<icon type="warn" />
<icon type="waiting" />
<icon type="cancel" />
<icon type="download" />
<icon type="search" />
<icon type="clear" />
<icon type="success" size="100rpx"/>
<icon type="success" color="orange"/>
```
#### 2、 `progress` 進度條
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
percent|number|否|百分比0~100
show-info|boolean|否|在進度條右側顯示百分比
border-radius|number/string|否|圓角大小
font-size|number/string|否|右側百分比字體大小
stroke-width|number/string|否|進度條線的寬度
color|string|否|進度條顏色(請使用activeColor)
activeColor|string|否|已選擇的進度條的顏色
backgroundColor|string|否|未選擇的進度條的顏色
active|boolean|否|進度條從左往右的動畫
active-mode|string|否|backwards: 動畫從頭播;forwards:動畫從上次結束點接著播
bindactiveend|eventhandle|否|動畫完成事件
```html
<progress percent="5" />
<progress percent="10" show-info />
<progress percent="15" show-info border-radius="10" />
<progress percent="20" show-info border-radius="10" font-size="60rpx;" />
<progress percent="25" show-info border-radius="10" font-size="60rpx;" stroke-width="20" />
<progress percent="30" color="red" />
<progress percent="35" activeColor="pink" />
<progress percent="40" activeColor="pink" backgroundColor="green" />
<progress percent="45" activeColor="pink" backgroundColor="green" />
<progress percent="50" active />
<progress percent="55" active active-mode="backwards" />
<progress percent="60" active active-mode="backwards" bindactiveend="a"/>
```
#### 3、`text` 文本
**屬性**|**類型**|**默認值**|**必填**|**描述**
---|---|---|---|---
selectable|boolean|false|否|文本是否可選
space|string||否|顯示連續空格
decode|boolean|false|否|是否解碼
> space 的合法值
**屬性**|**描述**
---|---
ensp|中文字符空格一半大小
emsp|中文字符空格大小
nbsp|根據字體設置的空格大小
```html
<text>歐陽克,是金庸武俠小說《射雕英雄傳》里的人物,面目俊雅,英氣逼人。生性好色,擁有眾多姬妾,受完顏洪烈聘請來盜取《武穆遺書》,曾受到江南七怪、洪七公等正派的攻擊。后來在荒島因要殺害洪七公而被黃蓉使計引開用大巖石壓斷雙腿 ,后因在牛家村曲家酒館調戲穆念慈,被楊康發現憤怒之下用鐵槍頭所殺。</text>
<text selectable="true" space="nbsp" decode="true">歐陽克,是金庸武俠小說《射雕英雄傳》里的人物, 面目俊雅,英氣逼人。生性好色,擁有眾多姬妾,受完顏洪烈聘請來盜取《武穆遺書》, 曾受到江南七怪、洪七公等正派的攻擊。后來在荒島因要殺害洪七公而被黃蓉使計引開用大巖石壓斷雙腿 ,后因在牛家村曲家酒館調戲穆念慈,被楊康發現憤怒之下用鐵槍頭所殺。</text>
```
---
### 三、表單組件
#### 1、`button` 按鈕
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
size|string|否|按鈕的大小
type|string|否|按鈕的樣式類型
plain|boolean|否|按鈕是否鏤空,背景色透明
disabled|boolean|否|是否禁用
loading|boolean|否|名稱前是否帶 loading 圖標
> size 的合法值
**屬性**|**描述**
---|---
default|默認大小
mini|小尺寸
> type 的合法值
**屬性**|**描述**
---|---
default|白色
primary|綠色
warn|紅色
```html
<button size="default">默認尺寸</button>
<button size="mini">小尺寸</button>
<button type="default">默認白色</button>
<button type="warn">紅色</button>
<button type="primary">綠色</button>
<button type="primary" plain="true">鏤空按鈕</button>
<button type="primary" disabled="true">禁用按鈕</button>
<button type="primary" loading="true">帶等待圖標</button>
```
#### 2、`checkbox-group` 多選框組
> 多項選擇器,內部由多個checkbox組成,示例和checkbox寫在一起
#### 3、`checkbox` 多選框
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
value|string|否|選擇框的值
disabled|boolean|否|是否禁用
checked|boolean|否|當前是否選中,可用來設置默認選中
color|string|否|checkbox的顏色,同css的color
```html
<checkbox-group>
<checkbox value="1" checked />歐陽克
<checkbox value="2" color="red" />黃蓉
<checkbox value="3" disabled />郭靖
</checkbox-group>
```
#### 4、`input` 輸入框
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
value|string|是|輸入框的初始內容
type|string|否|input 的類型
password|boolean|否|是否是密碼類型
placeholder|string|是|輸入框為空時占位符
placeholder-style|string|是|指定 placeholder 的樣式
placeholder-class|string|否|指定 placeholder 的樣式類
disabled|string|否|是否禁用
maxlength|number|否|最大輸入長度,設置為 -1 的時候不限制最大長度
confirm-type|string|否|設置鍵盤右下角按鈕的文字,僅在type='text'時生效
> type 的合法值
**屬性**|**描述**
---|---
text|文本輸入鍵盤
number|數字輸入鍵盤
idcard|身份證輸入鍵盤
digit|帶小數點的數字鍵盤
> confirm-type 的合法值
**屬性**|**描述**
---|---
send|右下角按鈕為“發送”
search|右下角按鈕為“搜索”
next|右下角按鈕為“下一個”
go|右下角按鈕為“前往”
done|右下角按鈕為“完成”
```html
// 在手機上,輸入框只能彈出對應的輸入法
<input value="這是一個輸入框"/>
<input value="這是一個數字輸入框" type="number"/>
<input value="這是一個身份證輸入框" type="idcard"/>
<input value="這是一個帶小數的數字輸入框" type="digit"/>
<input value="這是一個帶小數的數字輸入框" password="true"/>
<input placeholder="這是一個帶提示的輸入框" placeholder-style="color:red"/>
<input value="這是一個禁用的輸入框" disabled/>
<input value="這是一個只能輸入10個字的輸入框" maxlength="10"/>
<input value="這是一個搜索輸入框" confirm-type="search"/>
```
#### 5、`picker` 從底部彈起的滾動選擇器
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
mode|string|否|選擇器類型
disabled|boolean|否|是否禁用
> mode 的合法值
**屬性**|**描述**
---|---
selector|普通選擇器
multiSelector|多列選擇器
time|時間選擇器
date|日期選擇器
region|省市區選擇器
##### selector 普通選擇器
**屬性**|**類型**|**描述**
---|---|---
range|string|mode 為 selector 或 multiSelector 時,range 有效
range-key|boolean|選擇器顯示內容
value|boolean|表示選擇了 range 中的第幾個(下標從 0 開始)
```html
<picker value="1" range="{{['歐陽克','黃蓉','郭靖']}}">
<view>請選擇:</view>
</picker>
```
##### multiSelector 多列選擇器
```html
<picker mode="multiSelector" value="1" range="{{[['歐陽克','黃蓉','郭靖'],['帥','美','傻'],['一級武功','二級武功','殘廢']]}}">
<view>請選擇:</view>
</picker>
```
##### time 時間選擇器
**屬性**|**類型**|**描述**
---|---|---
value|string|表示選中的時間,格式為"hh:mm"
start|string|表示有效時間范圍的開始,字符串格式為"hh:mm"
end|string|表示有效時間范圍的結束,字符串格式為"hh:mm"
```html
<picker mode="time" value="10" start="10:00" end="15:00">
<view>請選擇:</view>
</picker>
```
##### date 日期選擇器
**屬性**|**類型**|**描述**
---|---|---
value|string|表示選中的日期,格式為"YYYY-MM-DD"
start|string|表示有效日期范圍的開始,字符串格式為"YYYY-MM-DD"
end|string|表示有效日期范圍的結束,字符串格式為"YYYY-MM-DD"
fields|string|有效值 year,month,day 表示選擇器的粒度
```html
<picker mode="date" value="10" start="2018-10-10" end="2019-10-10" fields="day">
<view>請選擇:</view>
</picker>
```
##### region 省市區選擇器
**屬性**|**類型**|**描述**
---|---|---
value|array|表示選中的省市區,默認選中每一列的第一個值
```html
<picker mode="region" value="{{['廣東省', '廣州市', '海珠區']}}">
<view>請選擇:</view>
</picker>
```
---
#### 6、`picker-view` 嵌入頁面的滾動選擇器
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
value|Array|否|選擇器類型
indicator-style|string|否|設置選擇器中間選中框的樣式
indicator-class|string|否|設置選擇器中間選中框的類名
```html
<picker-view value="{{[1,1,1]}}" indicator-style="height: 50px;" style="width: 100%; height: 300px;">
<picker-view-column>
<view style="line-height: 50px">歐陽克</view>
<view style="line-height: 50px">黃蓉</view>
<view style="line-height: 50px">郭靖</view>
<view style="line-height: 50px">楊康</view>
</picker-view-column>
<picker-view-column>
<view style="line-height: 50px">帥</view>
<view style="line-height: 50px">美</view>
<view style="line-height: 50px">傻</view>
<view style="line-height: 50px">丑</view>
</picker-view-column>
<picker-view-column>
<view style="line-height: 50px">1</view>
<view style="line-height: 50px">2</view>
<view style="line-height: 50px">3</view>
<view style="line-height: 50px">4</view>
</picker-view-column>
</picker-view>
```
#### 7、`radio-group` 單項選擇器組
> 單項選擇器組,內部由多個radio組成。示例和radio寫在一起
#### 8、`radio` 單項選擇器
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
value|string|否|選擇器的值
checked|boolean|否|當前是否選中
disabled|boolean|否|是否禁用
color|string|否|radio的顏色,同css的color
```html
<radio-group>
<radio value="1" checked="true" />歐陽克
<radio value="2" color="red" />黃蓉
<radio value="3" />郭靖
<radio value="4" />楊康
</radio-group>
```
#### 9、`slider` 滑動選擇器
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
min|number|否|最小值
max|number|否|最大值
step|number|否|步長,取值必須大于 0,并且可被(max - min)整除
disabled|boolean|否|是否禁用
value|number|否|當前取值
activeColor|color|否|已選擇的顏色
backgroundColor|color|否|背景條的顏色
block-size|number|否|滑塊的大小,取值范圍為 12 - 28
block-color|color|否|滑塊的顏色
show-value|boolean|否|是否顯示當前 value
```html
<slider min="10" max="30" show-value="true" />
<slider step="10" show-value="true" />
<slider step="10" disabled="true" show-value="true" />
<slider step="10" value="30" show-value="true" />
<slider step="10" activeColor="red" show-value="true" />
<slider step="10" activeColor="red" backgroundColor="green" show-value="true" />
<slider step="10" block-size="20" show-value="true" />
<slider step="10" block-size="12" block-color="blue" show-value="true" />
<slider step="10" block-size="14" show-value="true" />
```
#### 10、`switch` 開關選擇器
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
checked|boolean|否|是否選中
disabled|boolean|否|是否禁用
type|string|否|樣式,有效值:switch, checkbox
color|string|否|switch 的顏色,同 css 的 color
```html
<switch checked />歐陽克
<switch disabled />黃蓉
<switch type="checkbox" />郭靖
<switch color="red" />楊康
```
#### 11、`textarea` 多行輸入框
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
value|string|否|輸入框的內容
placeholder|string|否|輸入框為空時占位符
placeholder-style|string|否|指定 placeholder 的樣式,目前僅支持color,font-size和font-weight
placeholder-class|string|否|指定 placeholder 的樣式類
disabled|boolean|否|是否禁用
maxlength|number|否|最大輸入長度,設置為 -1 的時候不限制最大長度
auto-height|boolean|否|是否自動增高,設置auto-height時,style.height不生效
```html
<textarea value="這是一個輸入框" />
<textarea placeholder="紅色字體" placeholder-style="color:red" />
<textarea disabled placeholder="禁用的輸入框" />
<textarea maxlength="3" placeholder="只能輸入3個字" />
<textarea auto-height="true" placeholder="自動增高的輸入框" />
```
---
### 四、媒體組件
#### 1、`image` 圖片
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
src|string|否|圖片資源地址
mode|string|否|圖片裁剪、縮放的模式
lazy-load|boolean|否|圖片懶加載,在即將進入一定范圍(上下三屏)時才開始加載
show-menu-by-longpress|boolean|否|開啟長按圖片顯示識別小程序碼菜單
> mode 的合法值
**屬性**|**描述**
---|---
scaleToFill|縮放模式,不保持縱橫比縮放圖片,使圖片的寬高完全拉伸至填滿 image 元素
aspectFit|縮放模式,保持縱橫比縮放圖片,使圖片的長邊能完全顯示出來。也就是說,可以完整地將圖片顯示出來
aspectFill|縮放模式,保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來。也就是說,圖片通常只在水平或垂直方向是完整的,另一個方向將會發生截取
widthFix|縮放模式,寬度不變,高度自動變化,保持原圖寬高比不變
top|裁剪模式,不縮放圖片,只顯示圖片的頂部區域
bottom|裁剪模式,不縮放圖片,只顯示圖片的底部區域
center|裁剪模式,不縮放圖片,只顯示圖片的中間區域
left|裁剪模式,不縮放圖片,只顯示圖片的左邊區域
right|裁剪模式,不縮放圖片,只顯示圖片的右邊區域
top left|裁剪模式,不縮放圖片,只顯示圖片的左上邊區域
top right|裁剪模式,不縮放圖片,只顯示圖片的右上邊區域
bottom left|裁剪模式,不縮放圖片,只顯示圖片的左下邊區域
bottom right|裁剪模式,不縮放圖片,只顯示圖片的右下邊區域
```html
<image style="width: 200px; height: 200px;" mode="scaleToFill" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="aspectFit" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="aspectFill" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="widthFix" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="top" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="bottom" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="center" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="left" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="right" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="top left" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="top right" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="bottom left" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
<image style="width: 200px; height: 200px;" mode="bottom right" src="http://img.php.cn/upload/avatar/000/171/829/5bea75b792289668.jpg"></image>
```
---
### 五、導航
#### 1、`navigator` 頁面鏈接
**屬性**|**類型**|**必填**|**描述**
---|---|---|---
url|string|否|當前小程序內的跳轉鏈接
open-type|string|否|跳轉方式
delta|number|否|當 open-type 為 'navigateBack' 時有效,表示回退的層數,最多10層
hover-class|string|否|指定點擊時的樣式類,當hover-class="none"時,沒有點擊態效果
hover-stop-propagation|boolean|否|指定是否阻止本節點的祖先節點出現點擊態
hover-start-time|number|否|按住后多久出現點擊態,單位毫秒
hover-stay-time|number|否|手指松開后點擊態保留時間,單位毫秒
> open-type 合法值
**屬性**|**描述**
---|---
navigate|保留當前頁面,跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面
redirect|關閉當前頁面,跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面
switchTab|跳轉到 tabBar 頁面,并關閉其他所有非 tabBar 頁面
reLaunch|關閉所有頁面,打開到應用內的某個頁面
navigateBack|關閉當前頁面,返回上一頁面或多級頁面
```html
<navigator url="2?title=navigate" hover-class="a" hover-stop-propagation="true" hover-start-time="5000" hover-stay-time="5000">跳轉到新頁面</navigator>
<navigator url="3" open-type="redirect">跳轉到新頁面</navigator>
<navigator url="1" open-type="switchTab">跳轉到新頁面</navigator>
<navigator url="4" open-type="reLaunch">跳轉到新頁面</navigator>
<navigator open-type="navigateBack" navigateBack="10">跳轉到新頁面</navigator>
```
- 序言
- PHP基礎
- 認識PHP
- 環境安裝
- PHP語法
- 流程控制
- PHP數組
- PHP函數
- PHP類與對象
- PHP命名空間
- PHP7新特性
- PHP方法庫
- PHP交互
- 前后端交互
- 項目常規開發流程
- MySQL數據庫
- 會話控制
- Ajax分頁技術
- 細說函數
- 類與對象
- 對象進階
- 類與對象進階
- OOP面向對象
- 設計模式
- 路由與模板引擎
- 異常類
- PHP爬蟲
- PHP抓取函數
- PHP匹配函數
- 正則表達式
- PHP字符串函數
- 抓取實戰
- PHP接口
- 了解接口
- PHP插件
- PHPSpreadsheet
- ThinkPHP6
- 安裝
- 架構
- 數據庫
- 數據庫操作
- 視圖
- 模版
- 模型
- 雜項
- 命令行
- 交互
- 微信小程序
- 介紹
- 配置
- 組件
- 交互
- API
- 其他知識
- 百度小程序
- 介紹
- 配置
- 組件
- 交互
- API
- 其他知識
- Linux
- 服務器上線流程
- 安裝svn
- MySQL
- 認識MySQL
- MySQL函數
- 雜項
- composer依賴管理工具