1、 i第3章 用微信小程序組件構(gòu)建 UI界面課程名稱微信小程序開發(fā)圖解案例 教程項(xiàng)目名稱用微信小程序組件構(gòu)建 UI界面任務(wù)名稱用微信小程序組件構(gòu)建 UI界面課時(shí)8項(xiàng)目性質(zhì)演示性口驗(yàn)證性口設(shè)計(jì)性，綜合性授課班級授課日期授課地點(diǎn)教學(xué)目標(biāo)(1)掌握視圖容器組件的使用，會制作海報(bào)輪播效果、頁簽切換效果、上下滑動效果以及左 “滑動效果。(2)掌握基礎(chǔ)內(nèi)容組件的使用，包括圖標(biāo)組件、文本組件以及進(jìn)度條組件的使用。(3)掌握表單組件的使用，利用表單組件來設(shè)計(jì)微信小程序的表單內(nèi)容，可以提交表單以及 質(zhì)麥單內(nèi)容。(4)掌握導(dǎo)航組件的使用，保留當(dāng)前頁跳轉(zhuǎn)以及關(guān)閉當(dāng)前頁跳轉(zhuǎn)。(5)掌握媒體組件的使用，包括音頻組件、圖片

2、組件以及視頻組件的使用。(6)掌握地圖組件和畫布組件的使用。教學(xué)內(nèi)容(1)視圖容器組件(2)基礎(chǔ)內(nèi)容組件(3)表單組件(4)導(dǎo)航組件(5)媒體組件(6)地圖組件(7)畫布組件教學(xué)重點(diǎn)視圖容器組件、基礎(chǔ)內(nèi)容組件、表單組件、導(dǎo)航組件、媒體組件教學(xué)難點(diǎn)表單組件教學(xué)準(zhǔn)備裝有微信小程序的開發(fā)工具的電腦教學(xué)課件PPT教材：微信小程序開發(fā)圖解案例教程(附精講視頻)(第2版)作業(yè)設(shè)計(jì) 教學(xué)過程教 學(xué) 環(huán) 節(jié)教學(xué)內(nèi)容與過程（教學(xué)內(nèi)容、教學(xué)方法、組織形式、教學(xué)手段）課、之， 刖組 織做好上課前的各項(xiàng)準(zhǔn)備工作（打開電腦、打開課件、打開軟件、打開U盤中的素材位置、打開授課計(jì)劃、教案等），吸引學(xué)生注意力。課 程 說 明

3、【課前說明】分別從微信小程序視圖容器組件、基礎(chǔ)內(nèi)容組件、表單組件、導(dǎo)航組件、媒體組件、地圖組件、畫布組 件等知識點(diǎn)進(jìn)行初步的了解?！灸康摹渴箤W(xué)生從了解本章的學(xué)習(xí)目標(biāo)、學(xué)習(xí)重點(diǎn)、考評方式等方面明確學(xué)習(xí)本章知識的要求和目標(biāo)。課 程 內(nèi) 容 描 述視圖容器組件視圖容器組件共有 5種：view視圖容器、scroll-view可滾動視圖區(qū)域、swiper滑塊視圖容器、movable-view可移動視圖容器、cover-view覆蓋原生組件的視圖容器。view 視圖容器view視圖容器是 WXMLF面布局的基礎(chǔ)組件，它的使用和HTML1白DIV類似，主要用于界面的布局。view視圖容器也有自己的屬性，如表

4、所示。view屬性屬性默認(rèn)值說明hoverBooleanfalse是否啟用單擊態(tài)hover-classStringnone指te按下去的樣式類。當(dāng) hover-class=none 時(shí)，沒有單擊態(tài)效果hover-starttimeNumber50按住后多久出現(xiàn)單擊態(tài)，單位毫秒hover-stay-timeNumber400手指松開后單擊態(tài)保留時(shí)間，單位毫秒在WXMLF面里使用view布局，渲染出界面內(nèi)容，如圖所示。加gl 1 tx-d.- rfrci i zHi. rcwview布局具體代碼如下：flex-direction: row123flex-direction: column1233.

5、1.2 scroll-view可滾動視圖區(qū)域scroll-view可滾動視圖區(qū)域允許視圖區(qū)域內(nèi)容橫向滾動或者縱向滾動，類似于瀏覽器的橫向滾動條和垂直滾動條，scroll-view 擁有自己的屬性和事件，如表所示。scroll-view 屬性屬性默認(rèn)值說明scroll-xBooleanfalse允許橫向滾動scroll-yBooleanfalse允許縱向滾動upper-thresholdNumber50距頂部/左邊多遠(yuǎn)時(shí)（單位 px）,觸發(fā)scrolltoupper 事件lower-thresholdNumber50距底部/右邊多遠(yuǎn)時(shí)（單位 px）,觸發(fā)scrolltolower 事件scrol

