第9章 微信小程序的組件

第9章微信小程序的組件小程序組件介紹視圖容器組件基礎(chǔ)組件表單組件媒體組件地圖組件010204050306小程序組件介紹小程序組件介紹組件化開(kāi)發(fā)并不是小程序所特有的，一些其他編程語(yǔ)言中都有組件化的概念，準(zhǔn)確來(lái)講，只有UI視圖層的展示，就必定要用到組件化。組件是UI視圖層的最基本組成單元，組件中包含了一些基礎(chǔ)功能和基礎(chǔ)樣式，一個(gè)組件就類(lèi)似于一個(gè)自定義的標(biāo)簽。小程序組件介紹視圖容器組件基礎(chǔ)組件表單組件導(dǎo)航組件媒體組件地圖組件小程序框架為開(kāi)發(fā)者提供了一系列基礎(chǔ)組件，開(kāi)發(fā)者可以通過(guò)組合這些基礎(chǔ)組件進(jìn)行快速開(kāi)發(fā)，包括：視圖容器組件視圖容器組件視圖容器組件主要用于控制頁(yè)面的內(nèi)容，與HTML中的<div>標(biāo)簽功能類(lèi)似，可以把小程序的容器組件理解為一個(gè)盒子容器，可以將其他組件填充在該容器組件中。視圖容器組件view視圖容器，這是在開(kāi)發(fā)中最常用的一種容器組件；scroll-view可滾動(dòng)視圖容器；swiper輪播組件；movable-view可移動(dòng)容器；cover-view覆蓋在原生組件之上的文本視圖。視圖容器組件包括：基礎(chǔ)組件基礎(chǔ)組件text文本組件rich-text富文本組件progress進(jìn)度條組件icon圖標(biāo)組件小程序提供的基礎(chǔ)組件主要用于表示頁(yè)面上的基礎(chǔ)元素，一共有四種基礎(chǔ)組件，包括：基礎(chǔ)組件text文本組件提供了三個(gè)屬性屬性類(lèi)型默認(rèn)值說(shuō)明user-selectbooleanfalse文本是否可選spacestring-顯示連續(xù)空格decodebooleanfalse是否解碼基礎(chǔ)組件progress進(jìn)度條組件的屬性屬性類(lèi)型默認(rèn)值說(shuō)明percentnumber-百分比0~100show-infobooleanfalse在進(jìn)度條右側(cè)顯示百分比border-radiusnumber/string0圓角大小font-sizenumber/string16右側(cè)百分比字體大小stroke-widthnumber/string6進(jìn)度條線的寬度colorstring#09BB07進(jìn)度條顏色activeColorstring#09BB07已選擇的進(jìn)度條的顏色backgroundColorstring#EBEBEB未選擇的進(jìn)度條的顏色activebooleanfalse進(jìn)度條從左往右的動(dòng)畫(huà)active-modestringbackwardsbackwards:動(dòng)畫(huà)從頭播；forwards：動(dòng)畫(huà)從上次結(jié)束點(diǎn)接著播durationnumber30進(jìn)度增加1%所需毫秒數(shù)基礎(chǔ)組件小程序基礎(chǔ)組件的icon圖標(biāo)組件是用法最為簡(jiǎn)單的一個(gè)組件，用于在頁(yè)面中展示具有微信風(fēng)格的一系列圖標(biāo)。在icon圖標(biāo)組件上可以通過(guò)type屬性來(lái)設(shè)置圖標(biāo)的類(lèi)型，type的值可以設(shè)置為：success，成功，用于表示操作順利完成；info，提示，用于表示信息提示；也常用于缺乏條件的操作攔截，提示用戶(hù)所需信息；warn，警告，用于表示操作后將引起一定后果的情況；也用于表示由于系統(tǒng)原因而造成的負(fù)向結(jié)果；waiting，等待，用于表示等待，告知用戶(hù)結(jié)果需等待cancel，停止或關(guān)閉，用于在表單中，表示關(guān)閉或停止download，下載，用于表示可下載；search，搜索，用于搜索控件中，表示可搜索；clear，關(guān)閉，用法與cancel類(lèi)似。表單組件表單組件button按鈕組件input輸入框組件radio單選按鈕組件checkbox復(fù)選框組件switch開(kāi)關(guān)組件form表單組件小程序提供的表單組件主要包括表單組件//index.wxml<viewclass="form-body"><viewclass="form-title">個(gè)人資料</view><formcatchsubmit="formSubmit"catchreset="formReset"><viewclass="form-item"><viewclass="form-item-title">姓名：</view><inputname="name"placeholder="請(qǐng)輸入"bindinput="onNameInput"/></view><viewclass="form-item"><viewclass="form-item-title">性別：</view><radio-groupname="sex"bindchange="onSexChange"><label><radiovalue="男"checked/>男</label><label><radiovalue="女"/>女</label></radio-group></view><viewclass="form-item"><viewclass="form-item-title">特長(zhǎng)：</view><checkbox-groupname="hobby"bindchange="onHobbyChange"><label><checkboxvalue="運(yùn)動(dòng)"/>運(yùn)動(dòng)</label><label><checkboxvalue="藝術(shù)"/>藝術(shù)</label><label><checkboxvalue="科技"/>科技</label></checkbox-group></view>

