微信小程序开发1

微信小程序开发(五) 第五章表现层组件小程序组件框架构成(第一部分)小程序组件（启）视图容器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.图标:ICON2.文本:TEXT3.进度条:PROGRESS+进度条<progress percent=20 show-info /><progress percent=30 stroke-width=30 /> <progress percent=40 active /> <progress percent=35 color=pink />20%+文本<view><text>{{text}}</text><button bindTap=add>add line</button> <button bindTap=remove>remove line</button></view>Add lineRemove line+图标<icon type=success size=40 /> <icon type=success size=40 />√√第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:5912:58 13:002．模态窗口：MODALMODAL 将被废弃,请使用wx.showModal 来实现,不讲. 3.自消窗口:TOASTTOAST 将弃,请用wx.showToast,不讲. 4.正加载:LOADING第5节页面导航:PAGE NAVIGATION<view><navigator url=url >新页打开</navigator><navigator url=url open-type=redirect >本页打开</navigator> <navigator url=url open-type=swictTab >页签切换</navigator></view>新页打开本页打开页签切换+正加载<view><loading hidden=true >正加载…</loading> </view>正加载…+上拉菜单<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>第6节多媒体:MULTI MEDIA 1.音频:AUDIO2.视频: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.value}Send:function(){this.videoCtx.sendDanmu(text:xxx,color:rgb)} })从头再来刘欢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()},…})3.图片:IMAGE第7节地图:MAP第8节画布:CANVAS详细绘图API请参照绘图一章+画布<canvas s tyle=s id=id></canvas>+JS部分Page({Var ctx=wx.createContext()Ctx.methods……})+地图<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 }+图片<view><image style=style src=src /></view>第9节客服会话:SESSION客服会话按钮，用于在页面上显示一个客服会话按钮，用户点击该按钮后会进入客服会话。