1、微信小程序開發(fā) （ 五）第五章 表現(xiàn)層組件小程序組件框架構(gòu)成 （第一部分 ）小程序組件視圖容 View container普通視View滾動視Scroll-view-滑動視swiper基礎(chǔ)內(nèi)Base content圖標(biāo)icon文字text- 進(jìn)度progress操作反Operatio n-上拉菜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

2、-view滑選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.普通視圖:VIEW+橫向排列vviewclass="flex-wrp"vviewclass="flex-item bc_green">v/view>vviewclass="flex-item bc_red&q

3、uot;>v/view>vviewclass="flex-item bc_blue">v/view></view>+縱向排列vviewclass="flex-wrp"style= ” flex -direction:column;">vviewclass="flex-item bc_green">v/view>vviewclass="flex-item bc_red">v/view>style="flex-direction:ro

4、w;"滾動視圖：SCROLL-VIEW+上下滾動vscroll-view scroll-y= ” true ” >vviewclass= ” scroll-view-itembg=red ” ></view><viewclass= ” scroll-view-itembg=blue ” ></view>v/scroll-view>+左右滾動滑動視圖:SWIPER+輪播圖interval=50<swiper indicator-dots=3autoplay=trueO O Oduration=10 ><block

5、wx:for=imageUrls ><swiper-item><image src=item />v/swiper-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)<icon type=success size=40 /><icon type=success size=40 />2. 文本:TEXT+文本<view><text> text </text> vbutton bindTap=add >add l

6、ine</button>Add linevbutton bindTap=remove >remove line</button>Remove line</view>進(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 />第3節(jié)頁面表單：PAGE FORM+checkBox12:

7、512:513:0=表單組件+buttonvbutton type=pramary bindrap=hdl>v/button>checkbox value=v checked=true />Actio n-sheet-ca ncel:上拉菜單取消按鈕;Actio n-sheet-ca ncel:上拉菜單取消按鈕;+radiovradio value=v checked=true />+input vinput placeholder=enter />+label<label> </label>+picker vpicker mode=tim

8、e|date value=idx range=ary><view>aryidxv/view>v/picker>第4節(jié) 操作反饋 OPERATION INTEATION1.上拉菜單Acti on-sheet:上拉菜單；Acti on-sheet-item:上拉菜單項目；Actio n-sheet-ca ncel:上拉菜單取消按鈕;詳見圖示+上拉菜單vacti on-sheethidde n=true bin dcha nge=evt >vblock wx:for-items=ary >vacti on-sheet-item> itm </ac

9、t ion-shee t-item></block>vacti on-sheet-ca ncel>取消2 模態(tài)窗口： MODALMODA將被廢棄，請使用wx.showModal來實現(xiàn)，不講.3.自消窗口 ：TOASTTOAST各棄，請用 wx.showToast,不講.3. 正加載:LOADING+正加載正加載<view>vloading hidden=true >正加載v/loading>新頁打開<view>vnavigator url=url >新頁打開 </navigator> vnavigator url=u

10、rl open-type=redirect > 本 頁打開</navigator>第6節(jié)多媒體:MULTI MEDIA1.音頻:AUDIO2.視頻:VIDEOvvideo src=s danmu-list=a enable-danmu=t danmu-btn controls >vbutton bindtap=get >獲取 </button>vinput bindblur=blur />Page(Onready:function(e)this.videoCtx=wx.createVideoContext().BlurSend3.圖片:IMAGE

11、+圖片<view><image style=style src=src /></view>第7節(jié)地圖:MAP+地圖<map longitude=lo latitude=la markers=m covers=c>v/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é) 畫布:CANVAS+畫布vcanvas style=s id=id ></canvas>+JS部分Page(Var ctx =wx.createContext()Ctx.metho