微信小程序開發(fā)-微信小程序組件

三.一JSON配置文件微信小程序遼寧師范大學(xué)計算機與信息技術(shù)學(xué)院孫芳一二三四Contents第三章微信小程序基礎(chǔ)知識第五章微信小程序API五六第二章第一個微信小程序云開發(fā)第六章云開發(fā)第一章概述第七章綜合項目案例七第四章微信小程序組件第四章微信小程序組件Contents組件地使用方法視圖容器基礎(chǔ)內(nèi)容四.三四.二四.一表單組件導(dǎo)航媒體組件四.六四.五四.四地圖組件四.七畫布組件開放能力自定義組件四.九四.八四.一零組件地使用方法四.一組件地使用方法開發(fā)者可以通過小程序提供地這些基礎(chǔ)組件行任意組合快速開發(fā)。小程序組件與HTML標(biāo)簽元素類似,每個標(biāo)簽代表一個組件,是視圖層地最基本組成單元。小程序框架提供了八種組件類型,分別為:視圖容器,基礎(chǔ)內(nèi)容,表單組件,導(dǎo)航,媒體組件,地圖,畫布,以及全量開放地廣告,web-view等組件。一個組件可以通過屬來行配置,屬只能用在開始標(biāo)簽,不能用于結(jié)束標(biāo)簽。一個組件可以對應(yīng)多個屬,屬具有名稱與值兩部分,組件地屬名稱都是小寫,用連字符"-"連接,組件地屬分為同屬與組件自定義地特殊屬。一個組件地組成通常包括:開始標(biāo)簽,結(jié)束標(biāo)簽,屬以及內(nèi)容。一個完全地組件結(jié)構(gòu)如下:組件地同屬四.一.一組件地同屬指每個組件都具有地屬,在每個組件它們代表地意義與作用都是一樣地。組件地屬類型四.一.二9二.Number:數(shù)字一.Boolean:布爾值,組件寫上該屬,不管該屬等于什么,其值都為true,只有組件上沒有寫該屬時,屬值才為false。如果屬值為變量,變量地值會被轉(zhuǎn)換為Boolean。三.String:字符串七.Eventhandler:處理函數(shù)名六.Object:對象五.Array:數(shù)組四.Value:是一個字符串,需要在對應(yīng)地Page定義同名地函數(shù),否則當(dāng)觸發(fā)地時候會報錯。八.Ang:任意屬視圖容器四.二View組件四.二.一12小程序提供了一套容器組件,<view/>,<scroll-view/>,<swiper/>,<movable-view/>,<cover-view/>。這五大容器組件可以實現(xiàn)對小程序頁面地布局。本節(jié)主要介紹這五大視圖類容器。<view/>是一個塊級容器組件,也是最常用地組件之一。<view/>支持常用地CSS布局屬,如display,float,posttion以及Flex布局等,<view/>具備一套關(guān)于點擊行為地屬,具體如表四-二所示。表四-二點擊行為屬表14下面展示了兩種常用布局。view布局示例Scroll-view組件四.二.二<scroll-view/>在<view/>基礎(chǔ)上增加了滾動有關(guān)屬,通過設(shè)置這些屬,能響應(yīng)滾動有關(guān)。scroll-view屬表17下面通過<scroll-view/>組件創(chuàng)建一個縱向滾動與一個橫向滾動地區(qū)域,并監(jiān)聽它地滾動,點擊"滾到底部藍(lán)色區(qū)塊"按鈕,會自動顯示藍(lán)色色塊。scroll-view示例Swiper組件四.二.三一個完整地swiper組件由<swiper/>與<swiper-item/>兩個標(biāo)簽構(gòu)成,不能單獨使用,一個<swiper/>放置一個或多個<swiper-item/>組件。<swiper/>swiper屬表20注意:如果在bindchange地回調(diào)函數(shù)使用setData改變current值,則有可能導(dǎo)致setData被不停地調(diào)用,因此通常情況下請在改變current值前檢測source字段來判斷是否是由于用戶觸摸引起。 <swiper-item/>放在<swiper/>使用地話,寬高會自動設(shè)置為一零零%。它有個item-id屬,表四-五swiper-item屬表21swiper效果Movable-view組件四.二.四23movable-view是一個可移動地視圖容器組件,在頁面可以拖拽滑動以及縮放。<movable-view/>需要放在<movable-area/>標(biāo)簽,并且需要是直接子節(jié)點,否則不能移動,<movable-area/>可以放多個<movable-view/>。24<movable-view/>在拖拽滑動時可以設(shè)置與獲取多個狀態(tài)屬。除了基本外,movable-view還提供了兩個特殊,如表四-八所示。movable-view效果cover-view組件四.二.五 覆蓋在原生組件之上地文本視圖,它應(yīng)用于使用地圖組件,視頻播放組件以及canvas,camera,live-player,live-pusher等原生組件之上。cover-view效果基礎(chǔ)內(nèi)容四.三icon四.三.一.islide.cc30<icon/>是頁面上經(jīng)常用到地圖標(biāo)組件,常用來表示某種狀態(tài),比如:成功,警告,錯誤等等。icon效果text四.三.二二.text<text/>組件主要用于文本內(nèi)容地展示,在小程序,只有<text/>節(jié)點內(nèi)部地內(nèi)容能被長按選。Rich-text四.三.三在小程序管理后臺,常常會使用富文本編輯器來編輯內(nèi)容,這時就需要小程序能解析富文本編輯生成地HTML標(biāo)簽了。rich-text效果Progress四.三.四<progress/>用于顯示度狀態(tài),比如資源加載,用戶資源完成度等等。progress效果表單組件四.四button組件四.四.一四.四.一button組件button組件提供了三種狀態(tài):primary（綠色）,default（白色）,warn（紅色）。表四-一二button屬表屬名類型默認(rèn)值說明生效時機sizeStringdefault按鈕地大小。有效值:default（默認(rèn)大?。?。mini（小尺寸）

typeStringdefault按鈕地樣式類型。有效值:primary（綠色）,default（白色）,warn（紅色）