表單組件示例代碼：<viewclass="form-item"><viewclass="form-item-title">城市：</view><pickerbindchange="onCityChange"range="{{citys}}"name="city"><viewclass="picker">{{user.city?user.city:'點(diǎn)擊選擇'}}</view></picker></view><viewclass="btn-area"><buttontype="primary"formType="submit">提交</button><buttonformType="reset">重置</button></view></form></view>表單組件表單組件頁(yè)面顯示效果：媒體組件媒體組件audio音頻組件video視頻組件camera系統(tǒng)相機(jī)組件小程序提供的媒體組件包括：媒體組件小程序audio音頻組件的屬性：屬性類(lèi)型默認(rèn)值說(shuō)明idstring-audio組件的唯一標(biāo)識(shí)符srcstring-要播放音頻的資源地址loopbooleanfalse是否循環(huán)播放controlsbooleanfalse是否顯示默認(rèn)控件posterstring-默認(rèn)控件上的音頻封面的圖片資源地址namestring-默認(rèn)控件上的音頻名字authorstring-默認(rèn)控件上的作者名字媒體組件video組件的部分屬性：屬性類(lèi)型默認(rèn)值說(shuō)明srcstring-要播放視頻的資源地址durationnumber-指定視頻時(shí)長(zhǎng)controlsbooleantrue是否顯示默認(rèn)播放控件danmu-listArray.<object>-彈幕列表danmu-btnbooleanfalse是否顯示彈幕按鈕enable-danmubooleanfalse是否展示彈幕autoplaybooleanfalse是否自動(dòng)播放loopbooleanfalse是否循環(huán)播放mutedbooleanfalse是否靜音播放initial-timenumber0指定視頻初始播放位置gesturebooleanfalse在非全屏模式下，是否開(kāi)啟亮度與音量調(diào)節(jié)手勢(shì)directionnumber-設(shè)置全屏?xí)r視頻的方向show-progressbooleantrue若不設(shè)置，寬度大于240時(shí)才會(huì)顯示show-fullscreen-btnbooleantrue是否顯示全屏按鈕show-play-btnbooleantrue是否顯示視頻底部控制欄的播放按鈕媒體組件image圖片組件的屬性：屬性類(lèi)型默認(rèn)值說(shuō)明srcstring-圖片資源地址modestringscaleToFill圖片裁剪、縮放的模式webpbooleanfalse默認(rèn)不解析webP格式，只支持網(wǎng)絡(luò)資源lazy-loadbooleanfalse圖片懶加載show-menu-by-longpressbooleanfalse圖片長(zhǎng)按功能媒體組件camera組件的屬性：屬性類(lèi)型默認(rèn)值說(shuō)明modestringnormal應(yīng)用模式，只在初始化時(shí)有效，不能動(dòng)態(tài)變更resolutionstringmedium分辨率，不支持動(dòng)態(tài)修改device-positionstringback攝像頭朝向flashstringauto閃光燈，值為auto,on,offframe-sizestringmedium指定期望的相機(jī)幀數(shù)據(jù)尺寸地圖組件地圖組件地圖和導(dǎo)航功能已經(jīng)成為大部分出行類(lèi)移動(dòng)應(yīng)用的必備功能之一，小程序提供了map地圖組件方便開(kāi)發(fā)者在小程序應(yīng)用中快速實(shí)現(xiàn)地圖功能。小程序的map地圖組件是基于騰訊地圖的開(kāi)放能力，在小程序中實(shí)現(xiàn)快速渲染地圖的一種高級(jí)能力，開(kāi)發(fā)者可以根據(jù)自身產(chǎn)品的使用場(chǎng)景以及UI風(fēng)格，選取或者創(chuàng)建風(fēng)格匹配的地圖樣式。地圖組件小程序地圖示例代碼：//index.wxml<viewclass="map-container"><maplatitude="{{latitude}}"longitude="{{longitude}}"markers="{{markers}}"scale="{{scale}}"bindcontroltap="tapControl"bindregionchange="regionChange"></map></view>//index.wxssPage({data:{latitude:22.540822,longitude:113.934457,scale:16,markers:[{latitude:22.540822,longitude:113.934457,label:{c