6、l-topNumber設(shè)置豎向滾動條位置scroll-leftNumber設(shè)置橫向滾動條位置scroll-into-view String值應(yīng)為某子兀素id ,則滾動到該兀素，兀素頂部對 齊滾動區(qū)域頂部bindscrolltoupperEventHandle滾動到頂部/左邊，會觸發(fā)scrolltoupper 事件bindscrolltolowerEventHandle滾動到底部/右邊，會觸發(fā)scrolltolower事件bindscrollEventHandle滾動時(shí)觸發(fā)，event.detail = scrollLeft, scrollTop, scrollHeight, scrollWid

7、th, deltaX, deltaY1.縱向滾動允許內(nèi)容縱向滾動，需要給 一個(gè)固定高度，可以綁定滾動到頂部/左邊(bindscrolltoupper )、滾動到底部 /右邊(bindscrolltolower )、滾動時(shí)(bindscroll )觸發(fā)的事件，也 可以滾動到指定的id區(qū)域(scroll- into-view )。下面實(shí)現(xiàn)縱向滾動，如圖所示。nsrp In e典向質(zhì)動工；-二r i - -click rw t-P縱向滾動(1)在wxml文件里使用scroll-view進(jìn)行布局，設(shè)置 scroll-y=true 縱向滾動，綁定bindscrolltoupper 、bindscroll

8、tolower 、bindscroll 、scroll-into-view 、scroll-top 事件，具體代碼如 下。scroll-view 縱向滾動 button type=default style=margin:10px; bindtap=tapclick metoscroll into view button type=default style=margin:10px; bindtap=tapMoveclickmet oscroll(2)在js文件里設(shè)置顏色的數(shù)組，綁定 to View 和scroll Top數(shù)據(jù)值，提供 bindscrolltoupper 、bindscroll

9、tolower 、bindscroll 、scroll-into-view 、scroll-top 事件函數(shù)，具體代碼如下。var order =red,yellow,blue,green,red Page( data: toView: red, scr011Top: 100, upper: function(e) console.log(e), lower: function(e) console.log(e) ,scroll:f unction(e) console.log(e),tap: function(e) for (var i=0; iorder.length; +i) if (o

10、rderi=this.data.toView) this.setData( toView: orderi + 1 ) break , tapMove: function(e) this.setData(scrollTop: this.data.scr011Top + 10)這樣就可以實(shí)現(xiàn)縱向滾動了，可以滾動到指定區(qū)域，也可以滾動到指定的位置，同時(shí)滾動到頂部或底部 會觸發(fā)相應(yīng)的事件，在滾動過程中也可以觸發(fā)相應(yīng)的事件。2.橫向滾動在使用“今日頭條”或“騰訊新聞”時(shí)，在新聞列表的上方都會有新聞?lì)l道供我們選擇，可以向左滑動 和向右滑動來查看相應(yīng)類別的新聞，可以采用scroll-view來實(shí)現(xiàn)這些新聞?lì)l

11、道的橫向滾動。今日頭條-q科投a* ，劃注里+ a陽3白雷震怪物歷史信任2米5工國埔為項(xiàng) 或，蓋帽不棄恪里芬！C25陛iSNBA出現(xiàn)的空薩發(fā)型大本發(fā)型席今日頭條新聞?lì)l道在wxml文件里使用scroll-view 進(jìn)行布局，設(shè)置 scroll-x=true 橫向滾動，具體代碼如下。 新聞?lì)l道橫向滾動 推薦 視頻 熱點(diǎn) 本地 社會 娛樂 科技 汽車 體育 財(cái)經(jīng) 軍事 國際 時(shí)尚 游戲 美文 這樣就可以實(shí)現(xiàn)橫向滾動了，可以向左滑動和向右滑動。3.1.3 swiper滑塊視圖容器swiper滑塊視圖容器用來在指定區(qū)域內(nèi)切換顯示內(nèi)容，常用來制作海報(bào)輪播效果和頁簽內(nèi)容切換效果, ,的屬性如表所示。swip

12、er屬性屬性默認(rèn)值說明indicatordotsBooleanfalse是否顯小卸板指布點(diǎn)autoplayBooleanfalse是否自動切換currentNumber0當(dāng)前所在頁面的indexintervalNumber5000自動切換時(shí)間間隔durationNumber500滑動動畫時(shí)長circularBooleanfalse是否采用銜接滑動bindchangeEventHandlecurrent改變時(shí)會觸發(fā) change 事件，event.detail =current: current1.海報(bào)輪播效果海報(bào)輪播效果常用來展示商品圖片信息或者廣告信息，是很多網(wǎng)站或者App軟件都會采用的一種

13、布局方式，如圖所示?？谙?。10口漕皿局臨 WEB SOCIAL w上，* -海報(bào)1海報(bào)2(1)在wxml文件里，采用swiper滑塊視圖容器組件進(jìn)行海報(bào)輪播區(qū)域的布局，具體代碼如下：(2)在js文件里，提供海報(bào)輪播的圖片，設(shè)置是否自動播放，提供輪播的時(shí)長等數(shù)據(jù)，通過數(shù)據(jù)綁定 的方式渲染到頁面上，具體代碼如下。Page(data: indicatorDots:true, autoplay:true,interval:5000, duration:1000, imgUrls: HYPERLINK http:/img06.tooopen.cm/ http:/img06.tooopen.cm/ ima

14、ges/20160818/tooopen_sy_175866434296.jpg； HYPERLINK http:/img06.tooopen.con/ http:/img06.tooopen.con/mages20160818ltoopen_syjpg,m ages20150928ooopen_sy_1439127556.jpg)設(shè)置autoplay等于true時(shí)就可以自動進(jìn)行海報(bào)輪播，設(shè)置 indicatorDots 等于true，代表顯示面板指 示點(diǎn)，同時(shí)可以設(shè)置 interval 自動切換時(shí)長、duration 滑動動畫時(shí)長。2.頁簽內(nèi)容切換效果swiper滑