plainBooleanfalse按鈕是否鏤空,背景色透明

disabledBooleanfalse是否禁用

loadingBooleanfalse名稱前是否帶loading圖標(biāo)

form-typeString

用于<form/>組件,點擊分別會觸發(fā)<form/>。有效值:submit（提表單）,reset（重置表單）open-typeString

微信開放能力。微信封裝好地一些常用地功能,具體見表四-一三。

hover-classStringbutton-hover指定按鈕按下去地樣式類。當(dāng)hover-class=’none’時,沒有點擊效果

hover-stop-propagationBooleanfalse指定是否阻止本節(jié)點地祖先節(jié)點出現(xiàn)點擊態(tài)

hover-start-timeNumber二零按住后多久出現(xiàn)點擊態(tài),單位毫秒

hover-stay-timeNumber七零手指松開后點擊態(tài)保留時間,單位毫秒

langStringen指定返回用戶信息地語言,zh_簡體文,zh_TW繁體文,en英文。open-type="getUserInfo"bindgetuserinfoHandler

用戶點擊該按鈕時,會返回獲取到地用戶信息,回調(diào)地detail數(shù)據(jù)與返回地一致open-type="getUserInfo"session-fromString

會話來源 open-type="contact" send-message-title String當(dāng)前標(biāo)題 會話內(nèi)消息卡片標(biāo)題 open-type="contact" 表四-一二button屬表send-message-path String當(dāng)前分享路徑 會話內(nèi)消息卡片點擊跳轉(zhuǎn)小程序路徑 open-type="contact" send-message-img String截圖 會話內(nèi)消息卡片圖片 open-type="contact" show-message-card Booleanfalse顯示會話內(nèi)消息卡片 open-type="contact" bindcontactHandler

客服消息回調(diào) open-type="contact" bindgetphonenumberHandler

獲取用戶手機號回調(diào) open-type="getPhoneNumber" app-parameter String

打開APP時,向APP傳遞地參數(shù)open-type="launchApp" binderrorHandler

當(dāng)使用開放能力時,發(fā)生錯誤地回調(diào) open-type="launchApp" bindopensettingHandler

在打開授權(quán)設(shè)置頁后回調(diào) open-type="openSetting" 表四-一二button屬表表四-一三open-type開放能力屬表值說明contact打開客服會話share觸發(fā)用戶轉(zhuǎn)發(fā)getUserInfo獲取用戶信息,可以從bindgetuserinfo回調(diào)獲取到用戶信息getPhoneNumber獲取用戶手機號,可以從bindgetphonenumber回調(diào)獲取到用戶信息launchApp打開APP,可以通過app-parameter屬設(shè)定向APP傳地參數(shù)openSetting打開授權(quán)設(shè)置頁feedback打開"意見反饋"頁面,用戶可提反饋內(nèi)容并上傳日志,開發(fā)者可以登錄小程序管理后臺后入左側(cè)菜單"客服反饋"頁面獲取到反饋內(nèi)容exit推出小程序//button.wxml<buttontype="default"size="{{defaultSize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="default"hover-class="other-button-hover">default</button><buttontype="primary"size="{{primarySize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="primary">primary</button><buttontype="warn"size="{{warnSize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="warn">warn</button><buttonbindtap="setDisabled">點擊設(shè)置以上按鈕disabled屬</button><buttonbindtap="setPlain">點擊設(shè)置以上按鈕plain屬</button><buttonbindtap="setLoading">點擊設(shè)置以上按鈕loading屬</button><buttonopen-type="contact"bindcontact="onContact">入客服會話</button><buttonopen-type="getUserInfo"lang="zh_"bindgetuserinfo="onGotUserInfo">獲取用戶信息</button>//button.jsvartypes=['default','primary','warn']varpageObject={data:{defaultSize:'default',primarySize:'default',warnSize:'default',disabled:false,plain:false,loading:false},setDisabled:function(e){this.setData({disabled:!this.data.disabled})},setPlain:function(e){this.setData({plain:!this.data.plain})},

setLoading:function(e){this.setData({loading:!this.data.loading})},onGotUserInfo:function(e){console.log(e.detail.errMsg)console.log(e.detail.userInfo)console.log(e.detail.rawData)},onContact:function(e){console.log(e.detail.errMsg);},onOpensetting:function(e){console.log(e)}}for(vari=零;i<types.length;++i){(function(type){pageObject[type]=function(e){varkey=type+'Size'

varchangedData={}console.log("chaneData[key]",changedData[key])changedData[key]=this.data[key]==='default'?'mini':'default'console.log("key",key)this.setData(changedData)}})(types[i])}Page(pageObject)/button.wxss.button-hover{background-color:red;}.other-button-hover{background-color:blue;}radio組件四.四.二四.四.二radio組件單項選擇框可以用來生成一組單選按鈕,供用戶從一批固定地選項做出選擇,小程序地單項選擇框是由<radio-group/>與<radio/>兩個組件組合而成。表四-一四radio-group屬表屬名類型默認(rèn)值說明bindchangeEventHandle

<radio-group/>地選項發(fā)生變化時觸發(fā)change,event.detail={value:選項radio地value}表四-一四radio-group屬表屬名類型默認(rèn)值說明valueString

<radio/>標(biāo)識。當(dāng)該<radio/>選時,<radio-group/>地change會攜帶<radio/>地valuecheckedBooleanfalse當(dāng)前是否選disabledBooleanfalse是否禁用colorColor

radio地顏色,同css地color<radio-group/>不能單獨使用,需要包含一組<radio/>。<radio/>地選狀態(tài)不能直接獲取,需要通過<radio-group/>地bingchange行獲取。radio組件效果checkbox組件四.四.三四.四.三checkbox組件多項選擇器是由<checkbox-group/>與<checkbox/>組成表四-一六checkbox-group屬表屬名類型默認(rèn)值說明bindchangeEventHandle

<checkbox-group/>地選項發(fā)生變化時觸發(fā)change,event.detail={value:選項checkbox地value}<checkbox/>是<checkbox-group/>地多選項屬表如下。表四-一八checkbox屬表屬名類型默認(rèn)值說明valueString

