《微信小程序开发五》由会员分享，可在线阅读，更多相关《微信小程序开发五（17页珍藏版）》请在金锄头文库上搜索。
1、微信小程序开发 （ 五）第五章 表现层组件小程序组件框架构成 （第一部分 ）小程序组件视图容 View container普通视View滚动视Scroll-view-滑动视swiper基础内Base content图标icon文字text- 进度progress操作反Operatio n-上拉菜Acti on-sheet模态窗model自消窗toast页面导 Page n avigati on导航n avigator小程序组件框架构成（第二部分）小程序组件页面表Page form按钮butt on表单form输入in put多选checkbox单选radio列表选picker内嵌列Picker
2、-view滑选slider切换switch标签label多媒体Multi media音频audio视频video图片iimage小程序组件框架构成（第三部分）小程序组件地图map地图map画布canvas画布canvas客服会sessi on客服会 Con tact-button第1节 视图容器:VIEW CONTAINER1.普通视图:VIEW+横向排列vviewclass=flex-wrpvviewclass=flex-item bc_greenv/viewvviewclass=flex-item bc_redv/viewvviewclass=flex-item bc_bluev/view
3、+纵向排列vviewclass=flex-wrpstyle= ” flex -direction:column;vviewclass=flex-item bc_greenv/viewvviewclass=flex-item bc_redv/viewstyle=flex-direction:row;滚动视图：SCROLL-VIEW+上下滚动vscroll-view scroll-y= ” true ” vviewclass= ” scroll-view-itembg=red ” v/scroll-view+左右滚动滑动视图:SWIPER+轮播图interval=50v/swiper-item第2
4、节基础内容：BASE CONTENT基础内容包括：图标,文本,进度条.以下对三项内容分别进行详解1. 图标:ICON+图标2. 文本:TEXT+文本 text vbutton bindTap=add add lineAdd linevbutton bindTap=remove remove lineRemove line进度条：PROGRESS20%+进度条vprogress percent=20 show-info /vprogress percent=30 stroke-width=30 vprogress percent=40 active / vprogress percent=35
5、color=pink /第3节页面表单：PAGE FORM+checkBox12:512:513:0=表单组件+buttonvbutton type=pramary bindrap=hdlv/buttoncheckbox value=v checked=true /Actio n-sheet-ca ncel:上拉菜单取消按钮;Actio n-sheet-ca ncel:上拉菜单取消按钮;+radiovradio value=v checked=true /+input vinput placeholder=enter /+label +picker vpicker mode=time|date
6、 value=idx range=aryaryidxv/viewv/picker第4节 操作反馈 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 vacti on-sheet-ca ncel取消2 模态窗口： MODALMODA将被废弃，请使用
7、wx.showModal来实现，不讲.3.自消窗口 ：TOASTTOAST各弃，请用 wx.showToast,不讲.3. 正加载:LOADING+正加载正加载vloading hidden=true 正加载v/loading新页打开vnavigator url=url 新页打开 vnavigator url=url open-type=redirect 本 页打开第6节多媒体:MULTI MEDIA1.音频:AUDIO2.视频:VIDEOvvideo src=s danmu-list=a enable-danmu=t danmu-btn controls vbutton bindtap=ge
8、t 获取 vinput bindblur=blur /Page(Onready:function(e)this.videoCtx=wx.createVideoContext().BlurSend3.图片:IMAGE+图片第7节地图:MAP+地图v/map+标记结构Marker:longitude:lo,latitude:la,name:n,desc:d+覆盖物结构Cover: longitude:lo,latitude:la,iconPath:ip,rotate:r 第8节 画布:CANVAS+画布vcanvas style=s id=id +JS部分Page(Var ctx =wx.createContext()Ctx.methods详细绘图API请参照绘图一章第9节客服会话:SESSION客服会话按钮，用于在页面上显示一个客服会话按钮，用户点击该按钮后会进入客服会话。vcon tact-butt ontype=default-lightsize=20sessi on-fro m=weapp欢迎阅读下一章
