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多选
2、checkbox单选 radio列表选 picker内嵌列选 Picker-view滑选 slider切换 switch标签 label多媒体 Multi media音频 audio视频 video图片 iimage小程序组件框架构成(第三部分 )小程序组件（承）地图 map地图 map画布 canvas画布 canvas客服会话 session客服会话 Contact-button第 1 节 视图容器:VIEW CONTAINER1.普通视图:VIEW+横向排列+纵向排列2.滚动视图:SCROLL-VIEW+上下滚动+左右滚动3.滑动视图:SWIPER+轮播图第 2 节 基础内容:BASE
3、CONTENT基础内容包括:图标,文本,进度条.以下对三项内容分别进行详解.1. 图标:ICON+图标 2. 文本:TEXT+文本textadd lineremove lineAdd lineRemove line3. 进度条:PROGRESS+进度条20%第 3 节 页面表单:PAGE FORM=表单组件+button+checkBox+radio+input+label+pickeraryidx+slider+switch+textAreaLabel:user-name12:5912:58 13:00第 4 节 操作反馈:OPERATION INTEATION1.上拉菜单Action-sh
4、eet:上拉菜单；Action-sheet-item:上拉菜单项目；Action-sheet-cancel:上拉菜单取消按钮；详见图示。+上拉菜单itm取消2模态窗口：MODALMODAL 将被废弃,请使用 wx.showModal 来实现, 不讲.3.自消窗口:TOASTTOAST 将弃, 请用 wx.showToast,不讲.4.正加载:LOADING+正加载正加载正加载第 5 节 页面导航:PAGE NAVIGATION新页打开本页打开页签切换新页打开本页打开页签切换第 6 节 多媒体:MULTI MEDIA1. 音频:AUDIO从头再来刘 欢00:00播放|暂停|14 秒|开始(4 个
5、)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获取发送Page(Onready:function(e)this.videoCtx=wx.createVideoContext(),Blur:function(e)this.iptVal=e.datail.valueSend:function()this.videoCtx.se
6、ndDanmu(text:xxx,color:rgb)3. 图片:IMAGE+图片第 7 节 地图:MAP+地图+标记结构Marker:longitude:lo,latitude:la,name:n,desc:d+覆盖物结构Cover: longitude:lo,latitude:la,iconPath:ip,rotate:r 第 8 节 画布:CANVAS+画布+JS 部分Page(Var ctx=wx.createContext()Ctx.methods)详细绘图 API 请参照绘图一章第 9 节 客服会话:SESSION客服会话按钮，用于在页面上显示一个客服会话按钮，用户点击该按钮后会进入客服会话。欢迎阅读下一章