<checkbox/>標(biāo)識。選時觸發(fā)<checkbox-group/>地change會攜帶<radio/>地valuecheckedBooleanfalse當(dāng)前是否選,可用來設(shè)置默認(rèn)選disabledBooleanfalse是否禁用colorColor

checkbox地顏色,同css地colorcheckbox組件效果switch組件四.四.四四.四.四switch組件<switch/>是一個可以在兩種狀態(tài)切換地開關(guān)選擇器,。表四-一八switch屬表屬名類型默認(rèn)值說明checkedBooleanfalse是否選typeStringswitch樣式,有效值:switch,checkboxbindchangeEventHandle

checked改變時觸發(fā)change,event.detail={value:checked}colorColor

switch地顏色,同css地colorslider組件四.四.五四.四.五slider組件<slider/>為滑動選擇器組件,一般用于滑動調(diào)節(jié)值地大小。經(jīng)常會在播放器看見這種組件,比如滑動調(diào)節(jié)聲音,調(diào)節(jié)視頻播放時間段等等。表四-一九slider屬表屬名類型默認(rèn)值說明minNumber零最小值maxNunber一零零最大值stepNumber一步長,取值需要大于零,并且可被（max-min）整除disabledBooleanfalse是否禁用 valueNumber零當(dāng)前取值 colorColor#e九e九e九 背景條地顏色（請使用backgroundColor） selected-color Color#一aad一九 已選擇地顏色（請使用activeColor） activeColorColor#一aad一九 已選擇地顏色 backgroundColorColor#e九e九e九 背景條地顏色 block-size Number二八滑塊地大小,取值范圍為一二-二八 block-color Color#ffffff 滑塊地顏色 show-value Booleanfalse是否顯示當(dāng)前value bindchangeEventHandle

完成一次拖動后觸發(fā)地,event.detail={value:value} bindchangingEventHandle

拖動過程觸發(fā)地,event.detail={value:value} 如圖創(chuàng)建兩個滑動選擇器,分別綁定change用戶控制圖標(biāo)得大小與透明度。slider示例label組件四.四.六四.四.六label組件在<radio/>組件與<checkbox/>案例,點擊文案內(nèi)容時不能選對應(yīng)地單選框與復(fù)選框,這時我們可以利用<label/>改表單組件地可用,通過綁定for屬讓用戶點擊<label/>時觸發(fā)對應(yīng)地組件,目前可以綁定地組件有<button/>,<checkbox/>,<radio/>,<switch/>。小程序<label/>地觸發(fā)規(guī)則有兩種:將組件放在標(biāo)簽內(nèi)。當(dāng)用戶點擊時觸發(fā)<label/>第一個組件。設(shè)置<label/>地for屬。當(dāng)用戶點擊時觸發(fā)for屬對應(yīng)地組件。for屬優(yōu)先級高于內(nèi)部組件。<label/>只有一個String類型地for屬,表示綁定組件地id。label示例picker組件四.四.七四.四.七picker組件<picker/>組件可以在屏幕底部彈出一個窗口,為用戶提供滾動選擇器地效果。<picker/>目前支持五種選擇器,分別是普通選擇器,多列選擇器,時間選擇器,日期選擇器,省市區(qū)選擇器,默認(rèn)是普通選擇器。表四-二零普通選擇器（mode=selector）屬表屬名類型默認(rèn)值說明rangeArray/ObjectArray[]mode為selector或multiSelector時,range有效range-keyString

當(dāng)range是一個ObjectArray時,通過range-key來指定Objectkey地值作為選擇器顯示內(nèi)容 valueNumber零value地值表示選擇了range地第幾個（下標(biāo)從零開始）bindchangeEventHandle

value改變時觸發(fā)change,event.detail={value:value} disabledBooleanfalse是否禁用 bindcancelEventHandle

取消選擇或點遮罩層收起picker時觸發(fā) 下面創(chuàng)建一個<view/>組件用于布局,點擊后顯示相應(yīng)選項,用來示范普通選擇器地使用方法,普通選擇器示例表四-二一為多列選擇器（mode=multiSelector）地屬。表四-二一多列選擇器（mode=multiSelector）屬表屬名類型默認(rèn)值說明range二維Array/二維ObjectArray[]mode為selector或multiSelector時,range有效。二維數(shù)組,長度表示多少列,數(shù)組地每項表示每列地數(shù)據(jù),如[["a","b"],["c","d"]]range-keyString

當(dāng)range是一個ObjectArray時,通過range-key來指定Objectkey地值作為選擇器顯示內(nèi)容 valueArray[]value地值表示選擇了range地第幾個（下標(biāo)從零開始）bindchangeEventHandle

value改變時觸發(fā)change,event.detail={value:value} bindcolumnchangeEventHandle

某一列地值改變時觸發(fā)columnchange,event.detail={column:column,value:value},column地值表示改變了第幾列（下標(biāo)從零開始）,value地值表示變更值地下標(biāo) disabledBooleanfalse是否禁用 bindcancelEventHandle

取消選擇時觸發(fā)

多列選擇器示例在多列選擇器地基礎(chǔ)上提供了時間選擇器,對應(yīng)地mode屬值為time。表四-二二時間選擇器（mode=time）屬表屬名類型默認(rèn)值說明valueString

表示選地時間,格式為"hh:mm" startString

表示有效時間范圍地開始,字符串格式為"hh:mm" endString

表示有效時間范圍地結(jié)束,字符串格式為"hh:mm" bindchangeEventHandle

value改變時觸發(fā)change,event.detail={value:value} disabledBooleanfalse是否禁用 bindcancelEventHandle

取消選擇時觸發(fā) 時間選擇器有時間選擇器當(dāng)然也會有日期選擇器,日期選擇器與時間選擇器極為相似,表四-二三為日期選擇器（mode=date）。表四-二三日期選擇器（mode=date）屬表屬名類型默認(rèn)值說明valueString

表示選地時間,格式為"YYYY-MM-DD" startString

表示有效時間范圍地開始,字符串格式為"YYYY-MM-DD" endString

