微信小程序开发(五)(共12页).docx
精选优质文档-倾情为你奉上微信小程序开发(五)第五章 表现层组件小程序组件框架构成(第一部分)小程序组件（启）视图容器View container普通视图View滚动视图Scroll-view滑动视图swiper基础内容Base content图标icon文字text进度progress操作反馈Operation interation上拉菜单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-item bg=red”></view><view class=”scroll-view-item 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=true interval=50 duration=10><block wx:for=imageUrls><swiper-item><image src=item /></swiper-item></block></swiper>第2节 基础内容:BASE CONTENT基础内容包括:图标,文本,进度条.以下对三项内容分别进行详解.1. 图标:ICON+图标<icon type=success size=40 /><icon type=success size=40 />2. 文本:TEXT+文本<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 percent=40 active/><progress percent=35 color=pink />20%第3节 页面表单: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></label>+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节 操作反馈:OPERATION INTEATION1.上拉菜单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-sheet>2模态窗口：MODALMODAL将被废弃,请使用wx.showModal来实现,不讲.3.自消窗口:TOASTTOAST将弃,请用wx.showToast,不讲.4.正加载:LOADING+正加载<view><loading hidden=true>正加载</loading></view>正加载第5节 页面导航:PAGE NAVIGATION<view><navigator url=url>新页打开</navigator><navigator url=url open-type=redirect>本页打开</navigator><navigator url=url open-type=swictTab>页签切换</navigator></view>新页打开本页打开页签切换第6节 多媒体: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>播放|暂停|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><input bindblur=blur /><button bindtap=send>发送</button></video>Page(Onready:function(e)this.videoCtx=wx.createVideoContext(),Blur:function(e)this.iptVal=e.datail.valueSend:function()this.videoCtx.sendDanmu(text:xxx,color:rgb)3. 图片:IMAGE+图片<view><image style=style src=src /></view>第7节 地图:MAP+地图<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 第8节 画布:CANVAS+画布<canvas style=s id=id></canvas>+JS部分Page(Var ctx=wx.createContext()Ctx.methods)详细绘图API请参照绘图一章第9节 客服会话:SESSION客服会话按钮，用于在页面上显示一个客服会话按钮，用户点击该按钮后会进入客服会话。<contact-button type="default-light" size="20" session-from="weapp"></contact-button>欢迎阅读下一章专心-专注-专业