15、塊視圖容器除了可以用來實(shí)現(xiàn)海報(bào)輪播效果，還可以實(shí)現(xiàn)頁簽切換效果。頁簽切換效果常用于 多種方式的登錄或者多種類別的切換，如圖所示。vjtchdt雅七班.畦錄刎快雅豆條發(fā)F司未送上&”哥WMh的區(qū)亞頁簽切換效果(1)進(jìn)入到wxml文件里，進(jìn)行賬號密碼登錄和手機(jī)快捷登錄的界面布局設(shè)計(jì)，具體代碼如下。 賬號密碼杳錄 7手機(jī)快捷登錄我是用來進(jìn)行賬號密碼登錄的區(qū)域我是用來進(jìn)行手機(jī)快捷登錄的區(qū)域(2)進(jìn)入到wxss文件里，給頁面文件添加樣式，具體代碼如下。.loginTitle display: flex; flex-direction: row; width: 100%;.select font-size

16、:12px; color: red; width: 50%;text-align: center; height: 45px;line-height: 45px;border-bottom:5rpx solid red;.default font-size:12px; margin: 0 auto; padding: 15px;.hr border: 1 px solid #cccccc; opacity: 0.2;(3)進(jìn)入到j(luò)s文件里，提供窗口的寬度、高度、當(dāng)前面板的索引值，提供頁簽切換函數(shù)，具體代碼如 下。Page(data: currentTab:0, winWidth:0, winH

17、eight:0,onLoad:function(options) var page = this;wx.getSystemInfo(successfunction(res) console.log(res);page.setData(winWidth:res.windowWidth);page.setData(winHeight:res.windowHeight);),switchNav:function(e) var page=this;if(this.data.currentTab =e.target.dataset.current) return false; elsepage.setD

18、ata(currentTab:e.target.dataset.current); 這樣就可以實(shí)現(xiàn)在兩種登錄狀態(tài)之間切換的效果了。頁簽切換時(shí)，頁簽的標(biāo)題呈現(xiàn)為選中的狀態(tài)，同時(shí) ,應(yīng)的內(nèi)容也隨之進(jìn)行切換。movable-view可移動視圖容器movable-view是一個(gè)可移動視圖容器，在頁面中可以做拖曳滑動。在使用這個(gè)組件的時(shí)候，需要先定義 可移動區(qū)域movable-area ,然后定義直接子節(jié)點(diǎn)movable-view ,否則不能移動。movable-area 必須設(shè)置width和height屬性，不設(shè)置默認(rèn)為 10px； movable-view 必須設(shè)置 width和height屬性，不

19、設(shè)置默認(rèn)為 10px, movable-view 默認(rèn)為絕對定位，top和left屬性為0px。movable-view 可移動視圖容器的屬性如表 所示。movable-view 屬性屬性默認(rèn)值說明directionStringnonemovable-view 的移動方向，屬性值有all、vertical 、horizontal 、noneinertiaBooleanfalsemovable-view 是否帶后慣性out-ofboundsBooleanfalse超過可移動區(qū)域后，movable-view 是否還可以移動xNumber / String定義x軸方向的偏移，如果 x的值不在可移動范

20、圍 內(nèi)，會自動移動到可移動范圍；改變x的值會觸發(fā)動畫yNumber / String定義y軸方向的偏移，如果 y的值不在可移動范圍 內(nèi)，會自動移動到可移動范圍；改變y的值會觸發(fā)動畫dampingNumber20阻尼系數(shù)，用于控制 x或y改變時(shí)的動畫和過界回彈 的動畫，值越大移動越快frictionNumber2摩擦系數(shù)，用于控制慣性滑動的動畫，值越大摩擦力越大，滑動越快停止；必須大于0,否則會被設(shè)置成默認(rèn)，直disabledBooleanfalse是否禁用scaleBooleanfalse是否支持雙指縮放，默認(rèn)縮放手勢生效區(qū)域是在movable-view 內(nèi)scale-minNumber0.5

21、定義縮放倍數(shù)最小值Scale-maxNumber10定義縮放倍數(shù)最大值scale-value Nurnber1定義縮放倍數(shù)，取值范圍為 0.510bindchangeEventHandle拖動過程中觸發(fā)的事件，event.detail = x: x, y:y, source: source , 其中 source 表/、廣生移動的原 因，值可為 touch （拖動）、touch-out- of-bounds（超出移動范圍）、out-of-bounds （超出移動范圍后 的回彈）、friction （慣性）和空字符串（setData ）bindscaleEventHandle縮放過程中觸發(fā)的事件