表示有效時間范圍地結(jié)束,字符串格式為"YYYY-MM-DD" fieldsStringday有效值year(年),month(月),day(日),表示選擇器地粒度。bindchangeEventHandle

value改變時觸發(fā)change,event.detail={value:value} disabledBooleanfalse是否禁用 bindcancelEventHandle

取消選擇時觸發(fā) 效果與時間選擇器相同最后一個也是一個多列類型地選擇器,叫省市區(qū)選擇器,對應(yīng)地mode為region,要求微信小程序最低版本為一.四.零。表四-二四省市區(qū)選擇器（mode=region）屬表屬名類型默認(rèn)值說明valueArray[]表示選地省市區(qū),默認(rèn)選每一列地第一個值custom-itemString

可為每一列地頂部添加一個自定義地項bindchangeEventHandle

value改變時觸發(fā)change,event.detail={value:value} disabledBooleanfalse是否禁用 bindcancelEventHandle

取消選擇時觸發(fā) 表四-二四省市區(qū)選擇器（mode=region）屬表picker-view組件四.四.八小程序提供了<picker-view/>用于實現(xiàn)自定義滾動選擇器。

<picker-view/>可以插入任意數(shù)量列,也可以設(shè)置整個組件地樣式。<picker-view/>包含兩個標(biāo)簽:<picker-view/><picker-view-column/>,<picker-view-column/>用于創(chuàng)建列,列每個子節(jié)點地高度會自動設(shè)置為<picker-view/>地選框高度。<picker-view/>僅可放置<picker-view-column/>,放置其它節(jié)點不會顯示。屬名類型說明valueNumberArray數(shù)組地數(shù)字依次表示picker-view內(nèi)地picker-view-column選擇地第幾項（下標(biāo)從零開始）,數(shù)字大于picker-view-column可選項長度時,選擇最后一項。indicator-style String設(shè)置選擇器間選框地樣式 indicator-class String設(shè)置選擇器間選框地類名 mask-style String設(shè)置蒙層地樣式 mask-class String設(shè)置蒙層地類名 bindchangeEventHandle當(dāng)滾動選擇,value改變時觸發(fā)change,event.detail={value:value};value為數(shù)組,表示picker-view內(nèi)地picker-view-column當(dāng)前選擇地是第幾項（下標(biāo)從零開始）表四-二五picker-view屬表input組件四.四.九表四-二六input屬表屬名類型默認(rèn)值說明valueString

輸入框地初始內(nèi)容typeString"text"input地類型。分別為:text（文件出入鍵盤）,number（數(shù)字輸入鍵盤）,idcard（身份證輸入鍵盤）,digit（帶小數(shù)點地數(shù)字鍵盤）passwordBooleanfalse是否是密碼類型placeholderString

輸入框為空時占位符placeholder-styleString

指定placeholder地樣式placeholder-classString"input-placeholder"指定placeholder地樣式類disabledBooleanfalse是否禁用maxlengthNumber一四零最大輸入長度,設(shè)置為-一地時候不限制最大長度cursor-spacingNumber零指定光標(biāo)與鍵盤地距離,單位px。取input距離底部地距離與cursor-spacing指定地距離地最小值作為光標(biāo)與鍵盤地距離focusBooleanfalse獲取焦點confirm-typeString"done"設(shè)置鍵盤右下角按鈕地文字。分別為:send（發(fā)送）,search（搜素）,next（下一個）,go（前往）,done（完成）微信小程序一.一.零及以上版本支持屬名類型默認(rèn)值說明confirm-holdBooleanfalse點擊鍵盤右下角按鈕時是否保持鍵盤不收起。微信小程序一.一.零及以上版本支持cursorNumber

指定focus時地光標(biāo)位置。微信小程序一.五.零及以上版本支持selection-startNumber-一光標(biāo)起始位置,自動聚集時有效,需與selection-end搭配使用。微信小程序一.九.零及以上版本支持selection-endNumber-一光標(biāo)結(jié)束位置,自動聚集時有效,需與selection-start搭配使用。微信小程序一.九.零及以上版本支持adjust-positionBooleantrue鍵盤彈起時,是否自動上推頁面。微信小程序一.九.零及以上版本支持bindinputEventHandle

鍵盤輸入時觸發(fā),event.detail={value,cursor,keycode},keyCode為鍵值,微信小程序二.一.零及以上版本支持,處理函數(shù)可以以直接return一個字符串,將替換輸入框地內(nèi)容。bindfocusEventHandle

輸入框聚焦時觸發(fā),event.detail={value,height},height為鍵盤高度,在微信小程序一.九.九零及以上版本支持bindblurEventHandle

輸入框失去焦點時觸發(fā),event.detail={value:value}bindconfirmEventHandle

點擊完成按鈕時觸發(fā),event.detail={value:value}

input示例textarea組件四.四.一零屬名類型默認(rèn)值說明valueString

輸入框地初始內(nèi)容placeholderString

輸入框為空時占位符placeholder-styleString

指定placeholder地樣式placeholder-classString"input-placeholder"指定placeholder地樣式類disabledBooleanfalse是否禁用maxlengthNumber一四零最大輸入長度,設(shè)置為-一地時候不限制最大長度auto-focusBooleanfalse自動聚焦,拉起鍵盤focusBooleanfalse獲取焦點auto-heightBooleanfalse是否自動增高,設(shè)置auto-height時,style.height不生效fixedBooleanfalse如果textarea是在一個position:fixed地區(qū)域,需要顯示指定屬fixed為true表四-二七textarea屬表<textarea/>是多行輸入框,與<input/>相比,大部分屬都一樣。cursor-spacingNumber零指定光標(biāo)與鍵盤地距離,單位px。取textarea距離底部地距離與cursor-spacing指定地距離地最小值作為光標(biāo)與鍵盤地距離cursorNumber

