微信小程序開發(fā)五

1、微信小程序開發(fā) （五 ）第五章 表現(xiàn)層組件小程序組件框架構(gòu)成部分 ）小程序組件視圖容View container普通視View-滾動視Scroll-view-滑動視swiper基礎(chǔ)內(nèi)Base content圖標(biāo)icon- 文字text 進(jìn)度progress操作反Operati on上拉菜Acti on-sheet模態(tài)窗model自消窗toast頁面導(dǎo)Page n avigati on導(dǎo)航n avigator小程序組件框架構(gòu)成（第二部分）小程序組件頁面表Page form按鈕butt on表單form輸入in put多選checkbox單選radio列表選picker內(nèi)嵌列Picker-view

2、滑選slider切換switch標(biāo)簽label多媒體Multi media音頻audio視頻video圖片iimage小程序組件框架構(gòu)成（第三部分）小程序組件地圖map地圖map畫布canvas畫布canvas客服會sessi on客服會Con tact-button第1節(jié) 視圖容器:VIEW CONTAINER1. 普通視圖:VIEW2. 滾動視圖：SCROLL-VIEW+橫向排列vviewclass="flex-wrp"style="flex-directi on: row;"><viewclass="flex-itembc_g

3、ree n></view><viewclass="flex-itembc_red"></view><viewclass="flex-itembc_blue"></view></view>+上下滾動vscroll-view scroll-y=” true” ><viewclass=” scroll-view-itembg=red” ></view><viewclass=” scroll-view-itembg=blue” ></vi

4、ew>3. 滑動視圖：SWIPER+輪播圖vswiper indicator-dots=3 autoplay=true interval=50 durati on=10>vblock wx:for=imageUrls ><swiper-item>vimage src=item />第2節(jié) 基礎(chǔ)內(nèi)容:BASE CONTENT基礎(chǔ)內(nèi)容包括：圖標(biāo)，文本，進(jìn)度條 以下對三項內(nèi)容分別進(jìn)行詳解1. 圖標(biāo):ICON+圖標(biāo)<ic on type=success size=40 /><ic on type=success size=40 />2. 文本

5、:TEXT+文本<view><text> text </text>Add lineRemove linevbutt on bin dTap=add>add lin e</butt on><butt onbin dTap=remove>remove3. 進(jìn)度條：PROGRESS20+進(jìn)度條vprogressperce nt=20 show-i nfo/>vprogressperce nt=30 stroke-width=30/>vprogressperce nt=40 activevprogressperce nt=3

6、5 color=p ink />=表單組件+butt onvbutt on type=pramary bin drap=hdl>v/butt on>Label:user- name12:512:513:00+checkBoxvcheckbox value=v checked=true />+radio<radio value=v checked=true />+i nput<in put placeholder=e nter />+label<label> </label>第4節(jié) 操作反饋 OPERATION INTEAT

7、ION1.上拉菜單Actio n-sheet上 拉菜單;Actio n-sheet-item上拉菜單項目;Actio n-sheet-ca nee上拉菜單取消按鈕;詳見圖示。+上拉菜單<act ion-sheethidde n=true bin dcha nge=ev>vblock wx:for-items=ary ><action-sheet-item>itm </action-sheet-item>2 模態(tài)窗口： MODALMODAL將被廢棄，請使用wx.showModal來實現(xiàn)，不講.3自消窗口 ：TOASTTOAST將棄，請用wx.showTo

8、as不講.4. 正加載:LOADING+正加載崇正加載<view>vloading hidden=true>正加載v/loading>頁簽切換<view>第5節(jié) 頁面導(dǎo)航：PAGE NAVIGATION<navigator url=url > 新頁打開 </navigator> <navigator url=url open-type=redirec> 本頁打第6節(jié)多媒體:MULTI MEDIA1.音頻:AUDIO從頭再來00:00劉歡vaudio poster=p n ame=n auther=a src=s id=id

9、 con trols loo>v/audio>Page(On readyfu nctio n(e)this.audioCtx=wx.createAudioC on text(myAudio),Data:poster:img, name: n,author:a,src:s,Playfu nctio n() this.audioCtx.play(),2.視頻:VIDEO<video src=sdanm u-list=aen able-da nmu=tdanm u-bt n con trols><butt on bin dtap=get> 獲取 </butt

10、 on>Page(On readyfu nction( e)this.videoCtx=wx.createVideoCo ntext(),Blur:fu nctio n( e)this.iptVal=e.datail.value3.圖片:IMAGE+圖片<view>vimage style=style src=src />第7節(jié)地圖:MAP+地圖<map Ion gitude=lo latitude=la markers=m covers=c></map>+標(biāo)記結(jié)構(gòu)Marker:l on gitude:lo,latitude:la, name: n,desc:d第8節(jié)畫布:CANVAS+畫布<ca nv asstyle=s id=id>v/ca nv a