22、，event.detail = scale:scalemovable-view 提供了兩個(gè)特殊事件：htouchmove事件，指初次手指觸摸后的移動為橫向移動，如果 catch此事件，則意味著 touchmove事件也被catch ; vtouchmove事件，指初次手指觸摸后的移動為縱向移 動，如果 catch此事件，則意味著 touchmove事件也被catch。下面使用movable-view可移動視圖容器組件來進(jìn)行滑動，黃色區(qū)域代表可以移動的區(qū)域，紅色方塊代表 可以移動的組件，如圖所示。 黃色可移動視圖容器(1)在wxml文件里，使用 movable-area和movable-view

23、 視圖容器組件進(jìn)行布局，具體代碼如下。 (2)在js文件里，提供拖動函數(shù)、縮放函數(shù)，通過數(shù)據(jù)綁定的方式渲染到頁面上，具體代碼如下。Page(data: x: 0, y: 0,tap: function (e) this.setData(x: 30,y: 30)；,onChange: function (e)( console.log(e.detail),onScalef unction (e) console.log(e.detail)cover-view覆蓋原生組件的視圖容器cover-view、cover-image這兩個(gè)是覆蓋原生組件的視圖容器。比如在使用地圖組件時(shí)，地圖組件本身的 功能

24、很有局限，但是想放置一些特殊的內(nèi)容或圖片，這時(shí)就需要使用覆蓋地圖組件的視圖容器。cover-view 是指覆蓋在原生組件之上的文本視圖，可覆蓋的原生組件包括map video、canvas、camera,只支持嵌套 cover-view、cover-image。cover-image是指覆蓋在原生組件之上的圖片視圖，可覆蓋的原生組件同cover-view 一樣，支持嵌套cover-view 。下面使用cover-view、cover-image覆蓋原生組件的視圖容器組件，在 video視頻播放組件上放置播 放、暫停兩個(gè)圖片，同時(shí)放置一個(gè)時(shí)間內(nèi)容顯示區(qū)域，如圖所示。視頻播放覆蓋視頻播放組件(1)

25、在wxml文件里使用cover-view、cover-image覆蓋原生組件的視圖容器組件進(jìn)行布局，具體代碼 如下。00:00(2)在wxss文件里添加樣式，具體代碼如下。.controls positionselative; top: 50%; height:50px;margin-top: -25px; display: flex;.play,.pause,.time flex: 1;height: 100%;.time text-align: center;background-color: rgba(0, 0,0, .5); color: white;line-height: 50px

26、;.img width: 40px; height: 40px; margin:5px auto;(3)在js文件里，提供視頻播放、暫停函數(shù)，初始化視頻播放組件，具體代碼如下。Page(onReady() this.videoCtx = wx.createVideoContext(myVideo),play() this.videoCtx.play(),pause() this.videoCtx.pause()3.2基礎(chǔ)內(nèi)容組件基礎(chǔ)內(nèi)谷組件包括icon圖標(biāo)組件、text文本組件、progree進(jìn)度條組件、rich-text曷文本組件。icon 圖標(biāo)微/小程序提供了豐富的圖標(biāo)組件，這些圖標(biāo)組件應(yīng)

27、用于不向的場景，有成功、警告、提示、取消、下 載等/、同含義，如圖 3.10所示。O0/ qc o 舟 圖標(biāo)icon圖標(biāo)組件有3個(gè)屬性：圖標(biāo)的類型 type、圖標(biāo)的大小size和圖標(biāo)的顏色 color ,如表所不。圖標(biāo)屬性屬性默認(rèn)值說明typeStringicon 的類型，后效值后：success success_no_circle 、info、warn、waiting 、 cancel、download、search、clearsizeNumber23icon的大小，單位為 pxcolorColoricon 的顏色，同 css的color如何繪制圖標(biāo)呢？(1)在wxml文件里，利用icon組

28、件進(jìn)行界面布局，具體代碼如下。s文件里，給圖標(biāo)的大小、顏色和類型提供數(shù)據(jù)，具體代碼如下。Page( data: iconSize: 20, 30, 40, 50, 60, 70, iconColor:red, orange, yellow, green, rgb(0,255,255), blue, purple , iconType:success, info, warn, waiting, safe_success, safe_warn, success_circle, success_no_circle, waiting_circle, circle, downloadfo_circle,

29、 cancel, search, clear )text 文本text文本組件支持轉(zhuǎn)義符,比如換行n、空格t 。 組件內(nèi)只支持 嵌套，除了文本 節(jié)點(diǎn)以外的其他節(jié)點(diǎn)都無法長按選中。下面我們來看轉(zhuǎn)義符的使用，具體代碼如下：我愛北京t我愛中國我愛北京n我愛中國界面效果如圖所示。現(xiàn)我北京我愛中國我愛北京 我裁中國轉(zhuǎn)義符效果從圖中可以看出，t具有空格功能，n具有換行功能，同時(shí)也可以看出text文本組件是放置在同一行里，這一點(diǎn)不同于 view組件，每個(gè)view組件都是單獨(dú)一行。progress 進(jìn)度條Progress進(jìn)度條組件是一種提高用戶體驗(yàn)度的組件，可以通過進(jìn)度條看到完整視頻的長度、當(dāng)前播放的 進(jìn)度，

30、這樣讓用戶能合理地安排自己的時(shí)間，提高用戶體驗(yàn)度。微信小程序也提供了progress進(jìn)度條組件，它的屬性如表所示。進(jìn)度條屬性類型默認(rèn)值說明percentFloat無百分比為0100show-infoBooleanfalse在進(jìn)度條右側(cè)顯不白分比stroke-widthNumber6進(jìn)度條線的寬度，單位為pxColorColor#09BB07進(jìn)度條顏色activeBooleanfalse進(jìn)度條從左往右的動畫示例代碼如下：界面效果如圖所示。進(jìn)度條效果rich-text 富文本rich-text富文本組件，可以在 WXMLC面文件顯示一些富文本內(nèi)容，比如顯示HTMLI勺一些元素內(nèi)容。它有一個(gè)node

31、s節(jié)點(diǎn)列表屬性，nodes屬性推薦使用 Array 類型，由于組件會將 String 類型轉(zhuǎn)換為Array 類型，因而性能會有所下降。nodes支持兩種節(jié)點(diǎn)，通過 type來區(qū)分，分別是元素節(jié)點(diǎn)和文本節(jié)點(diǎn)，它默認(rèn)的是元素節(jié)點(diǎn)，即在富文本區(qū)域里顯示的HTM邛點(diǎn)。.元素節(jié)點(diǎn)：type= node元素節(jié)點(diǎn)類型默認(rèn)值說明name標(biāo)簽名String支持部分受信任的 HTM邛點(diǎn)attrs屬性O(shè)bject支持部分受信任的屬性，遵循 Pascal命名法children子節(jié)點(diǎn)列表Array結(jié)構(gòu)和nodes 致.文本節(jié)點(diǎn)：type= text文本節(jié)點(diǎn)屬性默認(rèn)值說明text文本String支持 entities示例

32、代碼如下：Page(data: nodes: name: div, attrs: class: div_class, style: line-height: 60px; color: red;,children: type: text, text: HelloWorld!,tap() console.log(tap)3.3豐富的表單組件微信小程序提供了豐富的表單組件：button按鈕組件、checkbox多項(xiàng)選擇器組件、radio單項(xiàng)選擇器組件、input單行輸入框組件、textarea多行輸入框組件、label改進(jìn)表單可用性組件、 picker滾動選擇器組 件、slider滑動選擇器組件、s

33、witch開關(guān)選擇器組件、form表單組件10種表單組件。button 按鈕button按鈕組件提供3種類型按鈕：基本類型按鈕、默認(rèn)類型按鈕和警告類型按鈕。同時(shí)提供兩種大小 形狀的按鈕：默認(rèn)和 mini兩種大小按鈕，如圖所示。叁本梟生技鐲軌y.黃之怔/按鈕類型和大小button按鈕組件有很多屬性，每個(gè)屬性有不同的作用，如表所示。按鈕屬性屬性默認(rèn)值說明sizeStringDefault啟效值為：default、minitypeStringDefault按鈕的樣式類型，后效值為 primary、default、 warnplainBooleanFalse按鈕是否鏤空，背景色透明disabledBo

34、oleanFalse是否禁用loadingBooleanFalse名稱前是否帶loading 圖標(biāo)form-typeString無有效值為： submit、reset 。用于 組件， 單擊分別會觸發(fā) submit、reset 事件hover-classStringbutton-hover指te按鈕按卜去的樣式類。當(dāng) hover-class=none 時(shí)，沒有單擊態(tài)效果hover-starttimeNumber50按住后多久出現(xiàn)單擊態(tài)，單位為毫秒hover-staytimeNumber400手指松開后單擊態(tài)保留時(shí)間，單位為毫秒從按鈕屬性中可以看出按鈕可以設(shè)置不同大小、不同類型、是否鏤空、是否禁用

35、、按鈕名稱前是否帶 oading圖標(biāo)。針對form表單組件，按鈕組件提供了提交表單和重置表單兩個(gè)功能，具體代碼如下所示。 default primary warn 點(diǎn)擊設(shè)置以上按鈕 disabled 屬性 點(diǎn)擊設(shè)置以上按鈕 plain 屬性 點(diǎn)擊設(shè)置以上按鈕 loading 屬性 var types=default, primary, warn var pageObject =data: defaultSize: default, primarySize: default,warnSize: default, disabled: false,plain: false, loading: fal

36、se,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)for (var i=0;itypes.length; +i) (function(type) pageObjecttype =function(e) var key=type+Sizevar changed

37、Data =changedDatakey =this.datakey= default ? minidefaultthis.setData(changedData)(typesi)Page(pageObject)界面效果如圖所示。prunary點(diǎn)擊設(shè)置以上忸I(lǐng)fld “bl&d屬性點(diǎn)擊專以上按鉆口的處點(diǎn)擊設(shè)置以上根比LNinW按鈕效果checkbox 多項(xiàng)選擇器checkbox多項(xiàng)選擇器組件，也就是我們常說的復(fù)選框，它用來進(jìn)行多項(xiàng)選擇，它的屬性如表所示。多項(xiàng)選擇器屬性屬性默認(rèn)值說明valueString 標(biāo)識，選中時(shí)觸發(fā) 的 change 事件， 并攜帶 的 valuedisabledBool

38、eanFalse是否禁用checkedBooleanFalse當(dāng)前是否選中，可用來設(shè)置默認(rèn)選中colorColorcheckbox 的顏色，同 css 的 colorcheckbox-group 是用來容納多個(gè) checkbox多項(xiàng)選擇器的容器，它有一個(gè)綁定事件bindchange ,checkbox- group/中選中項(xiàng)發(fā)生改變時(shí)觸發(fā)change 事件，detail = value: 選中的 checkbox 的 value的數(shù)組。下面演示一下 checkbox多項(xiàng)選擇器的使用，以及如何獲取選中的value值。(1)在wxml文件里使用checkbox進(jìn)行界面布局，具體代碼如下所示。 美國

39、 中國巴西日本checkbox value=ENG disabled/ 英國(2)在js文件里，添加checkboxChange事件函數(shù)，獲取復(fù)選框選中的值，將其打印出來，具體代碼如 F所示。Page( checkboxChange:function(e) console.log(e.detail.value) )界面效果如圖所示。復(fù)選框value值從圖中可以看出，被禁用的復(fù)選框是不能使用的，在 checkbox-group上面綁定bindchange事件，每次 勾選時(shí)，會把所有勾選的復(fù)選框的值以數(shù)組的形式存在detail里。radio單項(xiàng)選擇器radio單項(xiàng)選擇器是與 checkbox多項(xiàng)選

40、擇器對立的一個(gè)組件，每次只能選中一個(gè)radio單項(xiàng)選擇器，選嗔間是一種互斥關(guān)系，它的屬性如表所示。單項(xiàng)選擇器屬性屬性默認(rèn)值說明valueString 標(biāo)識。當(dāng)該選中時(shí)， 的change 事件會攜帶 的 valuedisabledBooleanFalse是否禁用checkedBooleanFalse當(dāng)前是否選中，可用來設(shè)置默認(rèn)選中colorColorradio 的顏色，同 css的colorradio-group是用來容納多個(gè) radio 單項(xiàng)選擇器的容器，它有一個(gè)綁定事件bindchange , 中的選中項(xiàng)發(fā)生變化時(shí)觸發(fā)bindchange 事件，event.detail = value:選中

41、項(xiàng)radio 的value。下面演示一下radio單項(xiàng)選擇器的使用。(1)在wxml文件里使用radio單項(xiàng)選擇器進(jìn)行界面布局，具體代碼如下所示。 美國radio value=CHN checked/中國radio value=BRA disabled/巴西 日本 英國(2)在js文件里，添加radioChange事件函數(shù)，獲取單項(xiàng)選中的值，將其打印出來，具體代碼如下所 示。Page( radioChange:function(e) console.log(radiot生change1,攜帶value為：,e.detail.value) )界面效果如圖所示。單項(xiàng)選擇器value值從圖中可以看出

42、，被禁用的單項(xiàng)選擇器是不能使用的，在 radio-group 上面綁定bindchange事件，每次 勾選時(shí)，只能使一個(gè)選項(xiàng)呈現(xiàn)為選中狀態(tài)，同時(shí)會把相應(yīng)的值存在detail里。input 單行輸入框input單行輸入框，用來輸入單行文本內(nèi)容，它的屬性如表所示。單行輸入框?qū)傩詫傩灶愋湍J(rèn)值說明ValueString輸入框的初始內(nèi)容TypeStringTextinput 的5,有效值為 text、number、idcard 、 digitPasswordBooleanFalse是否是密碼類型PlaceholderString輸入框?yàn)榭諘r(shí)占位符placeholderstyleString指定plac

43、eholder 的樣式placeholderclassStringinputplaceholder指入e placeholder 的樣式類DisabledBooleanFalse是否禁用MaxlengthNumber140最大輸入長度，設(shè)置為 -1的時(shí)候不限制最大長度cursorspacingNumber0指正）匕標(biāo)與鍵盤的距離，單位為px。取input距離底部的距離和cursor-spacing指定的距離的最小值作為光標(biāo)與鍵盤的距離auto-focusBooleanFalse（即將廢棄，請直接使用 focus ）自動聚焦，拉起鍵盤FocusBooleanFalse族取焦點(diǎn)BindinputE

44、ventHandle當(dāng)鍵盤輸入時(shí)，觸發(fā) input事件，event.detail =value: value,處理函數(shù)可以直接返回一個(gè)字符串， 將替換輸 入框的內(nèi)容BindfocusEventHandle輸入框聚焦時(shí)觸發(fā)，event.detail = value: valueBindblurEventHandle輸入框失去焦點(diǎn)時(shí)觸發(fā)，event.detail = value:valueBindconfirmEventHandle單擊元成按鈕時(shí)觸發(fā)，event.detail = value: value示例代碼如下：（1）在wxml文件里利用input單行輸入框進(jìn)行布局，具體代碼如下所示。使得輸

45、入框獲取焦點(diǎn) 你輸入的是：inputValueinput bindinput=bindHideKeyboard placeholder”輸入 123自動收起鍵盤”/view class=section”input password type=number” /input password type=text” /input type=digit” placeholder”帶小數(shù)點(diǎn)的數(shù)字鍵盤 ”/input type=idcard” placeholder”身份證輸入鍵盤 ” /input placeholder-style=color:red” placeholder=占位符字體是紅色的 ”

46、/(2)在js文件里給input單行輸入框添加相應(yīng)的事件并提供數(shù)據(jù)，具體代碼如下所示。Page(data: focus: false, inputValue:,bindButtonTap: function。this.setData( focus: true),bindKeyInput: function(e) this.setData(inputValue: e.detail.value),bindReplaceInput: function(e) var value =e.detail.value var pos = e.detail.cursor if(pos !=-1)光標(biāo)在中間var

47、 left = e.detail.value.slice(0,pos)計(jì)算光標(biāo)的位置pos = left.replace(/11/g,2).length 直接返回對象，可以對輸入進(jìn)行過濾處理，同時(shí)可以控制光標(biāo)的位置return value: value.replace(/11/g,2)cursor: pos 或者直接返回字符串，光標(biāo)在最后邊/return value.replace(/11/g,2),bindHideKeyboard: function(e) if (e.detail.value=123)收起鍵盤 wx.hideKeyboard() )界面效果如圖所示。VwQui這是一個(gè)可以自

48、注案例的igm1這個(gè)同有在IS胡由擊的時(shí)候才聚國主君軟:北萩地揖白最大同A住店小伸輸入的是 場人同步聶tie*卞連孝前兩個(gè)1會變?nèi)谄槿巳?言五收近登包節(jié)小龍點(diǎn)的蚊字鋌盅 與由江愉M鎮(zhèn)前 占位書字右至七疝非input單行輸入框textarea 多行輸入框textarea多行輸入框是與input單行輸入框?qū)?yīng)的一個(gè)組件，它可以輸入多行文本內(nèi)容，它的屬性如表 所示。多行輸入框?qū)傩詫傩阅J(rèn)值說明valueString輸入框的內(nèi)容placeholderString輸入框?yàn)榭諘r(shí)占位符placeholder-styleString指定placeholder 的樣式placeholder-classStrin