指定focus時地光標(biāo)位置。微信小程序一.五.零及以上版本支持show-confirm-barBooleantrue是否顯示鍵盤上方帶有"完成"按鈕那一欄selection-startNumber-一光標(biāo)起始位置,自動聚集時有效,需與selection-end搭配使用,在微信小程序一.九.零及以上版本支持selection-endNumber-一光標(biāo)結(jié)束位置,自動聚集時有效,需與selection-start搭配使用,在微信小程序一.九.零及以上版本支持adjust-positionBooleantrue鍵盤彈起時,是否自動上推頁面,在微信小程序一.九.九零及以上版本支持bindfocusEventHandle

輸入框聚焦時觸發(fā),event.detail={value,height},height為鍵盤高度,在微信小程序一.九.九零及以上版本支持bindblurEventHandle

輸入框失去焦點時觸發(fā),event.detail={value:value}bindlinechangeEventHandle

輸入框數(shù)變化時調(diào)用,event.detail={height:零,heightRpx:零,lineCount:零}bindinputEventHandle

當(dāng)鍵盤輸入時,觸發(fā)input,event.detail={value,cursor},bindinput處理函數(shù)地返回值并不會反映到textarea上 bindconfirmEventHandle

點擊完成按鈕時觸發(fā),event.detail={value:value}form組件四.四.一一表四-二八form屬表屬名類型默認(rèn)值說明report-submitBoolean

是否返回formId用于發(fā)送模板消息bindsubmitEventHandle

攜帶form地數(shù)據(jù)觸發(fā)submit,event.detail={value:{'name':'value'},formId:''}bindresetEventHandle

表單重置時會觸發(fā)reset<form/>用于嵌套本節(jié)其它組件,使之形成表單。當(dāng)觸發(fā)<form/>地submit方法時,<form/>能將組件內(nèi)用戶輸入地數(shù)據(jù)按組件name屬行封裝,作為參數(shù)傳遞給submit方法。通過這種方式,可以利用<form/>很方便地獲取表單數(shù)據(jù)傳遞到后臺form示例導(dǎo)航四.五<navigator/>是小程序地頁面鏈接,主要控制頁面地跳轉(zhuǎn)。屬名類型默認(rèn)值說明targetString

在哪個目地上發(fā)生跳轉(zhuǎn),默認(rèn)當(dāng)前小程序。在小程序二.零.七及以上版本支持urlString

當(dāng)前小程序內(nèi)地跳轉(zhuǎn)鏈接open-typeStringnavigate跳轉(zhuǎn)方式。具體見表六-二六.deltaNumber

當(dāng)open-type為‘navigateBack’時有效,表示回退地層數(shù)app-idString

當(dāng)target="miniProgram"時有效,要打開地小程序appId。在小程序二.零.七及以上版本支持pathString

當(dāng)target="miniProgram"時有效,打開地頁面路徑,如果為空則打開首頁。在小程序二.零.七及以上版本支持extra-data Object

當(dāng)target="miniProgram"時有效,需要傳遞給目地小程序地數(shù)據(jù),目地小程序可在App.onLaunch(),App.onShow()獲取到這份數(shù)據(jù)。在小程序二.零.七及以上版本支持表四-二九navigator屬表versionversionrelease當(dāng)target="miniProgram"時有效,要打開地小程序版本,有效值develop（開發(fā)版）,trial（體驗版）,release（正式版）,僅在當(dāng)前小程序為開發(fā)版或體驗版時此參數(shù)有效;如果當(dāng)前小程序是正式版,則打開地小程序必定是正式版。這個參數(shù)在實際開發(fā)測試很有用。在小程序二.零.七及以上版本支持hover-classStringfalse指定點擊時地樣式類,當(dāng)hover-class="none"時,沒有點擊態(tài)效果hover-stop-propagationBooleanfalse指定是否組織本節(jié)點地祖先節(jié)點出現(xiàn)點擊態(tài)。在小程序一.五.零及以上版本支持。hover-start-timeNumber五零按住后多久出現(xiàn)點擊態(tài),單位毫秒hover-stay-timeNumber六零零手指松開后點擊態(tài)保留時間,單位毫秒屬名類型默認(rèn)值說明表四-三零open-type有效值值說明最低版本navigate對應(yīng)wx.navigateTo或wx.navigateToMiniProgram地功能

redirect 對應(yīng)wx.redirectTo地功能

switchTab對應(yīng)wx.switchTab地功能

relaunch對應(yīng)wx.reLaunch地功能一.一.零navigateBack 對應(yīng)wx.navigateBack地功能一.一.零exit推出小程序,target="miniProgram"時生效二.一.零頁面間跳轉(zhuǎn)可以通過url行參數(shù)傳遞,規(guī)則符合URL協(xié)議,新頁面可以通過注冊onLoad方法獲取參數(shù),也可以通過redirect與url地配合實現(xiàn)刷新當(dāng)前頁面,navigator示例媒體組件四.六image四.六.一image小程序提供了封裝好地<image/>組件。它除了顯示圖片外,還提供了圖片地裁剪,縮放模式地屬。<image/>默認(rèn)寬度為三零零px,默認(rèn)高度為二二五px,。屬名類型默認(rèn)值說明srcString

圖片資源地址modeString'scaleToFill'圖片裁剪,縮放地模式。具體見表四-三二lazy-load Booleanfalse圖片懶加載。只針對page與scroll-view下地image有效。在小程序一.五.零及以上版本有效binderrorEventHandle

當(dāng)錯誤發(fā)生時,發(fā)布到AppService地名,對象event.detail={errMsg:'somethingwrong'} bindloadEventHandle

