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

1、微信小程序開發(fā)(五)第五章 表現(xiàn)層組件小程序組件框架構(gòu)成(第一部分)小程序組件（啟）視圖容器View container普通視圖View滾動視圖Scroll-view滑動視圖swiper基礎(chǔ)內(nèi)容Base content圖標icon文字text進度progress操作反饋Operation interation上拉菜單Action-sheet模態(tài)窗口model自消窗口toast頁面導航Page navigation導航navigator小程序組件框架構(gòu)成(第二部分)小程序組件（承）頁面表單Page form按鈕button表單form輸入input多選checkbox單選radio列表選pick

2、er內(nèi)嵌列選Picker-view滑選slider切換switch標簽label多媒體Multi media音頻audio視頻video圖片iimage小程序組件框架構(gòu)成(第三部分)小程序組件（承）地圖map地圖map畫布canvas畫布canvas客服會話session客服會話Contact-button第1節(jié) 視圖容器:VIEW CONTAINER1.普通視圖:VIEW+橫向排列 <view class="flex-wrp" style="flex-direction:row;"> <view class="flex-it

3、em bc_green"></view> <view class="flex-item bc_red"></view> <view class="flex-item bc_blue"></view> </view>+縱向排列 <view class="flex-wrp" style=”flex-direction:column;"> <view class="flex-item bc_green"&g

4、t;</view> <view class="flex-item bc_red"></view> <view class="flex-item bc_blue"></view> </view>2.滾動視圖:SCROLL-VIEW+上下滾動<scroll-view scroll-y=”true”><view class=”scroll-view-item bg=red”></view><view class=”scroll-view-item

5、bg=blue”></view></scroll-view>+左右滾動<scroll-view class=”scroll-view-h” scroll-x=”true”><view class=”scroll-view-item_h bg=red”></view><view class=”scroll-view-item_h bg=blue”></view></scroll-view>3.滑動視圖:SWIPER+輪播圖<swiper indicator-dots=3 autoplay=

6、true interval=50 duration=10><block wx:for=imageUrls><swiper-item><image src=item /></swiper-item></block></swiper>第2節(jié) 基礎(chǔ)內(nèi)容:BASE CONTENT基礎(chǔ)內(nèi)容包括:圖標,文本,進度條.以下對三項內(nèi)容分別進行詳解.1. 圖標:ICON+圖標<icon type=success size=40 /><icon type=success size=40 />2. 文本:TEXT+

7、文本<view><text>text</text><button bindTap=add>add line</button><button bindTap=remove>remove line</button></view>Add lineRemove line3. 進度條:PROGRESS+進度條<progress percent=20 show-info /><progress percent=30 stroke-width=30 /><progress perce

8、nt=40 active/><progress percent=35 color=pink />20%第3節(jié) 頁面表單:PAGE FORM=表單組件+button<button type=pramary bindrap=hdl></button>+checkBox<checkbox value=v checked=true />+radio<radio value=v checked=true />+input<input placeholder=enter />+label<label></lab

9、el>+picker<picker mode=time|date value=idx range=ary><view>aryidx</view></picker>+slider<slider step=1 bindchange=evt />+switch<switch bindchange=evt checked />+textArea<textArea></textArea>Label:user-name12:5912:5813:00第4節(jié) 操作反饋:OPERATION INTEATION1

10、.上拉菜單Action-sheet:上拉菜單；Action-sheet-item:上拉菜單項目；Action-sheet-cancel:上拉菜單取消按鈕；詳見圖示。+上拉菜單<action-sheet hidden=true bindchange=evt><block wx:for-items=ary><action-sheet-item>itm</action-sheet-item></block><action-sheet-cancel>取消</action-sheet-cancel></action

11、-sheet>2模態(tài)窗口：MODALMODAL將被廢棄,請使用wx.showModal來實現(xiàn),不講.3.自消窗口:TOASTTOAST將棄,請用wx.showToast,不講.4.正加載:LOADING+正加載<view><loading hidden=true>正加載</loading></view>正加載第5節(jié) 頁面導航:PAGE NAVIGATION<view><navigator url=url>新頁打開</navigator><navigator url=url open-type=red

12、irect>本頁打開</navigator><navigator url=url open-type=swictTab>頁簽切換</navigator></view>新頁打開本頁打開頁簽切換第6節(jié) 多媒體:MULTI MEDIA1. 音頻:AUDIO從頭再來劉 歡00:00<audio poster=p name=n auther=a src=s id=id controls loop></audio><button type=primary bindtap=play|pause|p-14|p-start>

13、;播放|暫停|14秒|開始</button>(4個)Page(Onready:function(e)this.audioCtx=wx.createAudioContext(myAudio),Data:poster:img,name:n,author:a,src:s,Play:function()this.audioCtx.play(),)2. 視頻:VIDEO00:04<video src=s danmu-list=a enable-danmu=t danmu-btn controls><button bindtap=get>獲取</button>

14、;<input bindblur=blur /><button bindtap=send>發(fā)送</button></video>Page(Onready:function(e)this.videoCtx=wx.createVideoContext(),Blur:function(e)this.iptVal=e.datail.valueSendDanmu(text:xxx,color:rgb)3. 圖片:IMAGE+圖片<view><image style=style src=src /></view>第7節(jié) 地圖:MAP+地圖<map longitude=lo latitude=la markers=m covers=c></map>+標記結(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é) 畫布:CANVAS+畫布<canvas style=s id=id></canvas>+JS部分Page(Var ctx=