49、ginputplaceholder指入e placeholder 的樣式類disabledBooleanFalse是否禁用maxlengthNumber140最大輸入長度，設(shè)置為 -1的時(shí)候不限制最大長度cursor-spacingNumber0指定光標(biāo)與鍵盤的距離，單位為 px。取 textarea 距離底部的距離和cursorspacing 指定的距離的最小值作為光標(biāo)與鍵 盤的距離auto-focusBooleanFalse（即將廢棄，請直接使用focus ）自動聚焦，拉起鍵盤focusBooleanFalse族取焦點(diǎn)auto-heightBooleanFalse是否自動增高，設(shè)置auto

50、-height 時(shí)，style.height 不生效fixedBooleanFalse如果 textarea 是在個(gè) position:fixed 的區(qū)域，需要顯示指定屬性 fixed 為 truebindlinechangeEventHandle輸入框行數(shù)變化時(shí)調(diào)用，event.detail =height: 0, heightRpx: 0, lineCount: 0)bindinputEventHandle當(dāng)鍵盤輸入時(shí)，觸發(fā)input事件，event.detail = value: value), 處理函數(shù)可以直接返回一個(gè)字符串，將替換輸入 框的內(nèi)容bindfocusEventHandle

51、輸入框聚焦時(shí)觸發(fā)，event.detail = value: value)bindblurEventHandle輸入框失去焦點(diǎn)時(shí)觸發(fā)，event.detail =value: value)bindconfirmEventHandle單擊元成按鈕時(shí)觸發(fā)，event.detail = value: value)示例代碼如下所示：label改進(jìn)表單可用性label組件是用來改進(jìn)表單可用性的，目前可以用來改進(jìn)的組件有：、checkbox/、 。它只有一個(gè)屬性for ,屬性for用來綁定控件的id。它有兩種使用方式：一種是沒有 定義for屬性，另一種是定義for屬性。label組件沒有定義for屬性la