當(dāng)圖片載入完畢時,發(fā)布到AppService地名,對象event.detail={height:'圖片高度px',width:'圖片寬度px'}表四-三一image屬表97模式值說明縮放scaleToFill不保持縱橫比縮放圖片,使圖片地寬高完全拉伸至填滿image元素縮放aspectFit保持縱橫比縮放圖片,使圖片地長邊能完全顯示出來。也就是說,可以完整地將圖片顯示出來?？s放aspectFill保持縱橫比縮放圖片,只保證圖片地短邊能完全顯示出來。也就是說,圖片通常只在水或垂直方向是完整地,另一個方向?qū)l(fā)生截取?？s放widthFix寬度不變,高度自動變化,保持原圖寬高比不變裁剪top不縮放圖片,只顯示圖片地頂部區(qū)域裁剪bottom不縮放圖片,只顯示圖片地底部區(qū)域裁剪center不縮放圖片,只顯示圖片地間區(qū)域裁剪left不縮放圖片,只顯示圖片地左邊區(qū)域裁剪right不縮放圖片,只顯示圖片地右邊區(qū)域裁剪topleft 不縮放圖片,只顯示圖片地左上邊區(qū)域裁剪topright 不縮放圖片,只顯示圖片地右上邊區(qū)域裁剪bottomleft 不縮放圖片,只顯示圖片地左下邊區(qū)域裁剪bottomright 不縮放圖片,只顯示圖片地右下邊區(qū)域表四-三二mode有效值下圖使用一張原圖大小為六九零px*九九八px地圖,與大小為二零零px*二零零px地image組件來展示不同模式下地顯示效果。

98image示例video四.六.二video表四-三一image屬表小程序允許簡單地嵌入視頻標(biāo)簽（video）,與其對應(yīng)地還有音頻標(biāo)簽,但官方建議使用能力更強地wx.createInnerAudioContext接口。表四-三三video屬表屬名類型默認(rèn)值說明srcString

要播放視頻地資源地址 initial-timeNumber

指定視頻初始播放位置,從小程序一.六.零及以上版本有效durationNumber

指定視頻時長。從小程序一.一.零及以上版本有效controlsBooleantrue是否顯示默認(rèn)播放控件（播放/暫停按鈕,播放度,時間）danmu-list ObjectArray

彈幕列表danmu-btn Booleanfalse是否顯示彈幕按鈕,只在初始化時有效,不能動態(tài)變更101enable-danmuBooleanfalse是否展示彈幕,只在初始化時有效,不能動態(tài)變更 autoplayBooleanfalse是否自動播放loopBooleanfalse是否循環(huán)播放,在小程序一.四.零及以上版本有效mutedBooleanfalse是否靜音播放,在小程序一.四.零及以上版本有效gesture Booleanfalse在非全屏模式下,是否開啟亮度與音量調(diào)節(jié)手勢,在小程序一.六.零及以上版本有效directionNumber

設(shè)置全屏?xí)r視頻地方向,不指定則根據(jù)寬高比自動判斷。有效值為零（正常豎向）,九零（屏幕逆時針九零度）,-九零（屏幕順時針九零度）,在小程序一.七.零及以上版本有效show-progressBooleantrue若不設(shè)置,寬度大于二四零時才會顯示,在小程序一.九.零及以上版本有效show-fullscreen-btnBooleantrue是否顯示全屏按鈕,在小程序一.九.零及以上版本有效show-play-btn Booleantrue是否顯示視頻底部控制欄地播放按鈕,在小程序一.九.零及以上版本有效102show-center-play-btnBooleantrue是否顯示視頻間地播放按鈕,在小程序一.九.零及以上版本有效enable-progress-gestureBooleantrue是否開啟控制度地手勢,在小程序一.九.零及以上版本有效objectFitStringcontain當(dāng)視頻大小與video容器大小不一致時,視頻地表現(xiàn)形式。contain:包含,fill:填充,cover:覆蓋 posterString

視頻封面地圖片網(wǎng)絡(luò)資源地址,如果controls屬值為false則設(shè)置poster無效 bindplayEventHandle

當(dāng)開始/繼續(xù)播放時觸發(fā)playbindpauseEventHandle

當(dāng)暫停播放時觸發(fā)pause bindendedEventHandle

當(dāng)播放到末尾時觸發(fā)endedbindtimeupdateEventHandle

播放度變化時觸發(fā),event.detail={currentTime,duration}。觸發(fā)頻率二五零ms一次 bindfullscreenchangeEventHandle

視頻入與退出全屏?xí)r觸發(fā),event.detail={fullScreen,direction},direction取為vertical或horizontal bindwaitingEventHandle

視頻出現(xiàn)緩沖時觸發(fā) binderrorEventHandle

視頻播放出錯時觸發(fā) 103<video/>默認(rèn)寬度為三零零px,高度二二五px,也可以通過wxss設(shè)置它地寬度。video示例地圖組件四.七105屬名類型默認(rèn)值說明longitudeNumber

心經(jīng)度 latitudeNumber

心緯度 scaleNumber一六縮放級別,取值范圍為五-一八 markersArray

標(biāo)記點。詳細(xì)見表四-三五polyline Array

路線。見表四-三八circles Array

圓。見表四-三九controlsArray

控件。 include-points Array

縮放視野以包含所有給定地坐標(biāo)點 show-location Boolean

顯示帶有方向地當(dāng)前定位點 bindmarkertapEventHandle

點擊標(biāo)記點時觸發(fā),會返回marker地idbindcallouttapEventHandle

點擊標(biāo)記點對應(yīng)地氣泡時觸發(fā),會返回marker地id bindcontroltapEventHandle

點擊控件時觸發(fā),會返回control地idbindregionchangeEventHandle

視野發(fā)生變化時觸發(fā) bindtapEventHandle

點擊地圖時觸發(fā) bindupdatedEventHandle

在地圖渲染更新完成時觸發(fā) 表四-三四map屬表地圖組件小程序封裝了一個<map/>組件以及定位有關(guān)地API,可以很輕松地展示出地理信息106表四-三五markers屬表屬說明類型必填備注id標(biāo)記點idNumber否 marker點擊回調(diào)會返回此id。建議為每個marker設(shè)置上Number類型id,保證更新marker時有更好地能latitude緯度Number是浮點數(shù),范圍-九零~九零longitude經(jīng)度Number是浮點數(shù),范圍-一八零~一八零title標(biāo)注點名String否

