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

1、微信小程序開(kāi)發(fā) （ 五）第五章 表現(xiàn)層組件小程序組件框架構(gòu)成 （第一部分 ）小程序組件視圖容View基礎(chǔ)內(nèi) Base content圖標(biāo)icon-文字text進(jìn)度progress操作反Operation-上拉菜Acti on-sheet模態(tài)窗model自消窗toast頁(yè)面導(dǎo)Page導(dǎo)航navigator小程序組件框架構(gòu)成（第二部分）小程序組件頁(yè)面表 Page form按鈕butt on表單form輸入in put多選checkbox單選radio歹y表選picker內(nèi)嵌列 Picker-view滑選slider-切換switch-標(biāo)簽label多媒體 Multi media音頻audio視頻v

2、ideo圖片iimage小程序組件框架構(gòu)成（第三部分）小程序組件地圖map地圖map畫(huà)布canvas畫(huà)布canvas客服會(huì)sessi on客服會(huì)Con tact-butto第1節(jié)視圖容器:VIEW CONTAINER1. 普通視圖:VIEWvviewclass="flex-wrp"style="flex-direction:row;">vviewclass="flex-item bc_green">v/view>vviewclass="flex-item bc_red">v/view>

3、vviewclass="flex-item bc_blue">v/view>v/view>+縱向排列vviewclass="flex-wrp"+橫向排列style= ” flex -direction:column;" >+上下滾動(dòng)vview class="flex-item bc_green" ></view>vview class="flex-item bc_red" ></view>2. 滾動(dòng)視圖：SCROLL-VIEWvscroll-vi

4、ewscroll-y=” true ” >vviewclass= ”scroll-view-itembg=red ” ></view>vviewclass= ”scroll-view-itembg=blue ” ></view>3. 滑動(dòng)視圖：SWIPER+輪播圖interval=50vswiper indicator-dots=3autoplay=trueduration=10 >00 ovblock wx:for=imageUrls ><swiper-item>vimage src=item /></swiper

5、-item>第2節(jié)基礎(chǔ)內(nèi)容:BASE CONTENT基礎(chǔ)內(nèi)容包括：圖標(biāo),文本,進(jìn)度條.以下對(duì)三項(xiàng)內(nèi)容分別進(jìn)行詳解.1. 圖標(biāo):ICON+圖標(biāo)vicon type=success size=40 />vicon type=success size=40 />2. 文本:TEXT+文本<view><text> text </text>vbutton bindTap=add >add line</button>Add lineRemoveli nevbutton bindTap=remove >remove line<

6、;/button></view>3. 進(jìn)度條:PROGRESS20%+進(jìn)度條vprogress percent=20 show-info />vprogress percent=30 stroke-width=30 />vprogress percent=40 active />vprogress percent=35 color=pink />=表單組件+button vbutton type=pramary bindrap=hdl>v/button>+checkBoxvcheckbox value=v checked=true />

7、;Label:user- n12:12:13:+radiovradio value=v checked=true />+input vinput placeholder=enter />+label vlabel> v/label>+picker vpicker mode=time|date value=idx range=ary>vview>aryidxv/view>v/picker>第4節(jié)操作反饋 OPERATION INTEATION1. 上拉菜單Actio n-sheet: 上拉菜單;Actio n-sheet-ca ncel:上拉菜單取

8、消按鈕;詳見(jiàn)圖示。+上拉菜單<acti on-sheethidde n=truebindchange二evt >vblock wx:for-items二ary><acti on-sheet-item> itm </action-sheet-item>2. 模態(tài)窗口： MODALMODA將被廢棄，請(qǐng)使用wx.showModal來(lái)實(shí)現(xiàn)，不講.3. 自消窗口 ：TOASTTOASTS棄，請(qǐng)用 wx.showToast,不講.4. 正加載丄OADING蛙正加載+正加載<view>vloadinghidden=true > 正力口第5節(jié)頁(yè)面導(dǎo)航

9、:PAGE NAVIGATION<view>vnavigator url=url >新頁(yè)打開(kāi) </navigator>vnavigator url=url open-type=redirect > 本頁(yè)打 開(kāi)</navigator>第6節(jié)多媒體:MULTI MEDIA1. 音頻:AUDIO00:0從頭再來(lái)劉歡vaudio poster=p name=n auther=a src=s id=id controls loop></audio>vbutton type=primary bindtap=play|pause|p-14|p

10、-start>播放 | 暫停 |14 秒| 開(kāi)始 </button>(4 個(gè))Page(Onready: function(e)this.audioCtx=wx.createAudioContext(myAudio),Data: poster:img,name:n,author:a,src:s,Play2. 視頻:VIDEO<video src=s danmu-list=a enable-danmu=t danmu-btn controls ><button bindtap=get >獲取 </button><input bindbl

11、ur=blur />Page(Onready:function(e)this.videoCtx=wx.createVideoContext(),BlurSend3. 圖片:IMAGE+圖片<view>vimage style二style src=src />第7節(jié)地圖:MAP+地圖<map longitude=lo latitude=la markers=m covers=c></map>+標(biāo)記結(jié)構(gòu)Marker:longitude:lo,latitude:la,name:n,desc:d+覆蓋物結(jié)構(gòu)Cover: longitude:lo,latitude:la,iconPath:ip,rotate:r 第8節(jié)畫(huà)布:CANVAS+畫(huà)布vcanvas style=s id=id ></canvas>+JS部分Page(Var ct