52、bel 組件沒有定義 for 屬性時(shí)，在 label 內(nèi)包含 、checkbox/、 、 這 些組件，當(dāng)單擊label組件時(shí)，會觸發(fā)label內(nèi)包含的第一個(gè)控件，假如在第一個(gè)位置，就會觸發(fā)對應(yīng)的事彳假如在第一個(gè)位置，就會觸發(fā)radio對應(yīng)的事件。下面演示一下它的使用。(1)在wxml文件里利用label組件布局，把第一個(gè)組件隱藏起來，具體代碼如下所示。 我是 button 按鈕 我是label組件內(nèi)的內(nèi)容 中國 美國 男 女(2)在js文件里添加clickBtn 、checkboxChange、radioChange 3 個(gè)事件函數(shù)，分別打印不同的信 息，具體代碼如下所示。Page(click

53、Btn:function()console.log。單擊了 按鈕組件)checkboxChange:function() console.log(單擊了 多項(xiàng)選擇器組件)； , radioChange:function()console.log。單擊了 單選選擇器組件)(3)在wxml界面里可以看到按鈕組件是隱藏起來的，但是單擊“我是 label組件內(nèi)的內(nèi) 容”，可以看到打印信息是按鈕事件函數(shù)打印的信息，如圖所示。沒有定義for屬性從這里可以看出，label組件內(nèi)有多個(gè)組件時(shí)，會觸發(fā)第一個(gè)組件。label組件定義for屬性label組件定義for屬性后，它會根據(jù) for屬性的值找到與組件id