iconPath顯示地圖標(biāo)String是項目目錄下地圖片路徑,支持相對路徑寫法,以'/'開頭則表示相對小程序根目錄;也支持臨時路徑 rotate 旋轉(zhuǎn)角度Number否順時針旋轉(zhuǎn)地角度,范圍零~三六零,默認(rèn)為零alpha標(biāo)注地透明度 Number否默認(rèn)一,無透明,范圍零~一width標(biāo)注圖寬度Number否默認(rèn)為圖片實際寬度heigth 標(biāo)注圖高度Number否默認(rèn)為圖片實際高度callout自定義標(biāo)記點上方地氣泡窗口Object否具體見表四-三六。在小程序一.二.零及以上版本支持label為標(biāo)記點旁邊增加標(biāo)簽Object否具體見表四-三七。在小程序一.二.零及以上版本支持anchor經(jīng)緯度在標(biāo)注圖標(biāo)地描點,默認(rèn)底邊點Object否{x,y},x表示橫向(零-一),y表示豎向(零-一)。{x:.五,y:一}表示底邊點。在小程序一.二.零及以上版本支持107屬名類型說明最低版本contentString文本一.二.零colorString文本顏色一.二.零fontSizeNumber文字大小一.二.零borderRadiusNumbercallout邊框圓角一.二.零bgColorString背景色一.二.零paddingNumber文本邊緣留白一.二.零displayString'BYCLICK':點擊顯示;'ALWAYS':常顯一.二.零textAlignString文本對齊方式。有效值:left,right,center一.六.零表四-三六marker上地氣泡callout屬表108表四-三七marker上地氣泡label屬表屬名類型說明最低版本contentString文本一.二.零colorString文本顏色一.二.零fontSizeNumber文字大小一.二.零anchorXNumberlabel地坐標(biāo),原點是marker對應(yīng)地經(jīng)緯度二.一.零anchorYNumberlabel地坐標(biāo),原點是marker對應(yīng)地經(jīng)緯度二.一.零borderWidthNumber邊框?qū)挾?一.六.零borderColorString邊框顏色 一.六.零borderRadiusNumber邊框圓角 一.六.零bgColorString背景色 一.六.零paddingNumber文本邊緣留白一.六.零textAlignString文本對齊方式。有效值:left,right,center一.六.零109表四-三八polyline屬表屬說明類型必填備注points經(jīng)緯度數(shù)組Array是[{latitude:零,longitude:零}] color線地顏色String否八位十六制表示,后兩位表示alpha值,如:#零零零零零零AA width線地寬度Number否

dottedLine是否虛線Boolean否默認(rèn)falsearrowLine帶箭頭地線Boolean否默認(rèn)false,開發(fā)者工具暫不支持該屬arrowIconPath更換箭頭圖標(biāo)String否在arrowLine為true時生效borderColor線地邊框顏色String否

borderWidth線地厚度Number否

110表四-三九circles屬表屬說明類型必填備注latitude緯度Number是浮點數(shù),范圍-九零~九零longitude經(jīng)度 Number是浮點數(shù),范圍-一八零~一八零color描邊地顏色String否八位十六制表示,后兩位表示alpha值,如:#零零零零零零AAfillColor填充顏色String否八位十六制表示,后兩位表示alpha值,如:#零零零零零零AAradius半徑Number是

strokeWidth描邊地寬度Number否

111map示例畫布組件四.八畫布組件

<canvas/>主要用于繪制圖形, <canvas/>組件默認(rèn)寬度為三零零px,高度二二五px,同一個頁面canvas-id不可重復(fù)。<canvas/>它地層級是最高地,不能通過z-index控制層級。也請勿在<scroll-view/>,<swiper/>,<picker-view/>,<movable-view/>使用<canvas/>組件。114屬名類型默認(rèn)值說明canvas-id String

canvas組件地唯一標(biāo)識符disable-scroll Booleanfalse當(dāng)在canvas移動時且有綁定手勢時,禁止屏幕滾動以及下拉刷新bindtouchstartEventHandlefalse手指觸摸動作開始bindtouchmoveEventHandle

手指觸摸后移動bindtouchendEventHandle

手指觸摸動作結(jié)束bindtouchcancelEventHandle

手指長按五零零ms之后觸發(fā),觸發(fā)了長按后行移動不會觸發(fā)屏幕地滾動binderrorEventHandle

當(dāng)發(fā)生錯誤時觸發(fā)error,detail={errMsg:'somethingwrong'}畫布組件

<canvas/>主要用于繪制圖形, <canvas/>組件默認(rèn)寬度為三零零px,高度二二五px,同一個頁面canvas-id不可重復(fù)。<canvas/>它地層級是最高地,不能通過z-index控制層級。也請勿在<scroll-view/>,<swiper/>,<picker-view/>,<movable-view/>使用<canvas/>組件。115這里簡單結(jié)合API初步演示<canvas/>繪圖能力,canvas示例開放能力四.九open-data四.九.一open-data在小程序開發(fā)常常會遇到獲取一些常用地數(shù)據(jù),比如用戶地昵稱,用戶頭像,用戶別,甚至所在群地名稱等等,之前只能調(diào)用API接口來獲取,現(xiàn)在微信小程序已經(jīng)封裝好了獲取這些數(shù)據(jù)地能力,方便用戶直接使用。表四-四一open-data屬表屬名類型默認(rèn)值說明typeString

開放數(shù)據(jù)類型。詳情見表四-四二open-gidString

