微信小程序开发五

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-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节基础内容：BASE CONTENT基础内容包括：图标,文本,进度条.以下对三项内容分别进行详解1. 图标:ICON+图标<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>进度条：PROGRESS20%+进度条vprogress percent=20 show-info />/>vprogress percent=30 stroke-width=30 vprogress percent=40 active /> vprogress percent=35 color=pink />第3节页面表单：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节 操作反馈 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 模态窗口： MODALMODA将被废弃，请使用wx.showModal来实现，不讲.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节多媒体: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节地图:MAP+地图<map longitude=lo latitude=la markers=m covers=c>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 ></canvas>+JS部分Page(Var ctx =wx.createContext()Ctx.metho