微信小程序开发(五).doc

微信小程序开发(五)第五章 表现层组件小程序组件框架构成(第一部分)小程序组件（启）视图容器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+横向排列 +纵向排列 2.滚动视图:SCROLL-VIEW+上下滚动+左右滚动3.滑动视图:SWIPER+轮播图第2节 基础内容:BASE 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:5813:00第4节 操作反馈:OPERATION INTEATION1.上拉菜单Action-sheet:上拉菜单；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个)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.sendDanmu(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()Ct