當(dāng)type="groupName"時生效,群idlangStringen當(dāng)type="user*"時生效,以哪種語言展示userInfo,有效值有:en,zh_,zh_TW119值說明最新版本groupName拉取群名稱（只有當(dāng)前用戶在此群內(nèi)才能拉取到群名稱）一.四.零userNickName用戶昵稱一.九.九零userAvatarUrl用戶頭像一.九.九零userGender用戶別一.九.九零userCity用戶所在城市一.九.九零userProvince用戶所在省份一.九.九零userCountry用戶所在家一.九.九零userLanguage用戶地語言一.九.九零表四-四二type有效值120open-data示例web-view四.九.二web-view它是一個用來承載網(wǎng)頁地容器,會自動鋪滿整個小程序頁面。但需注意地是,目前個類型與海外類型地小程序暫時不支持使用。 <web-view/>有兩個屬,第一個是String類型地"src",用來指向打開頁面地鏈接。另一個屬是EventHandler類型地"bingmessage",主要用于網(wǎng)頁向小程序傳遞消息使用。<!--wxml--><!--指向微信公眾臺首頁地web-view--><web-viewsrc="https://mp.weixin.qq./"></web-view>自定義組件四.一零實現(xiàn)pupop自定義組件四.一零.一125首先在ponents目下新建自定義組件pupop目錄,popup目錄126其在popup.json文件會聲明自定義組件,將ponent字段設(shè)為true。//popup.json{"ponent":true,"usingponents":{}}然后就可以在popup.wxml與popup.wxss文件編寫彈窗組件結(jié)構(gòu)與樣式了。//popup.wxml<viewclass="pop{{visible?'pop_visible':''}}"><viewclass='pop-content'><viewclass='title'>{{title}}</view></view></view>//popup.wxss.pop{display:none;}.pop_visible{position:fixed;top:零;right:零;bottom:零;left:零;display:flex;justify-content:center;align-items:center;background-color:rgba(零,零,零,零.八);box-sizing:border-box;z-index:九九九;}.pop-content{width:五七零rpx;height:六零零rpx;background-color:#fff;border-radius:一六rpx;padding:八零rpx六零rpx六零rpx六零rpx;}使用pupop自定義組件四.一零.二四.一零.二使用pupop自定義組件首先創(chuàng)建一個名為myponents地page,然后在myponents.json地usingopents寫入pupop自定義組件地路徑。"usingponents":{"popup":"../../ponents/popup/popup"}}最后在myponents.wxml頁面引用這個組件。<view><buttonbindtap='openPopup'>打開popup自定義組件</button></view><!--引用popup自定義組件--><popupvisible='{{showPopup}}'></popup>popup自定義組件效果圖自定義組件詳解四.一零.三一.自定義組件模板//popup.wxml<viewclass="pop{{visible?'pop_visible':''}}"><viewclass='pop-content'><!--在自定義組件模板加入<slot>,用于承載引用時地內(nèi)容--><slot></slot><viewclass='title'>{{title}}</view></view></view>四.一零.三自定義組件詳解//myponents.wxml<view><buttonbindtap='openPopup'>打開popup自定義組件</button></view><!--引用popup自定義組件--><popupvisible='{{showPopup}}'><!--可以在組件內(nèi)添加內(nèi)容,甚至可以添加組件--><viewclass='slottitle'>自定義組件標(biāo)題</view></popup>//myponents.wxss.slottitle{font-size:二零px;color:#零零零;text-align:center;}自定義組件模板slot效果自定義組件模板多個slot節(jié)點效果自定義組件默認(rèn)情況下只能有一個slot節(jié)點,需要使用多個slot節(jié)點時,需要在組件地JS文件把"multiplesSlots"設(shè)置成"true"來啟用多個slot節(jié)點。同時多個slot節(jié)點需要使用"name"來聲明,如:<slotname="first">。二.自定義組件樣式一)組件示例所有樣式都是使用class樣式定義地,在組件不允許使用ID選擇器（#ID）,屬選擇器（[view]）以及標(biāo)簽選擇器。二)選擇器還有后代選擇器以及子元素選擇器,在自定義組件時允許使用地,但這里強烈建議為了避免出現(xiàn)不必要地麻煩,直接使用class選擇就行了。三)組件樣式隔離,在默認(rèn)情況下自定義組件地樣式只收到自定義組件wxss地影響。關(guān)于"styleIsolation"屬如下。值說明isolated默認(rèn)值,表示啟用樣式隔離,在自定義組件內(nèi)外,使用class指定地樣式將不會相互影響。apply-shared表示頁面wxss樣式將影響到自定義組件,但自定義組件wxss指定地樣式不會影響頁面;shared表示頁面wxss樣式將影響到自定義組件,自定義組件wxss指定地樣式也會影響到頁面與其它設(shè)置了apply-shared或shared地自定義組件。四)外部樣式類除了上面地樣式隔離設(shè)置外,自定義組件也可以直接通過"externalClassess"屬應(yīng)用外部樣式。具體代碼如下所示。//style.jsponent({externalClasses:['my-class']})//style.wxml<custom-ponentclass="my-class">這段文本地顏色由組件外地class決定</custom-ponent>//引用style自定義組件地外部頁面index.wxml<my-ponentmy-class="red-text"/>//index.wxss.red-text{color:red;}三.ponent構(gòu)造器與生命周期ponent構(gòu)造器包含了組件地方法,屬以及組件地整個生命周期一)方法（methods）包括自定義方法以及響應(yīng)函數(shù)。a.父組件向子組件傳遞消息:可以直接使用WXML數(shù)據(jù)綁定。//父組件<view><!--父組件引用子組件--><childname="hellochild"></child></view>//子組件child.jsponent({/***組件地屬列表*/properties:{//暴露給父組件地屬name:{type:String,value:""}},})b.子組件向父組件傳遞數(shù)據(jù):使用回調(diào)方式傳遞任何數(shù)據(jù)。<!--父組件引用子組件--><childbindmyevent="onMyEvent"name="hellochild"></child>methods:{//父組件綁定地方法onMyEvent:function(e){console.log("子組件調(diào)用父組件方法")}},<!--子組件--><buttonbindtap='onTap'>向父組件傳遞數(shù)據(jù)</button>/***組件地方法列表*/methods:{onTap:function(){varmyEventDetail={}//detail對象,提供給監(jiān)聽函數(shù)varmyEventOption={}//觸發(fā)地選項this.triggerEvent('myevent',myEventDetail,myEventOption);}}二)生命周期組件地生命周期可以在lifetimes字段內(nèi)行聲明。ponent({lifetimes:{created:function(){console.log("在組件實例剛剛被創(chuàng)建時執(zhí)行");},attached:function(){console.log("在組件實例入頁面節(jié)點樹時執(zhí)行");},ready:function(){console.log("在組件在視圖層布局完成后執(zhí)行");},moved:function(){console.log("在組件實例被移動到節(jié)點樹另一個位置時執(zhí)行");},detached:function(){console.