第5章小程序組件-Part2電子工業(yè)出版社為了設(shè)計更加便利和更加靈活的功能頁面，微信提供了一系列功能豐富的組件，例如，scroll-view滾動組件實現(xiàn)頁面的滾動功能，結(jié)合swiper組件和swiper-item組件可實現(xiàn)輪播圖功能等。本章對小程序中常用的復(fù)合功能組件進行介紹。目錄5.1scroll-view滾動組件5.2swiper和swiper-item輪播圖組5.3navigator頁面導(dǎo)航組件5.4tabBar及其使用5.5媒體組件5.6canvas畫布組件5.7自定義組件5.8案例：美食餐廳5.9練習(xí)：選修課5.1scroll-view滾動組件scroll-view，顧名思義，就是可以滾動的組件，這是個非常常用的小程序組件。使用豎向滾動時，需要給scroll-view一個固定高度，一般通過WXSS設(shè)置height屬性。scroll-view的常用屬性及其含義如表：序號屬性名類型默認值必填說明1scroll-xbooleanfalse否允許橫向滾動2scroll-ybooleanfalse否允許縱向滾動3upper-thresholdnumber/string50否距頂部/左邊多遠時，觸發(fā)scrolltoupper事件4lower-threshold number/string50否距底部/右邊多遠時，觸發(fā)scrolltolower事件5scroll-topnumber/string無否設(shè)置豎向滾動條位置6scroll-leftnumber/string無否設(shè)置橫向滾動條位置7scroll-with-animationbooleanfalse否在設(shè)置滾動條位置時使用動畫過渡8refresher-enabledbooleanfalse否開啟自定義下拉刷新9refresher-thresholdnumber45否設(shè)置自定義下拉刷新閾值10refresher-default-stylestringblack否設(shè)置自定義下拉刷新默認樣式，支持設(shè)置black|white|none，none表示不使用默認樣式11refresher-backgroundstring#FFF否設(shè)置自定義下拉刷新區(qū)域背景顏色12show-scrollbarbooleantrue否滾動條顯隱控制(同時開啟enhanced屬性后生效)13binddragstarteventhandle無否滑動開始事件(同時開啟enhanced屬性后生效)detail{scrollTop,scrollLeft}14binddraggingeventhandle無否滑動事件(同時開啟enhanced屬性后生效)detail{scrollTop,scrollLeft}15binddragendeventhandle無否滑動結(jié)束事件(同時開啟enhanced屬性后生效)detail{scrollTop,scrollLeft,velocity}16bindscrolltouppereventhandle無否滾動到頂部/左邊時觸發(fā)17bindscrolltolowereventhandle無否滾動到底部/右邊時觸發(fā)18bindscrolleventhandle無否滾動時觸發(fā)，event.detail={scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}19bindrefresherpullingeventhandle無否自定義下拉刷新控件被下拉20bindrefresherrefresheventhandle無否自定義下拉刷新被觸發(fā)21bindrefresherrestoreeventhandle無否自定義下拉刷新被復(fù)位22bindrefresheraborteventhandle無否自定義下拉刷新被中止23enhancedbooleanfalse否啟用scroll-view增強特性24enable-flexbooleanfalse否啟用flexbox布局。開啟后，當前節(jié)點聲明了display:flex就會成為flexcontainer，并作用于其子節(jié)點。25typestringlist是渲染模式。可選值：list，列表模式，只會渲染在屏節(jié)點，會根據(jù)直接子節(jié)點是否在屏來按需渲染；custom，自定義模式，只會渲染在屏節(jié)點，子節(jié)點可以是list-view、grid-view等組件；nested，嵌套模式。5.1.1scroll-view使用舉例舉一個簡單的例子說明scroll-view組件的使用。新建一個名為mini-ch05-01的小程序工程。打開新建工程的index.wxml文件。新建的頁面默認使用了scroll-view組件。修改index.wxml文件為如下內(nèi)容：在scroll-view標簽下增加多個view組件，使其總高度大于屏幕高度，從而導(dǎo)致屏幕需要在y軸上滾動：<!--index.wxml--><navigation-bartitle="scroll-view"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewstyle="background-color:aquamarine;height:400rpx;">1</view><viewstyle="background-color:darkgrey;height:400rpx;">2</view><viewstyle="background-color:bisque;height:400rpx;">3</view><viewstyle="background-color:burlywood;height:400rpx;">4</view><viewstyle="background-color:cornsilk;height:400rpx;">5</view><viewstyle="background-color:darkcyan;height:400rpx;">6</view></scroll-view>5.1.2使用scroll-view實現(xiàn)局部頁面下拉刷新和上拉加載在編程實踐中，除了要使用全局頁面的下拉刷新和上拉加載功能外，還經(jīng)常需要用到局部頁面下拉刷新和上拉加載功能。scroll-view對局部下拉刷新和上拉加載提供了較好的支持：只需要在scroll-view組件中設(shè)置bindscrolltoupper和bindscrolltolower屬性分別指向下拉刷新和上拉加載時調(diào)用的函數(shù)即可。舉一個例子說明scroll-view的下拉刷新和上拉加載的使用。在這個例子中，用戶可以通過下拉和上拉顯示更多圖像。首先在工程mini-ch05-01中新建名為images的子目錄，并在其下放置名稱為01.jpg到09.jpg的圖像文件，然后，再新建一個名為refresh的頁面，設(shè)置refresh頁面為入口頁面，然后，修改refresh.json文件為如下內(nèi)容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改refresh.wxss文件為如下內(nèi)容：/*pages/refresh/refresh.wxss*/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}修改refresh.js文件為如下內(nèi)容：//pages/refresh/refresh.jsPage({data:{images:[]},onLoad(query){this.generateImages(4,true);},upper(){console.log("upper");this.generateImages(1,true);},lower(){console.log("lower");this.generateImages(1,false);},generateImages(num,head){letcs=[];for(leti=0;i<num;i++){lett=Math.floor(Math.random()*10);if(t>=10)t=9;if(t<=0)t=1;letc="../../images/0"+t+".jpg";cs.push(c);}if(head){cs=cs.concat(this.data.images);this.setData({images:cs});}else{this.data.images=this.data.images.concat(cs);this.setData({images:this.data.images});}}})修改refresh.wxml文件為如下內(nèi)容：<!s/refresh/refresh.wxml--><navigation-bartitle="scroll-view"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list“

