# 微信小程序--組件 目錄結構 [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> ```