微信小程序开发(五) 第五章表现层组件小程序组件框架构成(第一部分)小程序组件（启）视图容器View container普通视图View滚动视图Scroll-view滑动视图swiper基础内容Base content图标icon文字text进度progress操作反馈Operation上拉菜单Action-sheet模态窗口model自消窗口toast页面导航Page navigation导航navigator小程序组件（承）页面表单Page form按钮button表单form输入input多选checkbox单选radio列表选picker内嵌列选Picker-view滑选slider切换switch标签label多媒体Multi media音频audio视频video图片iimage小程序组件（承）地图map地图map画布canvas画布canvas客服会话session客服会话Contact-button第1节视图容器:VIEW CONTAINER1.普通视图:VIEW+横向排列<view class="flex-wrp"style="flex-direction:row;"><view class="flex-item 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"></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-itembg=red”></view><view class=”scroll-view-itembg=blue”></view></scroll-view>+左右滚动<scroll-view class=”scroll-view-h”scroll-x=”true”>3.滑动视图:SWIPER+轮播图<swiper indicator-dots=3 autoplay=true interval=50duration=10><block wx:for={{imageUrls}}><swiper-item><image src={{item}} /></swiper-item></block></swiper>第2节基础内容:BASE CONTENT基础内容包括:图标,文本,进度条.以下对三项内容分别进行详解.1.图标:ICON2.文本:TEXT3.进度条:PROGRESS +图标<icon type=success size=40 /><icon type=success size=40 />+文本<view><text>{{text}}</text><button bindTap=add>add line</button><button bindTap=remove>remove line</button> </view>Add lineRemove line+进度条<progress percent=20 show-info /><progress percent=30 stroke-width=30 /><progress percent=40 active/><progress percent=35 color=pink /> 20%第3节页面表单:PAGE FORM第4节操作反馈:OPERATION INTEATION1.上拉菜单Action-sheet:上拉菜单；Action-sheet-item:上拉菜单项目；Action-sheet-cancel:上拉菜单取消按钮；详见图示。

=表单组件+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>…</label>+picker<picker mode=time|date value={{idx}} range={{ary}}><view>{{ary[idx]}}</view></picker>+slider<slider step=1 bindchange=evt />+switch<switch bindchange=evt checked />+textArea<textArea>…</textArea>√Label:user-name12:512:513:02．模态窗口：MODALMODAL 将被废弃,请使用来实现,不讲.3.自消窗口:TOAST TOAST 将弃,请用,不讲.4.正加载:LOADING第5节页面导航:PAGE NAVIGATION+上拉菜单<action-sheethidden=true bindchange=evt><block wx:for-items={{ary}}><action-sheet-item>{{itm}}</action-sheet-item></block><action-sheet-cancel>取消</action-sheet-cancel></action-sheet>+正加载<view><loading hidden=true >正加载…</loading></view>正加载…<view><navigatorurl=url >新页打开</navigator><navigator url=urlopen-type=redirect>本页打开</navigator><navigator url=url open-type=swictTab >页签切换新页打开本页打开页签切换第6节多媒体:MULTI MEDIA 1.音频:AUDIO2.视频:VIDEO 从头再来刘欢00:0<audio poster=p name=n auther=a src=s id=id controls loop></audio><button type=primary bindtap=play|pause|p-14|p-start>播放|暂停|14秒|开始</button>(4个)Page({Onready:function(e){=(myAudio)},Data:{poster:img,name:n,author:a,src:s},Play:function(){ …})00:0<video src=s danmu-list=a enable-danmu=t danmu-btn controls><button bindtap=get>获取</button><input bindblur=blur /><button bindtap=send>发送</button>Page({Onready:function(e){=()},Blur:function(e){= Send:function(){3.图片:IMAGE第7节地图:MAP第8节画布:CANVAS详细绘图API请参照绘图一章+图片<view><image style=style src=src /></view>+地图<map longitude=lo latitude=la markers=m covers=c></map> +标记结构Marker:{longitude:lo,latitude:la,name:n,desc:d}+覆盖物结构Cover:{ longitude:lo,latitude:la,iconPath:ip,rotate:r }+画布<canvas style=s id=id></canvas>+JS部分Page({Var ctx=()……})第9节客服会话:SESSION客服会话按钮，用于在页面上显示一个客服会话按钮，用户点击该按钮后会进入客服会话。

欢迎阅读下一章<contact-buttontype="default-light" size="20"session-from="weapp" >。