bindscrolltoupper="upper"bindscrolltolower="lower"><viewwx:for="{{images}}"wx:key="*this"><imagesrc="{{item}}"mode="widthFix"style="width:100%;"></image></view></scroll-view>5.2swiper和swiper-item輪播圖組件swiper是滑塊容器，swiper-item則是滑塊內(nèi)容，結(jié)合swiper和swiper-item組件可以實現(xiàn)滑塊功能。注意，在swiper組件中只可放置swiper-item組件，否則會導(dǎo)致未定義的行為；同時，swiper-item組件也只能放置在swiper組件中。經(jīng)常在廣告或者商品推薦中看到的輪播圖就是使用swiper組件和swiper-item組件實現(xiàn)的。swiper和swiper-item組件的常用屬性分別如表所示。序號屬性名類型默認值必填說明1indicator-dotsbooleanfalse否是否顯示面板指示點2indicator-colorcolorrgba(0,0,0,.3) 否指示點顏色3indicator-active-colorcolor#000000否否

當前選中的指示點顏色4autoplaybooleanfalse否是否自動切換5currentnumber0否當前所在滑塊的index6intervalnumber5000否自動切換時間間隔7durationnumber500否滑動動畫時長8circularbooleanfalse否是否采用銜接滑動9verticalbooleanfalse否滑動方向是否為縱向10easing-functionstringdefault否指定swiper切換緩動動畫類型?？蛇x值：default，默認緩動函數(shù)；linear，線性動畫；easeInCubic，緩入動畫；easeOutCubic，緩出動畫；easeInOutCubic，緩入緩出動畫。11bindchangeeventhandle無否current改變時會觸發(fā)change事件，event.detail={current,source}12layout-typestringnormal否渲染模式?？蛇x值：normal，默認方式；stackLeft，左向堆疊；stackRight，右向堆疊；tinder，滑動卡片；transformer，過渡動畫。13indicator-typestringnormal否指示點動畫類型?？蛇x值：normal、worm、wormThin、expand、jump、scroll、slide、slideUnderground、scale、swap等。序號屬性名類型默認值必填說明1item-idstring無否該swiper-item的標識符舉一個例子演示swiper和swiper-item組件的使用。這個例子在4張圖像之間輪回滑動顯示。為此，在mini-ch05-01工程中新建名為swiper的頁面，并設(shè)置該頁面為入口頁面，然后修改swiper.json為如下內(nèi)容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改swiper.wxss為如下內(nèi)容：/*pages/swiper/swiper.wxss*/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}在swiper.js文件中將需要滑動的圖像加到data的屬性中，代碼如下：//pages/swiper/swiper.jsPage({data:{images:["../../images/01.jpg","../../images/02.jpg","../../images/03.jpg","../../images/04.jpg"]}})修改swiper.wxml為如下內(nèi)容：<!s/swiper/swiper.wxml--><navigation-bartitle="scroll-view"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><swiperindicator-dots="{{true}}"autoplay="{{true}}"interval="3000"duration="500"><swiper-itemwx:for="{{images}}"><imagesrc="{{item}}"mode="widthFix"></image></swiper-item></swiper></scroll-view>5.3navigator頁面導(dǎo)航組件使用navigator組件可以實現(xiàn)頁面之間的導(dǎo)航功能。navigator組件非常類似HTML頁面的<a>超鏈接標簽的功能，但是，在navigator組件下只能嵌套文本節(jié)點，而不能嵌套其他普通節(jié)點。navigator組件的常用屬性如表所示：序號屬性名類型默認值必填說明1targetstringself否在哪個目標上發(fā)生跳轉(zhuǎn)，默認當前小程序。可選值：self，當前小程序；miniProgram，其它小程序。2urlstring無否當前小程序內(nèi)的跳轉(zhuǎn)鏈接3open-type stringnavigate否跳轉(zhuǎn)方式?？蛇x值：navigate，頁面跳轉(zhuǎn)；switchTab，切換Tab；reLaunch，重新啟動頁面；navigateBack回退頁面；exit，退出小程序，當屬性target="miniProgram"時生效。4deltanumber1否當open-type為'navigateBack'時有效，表示回退的層數(shù)5app-idstring無否當target="miniProgram"且open-type="navigate"時有效，要打開的小程序appId。6pathstring無否當target="miniProgram"且open-type="navigate"時有效，打開的頁面路徑，如果為空則打開首頁。7extra-dataobject無否當target="miniProgram"且open-type="navigate/navigateBack"時有效，需要傳遞給目標小程序的數(shù)據(jù)，目標小程序可在App.onLaunch()，App.onShow()中獲取到這份數(shù)據(jù)8hover-classstringnavigator-hover否按下時的樣式類。當hover-class="none"時，沒有點擊態(tài)效果。9hover-stop-propagationbooleanfalse否是否阻止本節(jié)點的祖先節(jié)點出現(xiàn)點擊態(tài)10hover-start-timenumber50否按住后多久出現(xiàn)點擊態(tài)，單位毫秒11hover-stay-timenumber600否手指松開后點擊態(tài)保留時間，單位毫秒12bindsuccessstring無否當target="miniProgram"且open-type="navigate/navigateBack"時有效時有效，跳轉(zhuǎn)小程序成功13bindfailstring無否當target="miniProgram"且open-type="navigate/navigateBack"時有效時有效，跳轉(zhuǎn)小程序失敗14bindcompletestring無否當target="miniProgram"且open-type="navigate/navigateBack"時有效時有效，跳轉(zhuǎn)小程序完成舉一個例子演示navigator組件的使用。在mini-ch05-01工程中新建名稱為home的頁面，從這個home頁面可以導(dǎo)航到所有之前的頁面，包括：index頁面、refresh頁面和swiper頁面。首先在mini-ch05-01工程中新建home頁面，并設(shè)置home頁面為入口頁面。然后修改home.json為如下內(nèi)容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改home.wxss樣式文件為如下內(nèi)容：/*pages/home/home.wxss*/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}.navigator-hover{color:blue;}修改home.wxml為如下內(nèi)容：<!s/home/home.wxml--><navigation-bartitle="Home"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><navigatorurl="../index/index">navigatetoindex<index></index></navigator><navigatorurl="../refresh/refresh"open-type="redirect">redirecttorefresh</navigator><navigatorurl="../swiper/swiper"open-type="reLaunch">relaunchswiper</navigator></scroll-view><navigation-bartitle="scroll-view"back="{{true}}"color="black"background="#FFF"></navigation-bar>5.4tabBar及其使用小程序可以是多Tab應(yīng)用：可以通過多個標簽實現(xiàn)小程序多個頁面之間的快速切換。為此，只需在小程序的app.json配置文件中配置tabBar對象屬性即可。tabBar對象的常用屬性如表。序號屬性名類型默認值必填說明1colorHexColor無否tab上的文字默認顏色，僅支持十六進制顏色2selectedColorHexColor無否tab上的文字選中時的顏色，僅支持十六進制顏色3backgroundColorHexColor無否tab的背景色，僅支持十六進制顏色4borderStylestringblack否tabbar上邊框的顏色，僅支持black/white5listArray無是tab的列表，最少2個、最多5個tab6positionstringbottom否tabBar的位置，僅支持bottom/top7custombooleanfalse否自定義tabBar其中的list屬性是一個數(shù)組，數(shù)組的每個元素是一個對象。每個元素對象包含如表。序號屬性名類型默認值必填說明1pagePathstring無是頁面路徑，必須在pages中先定義2textstring無是tab上按鈕文字3iconPathstring無否圖片路徑，icon大小限制為40kb，建議尺寸為81px*81px，不支持網(wǎng)絡(luò)圖片。當position為top時，不顯示icon。4selectedIconPathstring無否選中時的圖片路徑，icon大小限制為40kb，建議尺寸為81px*81px，不支持網(wǎng)絡(luò)圖片。當position為top時，不顯示icon。舉一個例子演示tabBar的使用。為了簡單，這個例子中只是使用顯示圖像的多個簡單頁面組成的tabBar頁面。為此，新建名為mini-ch05-02的小程序工程，然后新建images目錄以存放圖像，并在其下放置要在頁面上顯示的圖像和tabBar圖標。再新建3個頁面（加上自動創(chuàng)建的index頁面，程序共有4個頁面），如圖。修改app.json文件為如下內(nèi)容：{"pages":["pages/index/index","pages/tab1/tab1","pages/tab2/tab2","pages/tab3/tab3"],"entryPagePath":"pages/tab3/tab3","tabBar":{"list":[{"pagePath":"pages/index/index","text":"雪景","iconPath":"images/icon01.png","selectedIconPath":"images/icon01.png"},{"pagePath":"pages/tab1/tab1","text":"水景","iconPath":"images/icon02.png","selectedIconPath":"images/icon02.png"},{"pagePath":"pages/tab2/tab2","text":"山水景","iconPath":"images/icon03.png","selectedIconPath":"images/icon03.png"},{"pagePath":"pages/tab3/tab3","text":"草原景","iconPath":"images/icon04.png","selectedIconPath":"images/icon04.png"}]},//以下省略修改tab1.json、tab2.json和tab3.json為如下內(nèi)容：修改tab1.wxss、tab2.wxss和tab3.wxss文件為如下內(nèi)容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}修改index.wxml、tab1.wxml、tab2.wxml、tab3.wxml文件，分別顯示4張不同的圖像。例如，tab1.wxml文件內(nèi)容如下：<navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><imagesrc="../../images/02.jpg"mode="aspectFill"></image>5.5媒體組件媒體組件用于對多媒體數(shù)據(jù)進行處理，包括：播放音頻、播放視頻、使用相機拍照等。媒體組件，包括音頻組件、視頻組件、相機組件等，結(jié)合微信API更能發(fā)揮這些組件的功能。本節(jié)對媒體組件的簡單使用進行介紹，在后續(xù)章節(jié)，還會結(jié)合微信API，對這些組件的深入使用做進一步介紹。5.5.1audio音頻組件使用audio組件可以播放音頻，結(jié)合微信API還可以對音頻的播放過程進行控制。audio組件的常用屬性如表所示。序號屬性名類型默認值必填說明1idstring無否audio組件的唯一標識符2srcstring無否要播放音頻的資源地址3loopbooleanfalse否是否循環(huán)播放4controlsbooleanfalse否是否顯示默認控件5posterstring無否默認控件上的音頻封面的圖片資源地址，如果controls屬性值為false則設(shè)置poster無效6namestring未知音頻否默認控件上的音頻名字，如果controls屬性值為false則設(shè)置name無效7authorstring未知作者否默認控件上的作者名字，如果controls屬性值為false則設(shè)置author無效8binderroreventhandle無否當發(fā)生錯誤時觸發(fā)error事件，detail={errMsg:MediaError.code}9bindplayeventhandle無否當開始/繼續(xù)播放時觸發(fā)play事件10bindpauseeventhandle無否當暫停播放時觸發(fā)pause事件11bindtimeupdateeventhandle無否當播放進度改變時觸發(fā)timeupdate事件，detail={currentTime,duration}12bindended eventhandle無否當播放到末尾時觸發(fā)ended事件5.5.2video視頻組件使用video組件可以播放視頻，結(jié)合微信提供的API還可以控制視頻的播放過程。video組件的常用屬性及其含義如表所示。序號屬性名類型默認值必填說明1idstring無否video組件的唯一標識符2srcstring無否要播放視頻的資源地址，支持網(wǎng)絡(luò)路徑、本地臨時路徑、云文件ID等3durationnumber無否指定視頻時長4controlsbooleantrue否是否顯示默認播放控件（播放/暫停按鈕、播放進度、時間）5danmu-listArray<object>無否彈幕列表6danmu-btnbooleanfalse否是否顯示彈幕按鈕，只在初始化時有效，不能動態(tài)變更7enable-danmubooleanfalse否是否展示彈幕，只在初始化時有效，不能動態(tài)變更8autoplaybooleanfalse否是否自動播放9loopbooleanfalse否是否循環(huán)播放10mutedbooleanfalse否是否靜音播放11initial-time number0否指定視頻初始播放位置12directionnumber無否設(shè)置全屏?xí)r視頻的方向，不指定則根據(jù)寬高比自動判斷?？蛇x值：0，正常豎向；90，屏幕逆時針90度；-90，屏幕順時針90度。13show-progressbooleantrue否若不設(shè)置，寬度大于240時才會顯示14show-fullscreen-btnbooleantrue否是否顯示全屏按鈕15show-play-btnbooleantrue否是否顯示視頻底部控制欄的播放按鈕16object-fitstringcontain否當視頻大小與video容器大小不一致時，視頻的表現(xiàn)形式?？蛇x值：contain，包含；fill，填充；cover，覆蓋。17posterstring無否視頻封面的圖片網(wǎng)絡(luò)資源地址或云文件ID。若controls屬性值為false則設(shè)置poster無效18show-mute-btnbooleanfalse否是否顯示靜音按鈕19titlestring無否視頻的標題，全屏?xí)r在頂部展示20play-btn-positionstringbottom否播放按鈕的位置?？蛇x值：bottom，controlsbar上；center，視頻中間。21auto-pause-if-navigatebooleantrue否當跳轉(zhuǎn)到本小程序的其他頁面時，是否自動暫停本頁面的視頻播放22enable-auto-rotationbooleanfalse否是否開啟手機橫屏?xí)r自動全屏，當系統(tǒng)設(shè)置開啟自動旋轉(zhuǎn)時生效23bindplayeventhandle無否當開始/繼續(xù)播放時觸發(fā)play事件24bindpauseeventhandle無否當暫停播放時觸發(fā)pause事件25bindended eventhandle無否當播放到末尾時觸發(fā)ended事件26bindtimeupdateeventhandle無否播放進度變化時觸發(fā)，event.detail={currentTime,duration}。觸發(fā)頻率250ms一次。27binderroreventhandle無否視頻播放出錯時觸發(fā)舉一個例子演示video組件的使用。這個例子直接播放存儲網(wǎng)絡(luò)服務(wù)器上的一個小視頻。為此，新建名為mini-ch05-03的小程序工程，修改index.js文件為如下內(nèi)容：//index.jsPage({videoErrorCallback(e){console.log('視頻錯誤信息:')console.log(e.detail.errMsg)}})修改index.wxml文件為如下內(nèi)容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><videoid="myVideo"src="視頻網(wǎng)絡(luò)地址"binderror="videoErrorCallback"show-center-play-btn='{{false}}'show-play-btn="{{true}}"controls></video></scroll-view>運行這個程序，例如，將“視頻網(wǎng)絡(luò)地址”修改為騰訊視頻的一個教學(xué)地址，則顯示如圖所示的界面：5.5.3camera相機組件通過camera組件可以實現(xiàn)對手機上相機的控制，例如，使用相機拍照或者識別某個二維碼等功能。結(jié)合微信API，可以最大限度使用camera組件的功能。camera組件的常用屬性及其含義如表。序號屬性名類型默認值必填說明1modestringnormal否應(yīng)用模式，只在初始化時有效，不能動態(tài)變更?？蛇x值：normal，相機模式；scanCode，掃碼模式。2resolutionstringmedium否分辨率，不支持動態(tài)修改?？蛇x值：low，低；medium，中；high，高。3device-positionstringback否攝像頭朝向?？蛇x值：front，前置；back，后置。4flashstringauto否閃光燈，值為auto,on,off，torch5frame-sizestringmedium否指定期望的相機幀數(shù)據(jù)尺寸?？蛇x值：small，小尺寸幀數(shù)據(jù)；medium，中尺寸幀數(shù)據(jù)；large，大尺寸幀數(shù)據(jù)。6bindstopeventhandle無否攝像頭在非正常終止時觸發(fā)，如退出后臺等情況7binderroreventhandle無否用戶不允許使用攝像頭時觸發(fā)8bindinitdoneeventhandle無否相機初始化完成時觸發(fā)，e.detail={maxZoom}9bindscancodeeventhandle無否在掃碼識別成功時觸發(fā)，僅在mode="scanCode"時生效舉一個例子演示camera組件的使用。在mini-ch05-03工程中新建名為camera的頁面，并設(shè)置該頁面為入口頁面。然后修改camera.json為如下內(nèi)容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar"}}修改camera.wxss為如下內(nèi)容：/*pages/camera/camera.wxss*/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}.camera{width:100%;height:300px;}修改camera.js為如下內(nèi)容：修改camera.wxml為如下內(nèi)容：//pages/camera/camera.jsPage({error(e){console.log(e.detail)}})<!s/camera/camera.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><cameraclass="camera"resolution="high"device-position="back"flash="off"binderror="error"></camera></scroll-view>在camera.wxml中，使用camera組件操作相機。由于需要操作相機，因此，不能在模擬器里運行。為此，在開發(fā)者工具中，點擊“預(yù)覽”按鈕，如圖所示：在彈出的窗口將顯示一個二維碼，用手機掃描這個二維碼，即可在物理手機上運行這個程序。5.6canvas畫布組件類似于HTML5，微信也提供了canvas畫布組件，通過canvas組件，可以通過程序創(chuàng)建復(fù)雜的圖形外觀。canvas組件的常用屬性及其含義如表所示。序號屬性名類型默認值必填說明1typestring無否指定canvas類型，可選值：2d，webgl。2canvas-idstring無否canvas組件的唯一標識符，若指定了type則無需再指定該屬性。3disable-scrollbooleanfalse否當在canvas中移動時且有綁定手勢事件時，禁止屏幕滾動以及下拉刷新。4bindtouchstarteventhandle無否手指觸摸動作開始5bindtouchmoveeventhandle無否手指觸摸后移動6bindtouchendeventhandle無否手指觸摸動作結(jié)束7bindtouchcanceleventhandle無否手指觸摸動作被打斷，如來電提醒，彈窗等8bindlongtapeventhandle無否手指長按500ms之后觸發(fā)，觸發(fā)了長按事件后進行移動不會觸發(fā)屏幕的滾動9binderroreventhandle無否當發(fā)生錯誤時觸發(fā)error事件，detail={errMsg}5.7自定義組件在編程實踐中開發(fā)者可以將頁面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁面中重復(fù)使用；也可以將復(fù)雜的頁面拆分成多個低耦合的模塊，有助于代碼維護。自定義組件在使用時與基礎(chǔ)組件非常相似。5.7.1創(chuàng)建自定義組件類似于頁面，一個自定義組件由后綴為.json、.wxml、.wxss和.js4個文件組成。并且需要首先在.json文件中進行自定義組件聲明，如下面代碼片段所示：同時，在wxml文件中編寫組件模板，在wxss文件中加入組件樣式，這些代碼的寫法與頁面的寫法一致。例如，在自定義組件的.wxss文件中定義了如下樣式：但是，要注意，在組件的.wxss文件中不應(yīng)使用ID選擇器、屬性選擇器和標簽名選擇器。{"component":true}/*這里的樣式只應(yīng)用于這個自定義組件*/.inner{color:red;}然后，在自定義組件的.wxml文件中定義組件的內(nèi)容：需要在自定義組件的.js文件中使用Component()函數(shù)注冊組件，并提供組件的屬性定義、內(nèi)部數(shù)據(jù)和自定義方法：組件的屬性值和內(nèi)部數(shù)據(jù)將被用于組件wxml的渲染，其中，屬性值是可由組件外部傳入的。例如：<!--這是自定義組件的內(nèi)部WXML結(jié)構(gòu)--><viewclass="inner">{{innerText}}</view><slot></slot>Component({properties:{//這里定義了innerText屬性，//屬性值可以在組件使用時指定innerText:{type:String,value:'defaultvalue',}},data:{//這里是一些組件內(nèi)部數(shù)據(jù)someData:{}},methods:{//這里是一個自定義方法customMethod:function(){}}})5.7.2使用自定義組件要使用自定義組件，首先需要在頁面的.json文件中進行引用聲明，在引用聲明中需要提供每個自定義組件的標簽名和對應(yīng)的自定義組件文件路徑：引入了自定義組件后，即可像使用普通組件一樣使用自定義組件：節(jié)點名即自定義組件的標簽名，節(jié)點屬性即傳遞給組件的屬性值：{"usingComponents":{"component-tag-name":"path/to/the/custom/component"}}<view><!--以下是對一個自定義組件的引用--><component-tag-nameinner-text="Sometext"></component-tag-name></view>5.7.3自定義組件舉例使用微信開發(fā)者工具創(chuàng)建的微信小程序工程就已經(jīng)使用了自定義組件：一個名稱為navigation-bar的自定義組件。例如，以上一節(jié)相機操作的例子為例，如圖所示：在頁面camera的camera.json中引用了該組件，并且，在camera.wxml文件中使用了該自定義組件，代碼如下：當然，也可以打開navigation-bar自定義組件的定義文件，注意，共有4個文件。現(xiàn)在打開navigation-bar.json文件如下：<!s/camera/camera.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><cameraclass="camera"resolution="high"device-position="back"flash="off"binderror="error"></camera></scroll-view>{