54、一樣的值，然后觸發(fā)這個(gè)組件的相應(yīng) 翼件。下面演示一下它的使用：(1)在wxml文件里利用label組件布局，把第一個(gè)組件隱藏起來，給 label定義for等于man,讓它找 到id值等于man組件，然后觸發(fā)該組件的事件，具體代碼如下所示。button id=btn bindtap=clickBtn hidden 我是 button 按鈕 我是label組件內(nèi)的內(nèi)容 中國 美國 男 女(2)在js文件里添加clickBtn 、checkboxChange、radioChange 3 個(gè)事件函數(shù)，分別打印不同的信 t,具體代碼如下所示。Page(clickBtn:function()console

55、.log(單擊了 按鈕組件),checkboxChange:function()console.log(單擊了 多項(xiàng)選組件),radioChange:function()console.logC 單擊了 單選選擇器組件)(3)在wxml界面里可以看到按鈕組件是隱藏起來的，但是單擊“我是 label組件內(nèi)的內(nèi) 容”，可以看到id值等于man的單項(xiàng)選擇器程序?yàn)檫x中狀態(tài)，同時(shí)觸發(fā)事件，打印信息，如圖所示。定義for屬性3.3.7 picker滾動選擇器picker滾動選擇器，支持 3種滾動選擇器：普通選擇器、時(shí)間選擇器、日期選擇器。默認(rèn)的是普通選擇 如圖所示。工12E配胃普通選擇器時(shí)間選擇器日期選擇

