微信小程序开发五)

1、微信小程序开发 ( 五)第五章表现层组件小程序组件框架构成 ( 第一部分 )小程序组件视图容View普通视View滚动视Scroll-view滑动视swiper基础内Base content图标icon文字text进度progress操作反Operation上拉菜Action-sheet模态窗model自消窗toast页面导Page导航navigator小程序组件框架构成 ( 第二部分 )小程序组件页面表Page form按钮button表单form输入input多选checkbox单选radio列表选picker内嵌列Picker-view滑选slider切换switch标签label多媒体

2、Multi media音频audio视频video图片iimage小程序组件框架构成 ( 第三部分 )小程序组件地图map地图map画布canvas画布canvas客服会session客服会Contact-butto第1节视图容器 :VIEW CONTAINER 1. 普通视图 :VIEW+横向排列<viewclass="flex-wrp"style="flex-direction:row;"><viewclass="flex-item bc_green"></view><viewclass=

3、"flex-item bc_red"></view><viewclass="flex-item bc_blue"></view></view>+纵向排列<viewclass="flex-wrp"style= ”flex -direction:column;"><viewclass="flex-item bc_green"></view><viewclass="flex-item bc_red"

4、;></view>2. 滚动视图 :SCROLL-VIEW+上下滚动<scroll-viewscroll-y=”true ”><viewclass= ”scroll-view-itembg=red”></view><viewclass= ”scroll-view-itembg=blue ”></view>3. 滑动视图 :SWIPER+轮播图<swiperindicator-dots=3autoplay=trueinterval=50duration=10><blockwx:for=imageUrl

5、s><swiper-item><image src=item/></swiper-item>第2节基础内容 :BASE CONTENT基础内容包括 : 图标 , 文本 , 进度条 .以下对三项内容分别进行详解.1. 图标 :ICON+图标<icon type=success size=40 /><icon type=success size=40 />2. 文本 :TEXT+文本<view><text> text</text><buttonbindTap=add >add line

6、</button>Add lineRemoveline3. 进度条 :PROGRESS<buttonbindTap=remove >remove line</button></view>+进度条20%<progresspercent=20 show-info/><progresspercent=30 stroke-width=30/><progresspercent=40 active /><progresspercent=35 color=pink/>第3节页面表单 :PAGE FORM=表单组件

7、+button<button type=pramary bindrap=hdl></button>+checkBoxLabel:user-n<checkbox value=v checked=true />12:12:13:+radio<radio value=v checked=true />+input<input placeholder=enter />+label<label> </label>+picker<picker mode=time|date value=idx range=ary>

8、;<view>aryidx</view></picker>第4节操作反馈 :OPERATION INTEATION 1. 上拉菜单Action-sheet:上拉菜单；Action-sheet-item:上拉菜单项目；Action-sheet-cancel:上拉菜单取消按钮；详见图示。+上拉菜单<action-sheethidden=truebindchange=evt ><blockwx:for-items=ary><action-sheet-item>itm</action-sheet-item>2模态窗口：

9、 MODALMODAL将被废弃 , 请使用 wx.showModal 来实现 , 不讲 .3. 自消窗口 :TOASTTOAST将弃 , 请用 wx.showToast, 不讲 .4. 正加载 :LOADING+正加载正加载<view><loadinghidden=true >正加第5节页面导航 :PAGE NAVIGATION<view>新页打开<navigatorurl=url>新页打开 </navigator>本页打开页签切换<navigatorurl=urlopen-type=redirect> 本 页 打 开&l

10、t;/navigator>第6节多媒体 :MULTI MEDIA 1. 音频 :AUDIO从头再来00:0刘 欢<audioposter=p name=n auther=a src=s id=id controls loop></audio><buttontype=primarybindtap=play|pause|p-14|p-start>播放 | 暂停 |14秒| 开始 </button>(4个)Page(Onready: function(e)this.audioCtx=wx.createAudioContext(myAudio),D

11、ata: poster:img,name:n,author:a,src:s,Play2. 视频 :VIDEO<videosrc=sdanmu-list=aenable-danmu=tdanmu-btncontrols><buttonbindtap=get>获取 </button><inputbindblur=blur/>Page(Onready :function(e)this.videoCtx=wx.createVideoContext(),BlurSend3. 图片 :IMAGE+图片<view><image style=style src=src />第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 部分Pag