"component":true,"styleIsolation":"apply-shared","usingComponents":{}}5.7.4使用第三方WeUI組件庫WeUI組件庫是微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計的一套完整的UI樣式庫和組件庫，WeUI組件庫是基于WeUI樣式庫做了組件化處理，開發(fā)者可以便捷地使用。為了使用WeUI組件庫，需要首先在app.json中使用引入WeUI組件庫：然后，在需要使用WeUI的頁面的.json文件中導(dǎo)入需要使用的組件：{"useExtendedLib":{"weui":true}}{"usingComponents":{"mp-dialog":"weui-miniprogram/dialog/dialog","mp-form":"weui-miniprogram/form/form"}}舉一個例子演示如何使用WeUI組件。首先，在mini-ch05-03小程序工程新建名為weui的頁面，設(shè)置該頁面為入口頁面，然后修改app.json文件，在其中添加："useExtendedLib":{"weui":true}然后，修改weui.json為如下內(nèi)容：修改weui.js文件為如下內(nèi)容：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar","mp-dialog":"weui-miniprogram/dialog/dialog"}}//pages/weui/weui.jsPage({data:{buttons:[{text:'取消'},{text:'確認'}]},tapDialogButton(e){console.log(e);}})最后，修改weui.wxml文件為如下內(nèi)容，在這個文件中，可以像使用微信其他組件一樣使用mp-dialog組件：<!s/weui/weui.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><mp-dialogtitle="關(guān)閉應(yīng)用程序"show="{{true}}"bindbuttontap="tapDialogButton"buttons="{{buttons}}"><view>你確定要關(guān)閉嗎?</view></mp-dialog></scroll-view>WeUI組件庫提供了很多類似組件，如表所示。這些組件的引用方式類似對dialog組件的引用。序號組件名稱中文名稱描述1Badge徽章出現(xiàn)在按鈕、圖標附近的數(shù)字或者狀態(tài)標記2Gallery畫廊用于多張圖片展示，類似API的wx.previewImage的功能。關(guān)于微信API在后續(xù)章節(jié)介紹。3Loading加載加載數(shù)據(jù)時的loading效果4Icon圖標便利的圖標組件5Form表單組件Form表單組件，結(jié)合Cell、Checkbox-group、Checkbox組件等做表單校驗6FormPage表單頁面表單頁面，規(guī)定了標準表單的頂部的標題和底部的按鈕提示等區(qū)域的規(guī)范7Cells列表分組Cells是列表分組，常用于嵌套一組Cell或者Checkbox，注意，Checkbox-group和Cell組件都必須放在Cells組件下面8Checkbox-group，Checkbox多選項組件Checkbox-group是由一組單選或者多選Checkbox組件組成9Slideview左滑刪除組件左滑刪除組件10Uploader圖片上傳圖片上傳Uploader組件11Dialog彈窗組件Dialog彈窗組件12Msg消息組件Msg組件提供操作確認頁或操作成功或失敗的標準的確認頁的樣式13Toptips頂部錯誤提示組件頂部錯誤提示組件，常用于表單校驗或提交請求到后臺成功或失敗的錯誤提示14Half-Screen-Dialog半屏彈窗半屏彈窗，輔助完成當前頁面任務(wù)時；提醒用戶并引導(dǎo)用戶的下一步操作；用戶主動發(fā)起的任務(wù)時15ActionSheet底部彈起的操作按鈕組件底部彈起的操作按鈕組件16Navigation頂部導(dǎo)航組件小程序的頂部導(dǎo)航組件，當頁面配置navigationStyle設(shè)置為custom的時候可以使用此組件替代原生導(dǎo)航欄17TabbarTabbar組件Tabbar組件，也可以用來作為小程序的自定義Tabbar使用18Searchbar搜索組件搜索組件Searchbar提供搜索的功能，并展示搜索的結(jié)果5.8案例：美食餐廳使用微信小程序進行餐廳點餐是一項非常有代表性的應(yīng)用，這個應(yīng)用不僅可以方便用戶，也為商家?guī)砹吮憷１景咐帉懸粋€簡單的小程序，用戶通過這個小程序可以完成餐廳自助點餐。5.8.1案例目標編寫一個微信小程序，這個小程序有3個Tab頁面：湘菜、粵菜、結(jié)算。在“湘菜”頁面，列表多個湘菜，用戶在此處可以選點湘菜；同理，在“粵菜”頁面，用戶可以選點粵菜。點餐后，用戶可以在“結(jié)算”頁面查看自己所點選的菜單。5.8.2案例分析包括3個Tab，可以使用tabBar配置小程序的導(dǎo)航標簽。在“湘菜”和“粵菜”頁面，為了頁面的美觀，在頁面的頂部使用輪播圖來輪播湘菜或粵菜的名菜，在輪播圖下方，采用列表形式列出菜的圖片、菜名、菜的介紹、菜的價格、點菜按鈕，當用戶點擊某個菜單列表項的“點菜”按鈕時，將所選菜的ID好保存到全局變量中。在任何時候，用戶可以點擊“結(jié)算”標簽查看自己以點選的菜單，并可以在頁面中刪除已經(jīng)點選的菜單。為了實現(xiàn)如下這些功能，需要在湘菜頁面和粵菜頁面的.js文件中保存湘菜和粵菜的相關(guān)信息，包括菜的圖片、菜名、菜的介紹、菜的價格等，然后，在各自頁面渲染這些信息并顯示在頁面上。為了保存用戶點選的菜單，需要在app.js中定義一個全局變量，用于保存用戶所選。本案例也使用了WeUI第三方組件的toptips組件：當用戶點選一個菜單時，在屏幕的頂上通過toptips組件顯示一天信息，提示用戶點選了哪個菜。5.8.3案例實施新建名為mini-ch05-04的小程序工程，并新建名為yue、cart的頁面，分別表示粵菜頁面和結(jié)算頁面，同時，新建images目錄，用于存放圖片等。然后，修改app.js文件如下：//app.jsApp({global:{selected:[]}})修改app.json文件如下：{"pages":["pages/index/index","pages/yue/yue","pages/cart/cart"],"useExtendedLib":{"weui":true},"tabBar":{"list":[{"pagePath":"pages/index/index","text":"湘菜","iconPath":"images/icon1.png","selectedIconPath":"images/icon1.png"},{"pagePath":"pages/yue/yue","text":"粵菜","iconPath":"images/icon2.png","selectedIconPath":"images/icon2.png"},{"pagePath":"pages/cart/cart","text":"結(jié)算","iconPath":"images/cart.png","selectedIconPath":"images/cart.png"}]},//以下省略現(xiàn)在編寫“湘菜”頁面，也就是工程里的index頁面。修改index.json代碼如下：{"usingComponents":{"navigation-bar":"/components/navigation-bar/navigation-bar","mp-toptips":"weui-miniprogram/toptips/toptips"}}修改index.wxss文件為如下內(nèi)容：/**index.wxss**/page{height:100vh;display:flex;flex-direction:column;}.scrollarea{flex:1;overflow-y:hidden;}.cai{margin-top:10px;}.image{width:100vw;}.text{position:relative;top:-20px;margin-left:10px;font-size:small;}修改index.js文件為如下內(nèi)容：//index.jsPage({data:{message:"",eatings:[{name:'爆炒雞爪',image:'../../images/xiang01.jpg',desc:'辣椒爆炒，非常美味，好吃不貴。',price:24.9},{name:'大蒜臘肉',image:'../../images/xiang02.jpg',desc:'大蒜臘肉，湖南特產(chǎn)，非常美味，好吃不貴。',price:29.9},{name:'醬油魷魚',image:'../../images/xiang03.jpg',desc:'醬油魷魚，特制醬油腌制，加上大火的味道，非常美味。',price:19.9},{name:'干辣椒炒雞',image:'../../images/xiang04.jpg',desc:'干辣椒炒雞，小小的土雞，加上大火的味道，非常美味。',price:45.9},{name:'剁椒魚頭',image:'../../images/xiang05.jpg',desc:'剁椒魚頭，來自洞庭湖的大魚頭，加上特制的辣椒，無言...',price:58.9},{name:'姜絲黃牛肉',image:'../../images/xiang06.jpg',desc:'姜絲黃牛肉，來自湘西，加上特制的辣椒，美味...',price:48.9}]},tapcai(e){letapp=getApp();letwhich=e.currentTarget.dataset.which;app.global.selected.push(this