56、器這3種選擇器是通過 mode來區(qū)分的，普通選擇器 mode = selector ,時(shí)間選擇器 mode = time ,日期選 擇器mode = date ,每種類型選擇器的屬性不同。.普通選擇器：mode = selector普通選擇器屬性屬性默認(rèn)值說明RangeArray / ObjectArraymode為 selector時(shí)，range 后效range-keyString當(dāng) range 是l個(gè) Object Array 時(shí)，通過 rangekey 來指定Object中key的值作為選擇器顯示內(nèi)容ValueNumbe0value的值表小選擇了 range 中的第幾個(gè)（下標(biāo) 從0開始）

57、BindchangeEventHandlevalue 改變時(shí)觸發(fā) change 事件，event.detail = value: valuedisabledBooleanfalse是否禁用示例代碼如下： 地區(qū)選擇器 當(dāng)前選擇：arrayindexPage(data: array:美國，中國,巴西，日本,objectArray:id: 0, name:美國,id: 1, name:中國,id: 2, name:巴西,id: 3, name:日本,index: 0,bindPickerChange: function(e) console.log(picke發(fā)送選擇改變，攜帶值為,e.detail

58、.value)this.setData(index: e.detail.value)界面效果如圖所示。臼普通選擇器. 時(shí)間選擇器:mode = time時(shí)間選擇器屬性屬性默認(rèn)值說明valueString表不選中的時(shí)間，格式為 hh:mmstartString表7K后效時(shí)間范圍的開始，子符串格式為hh:mmendString表K后效時(shí)間范圍的結(jié)束，字符串格式為hh:mmbindchangeEventHandlevalue 改變時(shí)觸發(fā) change 事件，event.detail = value: valuedisabledBooleanFalse是否禁用示例代碼如下： 時(shí)間選擇器 當(dāng)前選擇：ti

59、mePage(data: time: 12:01,bindTimeChange: function(e) this.setData(time: e.detail.value)界面效果如圖所示。時(shí)間選擇器3.日期選擇器: mode = date日期選擇器屬性屬性默認(rèn)值說明valueString0表示選中的日期，格式為 YYYY-MM-DDstartString表示有效日期范圍的開始，字符串格式為YYYY-MM-DDendString表示有效日期范圍的結(jié)束，字符串格式為YYYY-MM-DDfieldsStringDay有效值為year、month、day,表示選擇器的粒度bindchangeEve

60、ntHandlevalue 改變時(shí)觸發(fā) change 事件，event.detail = value: valuedisabledBooleanFalse是否禁用示例代碼如下： 日期選擇器 當(dāng)前選擇:datePage( data: date: 2016-09-01, bindDateChange: function(e) this.setData(date: e.detail.value)界面效果如圖所示。日期選擇器4. picker-view嵌入貞囿滾動選擇器除了普通選擇器、時(shí)間選擇器、日期選擇器3種滾動選擇器之外，由L種嵌入頁面的滾動選擇器，它使用picker-view 組件在頁面里的布局