微信小程序入门PPT课件.ppt

.,1,微信小程序入门,主讲：刘志敏博客：,.,2,CONTENTS,课程内容,.,3,认识小程序,.,4,1,小程序开发工具的下载与安装,下载地址：,.,5,2,小程序代码构成,.,6,app.json,官网地址：,.,7,3,页面生命周期,.,8,.,9,4,页面栈,.,10,4,小程序生命周期与运行机制,小程序需必须在app.js中使用App()函数进行小程序的注册，并且不能注册多个。小程序第一打开时将会下载整个小程序代码包，紧接着通过app.json配置初始化App，页面线程开始渲染首页，初始化完成后应用服务线程执行App中onLauch()函数和onShow()函数，然后才执行页面中的onLoad()函数和onShow()函数，每次进入后台（当用户点击左上角关闭，或者按了设备Home键离开微信）都会先执行页面中的onHide()函数再执行app.js中的onHide()函数，每次进入前台都会先执行app.js中onShow()函数再执行页面中的onShow()函数。,.,11,.,12,运行机制小程序启动会有两种情况，一种是冷启动，一种是热启动。假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。,更新机制小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。如果需要马上应用最新版本，可以使用wx.getUpdateManagerAPI进行处理,运行机制小程序没有重启的概念当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁,.,13,5,页面跳转,navigator标签跳转,跳转到新页面在当前页打开打开绑定的小程序,.,14,通过路由函数进行跳转,.,15,6,页面参数传递,.,16,6,页面返回值,/获取页面栈varpages=getCurrentPages();if(pages.length1)/上一个页面实例对象varprePage=pagespages.length-2;/关键在这里prePage.changeData(hello);,0,1,2,3,.,17,7,View,实现点击效果,按钮,.hoverbackground-color:#aaa;,WXML,WXSS,hover-class指定按下去的样式类。当hover-class=none时，没有点击态效果,.,18,8,scroll-view,.,19,.,20,9,swiper,.,21,9,movable-area,.,22,9,cover-view,地图,.,23,9,icon,.,24,9,text,你好啊哈哈哈（空格是中文字符一半大小）你好啊哈哈哈（空格是中文字符大小）你好啊哈哈哈（空格根据字体设置）,t空格（多个只会显示一个空格）n换行,你好！t七月流火啊！n我在下一行,space有效值：,.,25,你好哈哈哈（空格根据字体设置）,decode是否解码,.,26,WXSS,.,27,1,尺寸单位,rpx（responsivepixel）:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。,.,28,2,样式导入,使用import语句可以导入外联样式表，import后跟需要导入的外联样式表的相对路径，用;表示语句结束。,.,29,3,内联样式,框架组件上支持使用style、class属性来控制组件的样式。style：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。,.,30,样式内容,显示定位背景边框文本属性fontmarginpadding,.,31,4,wxssdisplay(显示display),属性说明flex多栏多列布局flex-direction:row/columninline-block行内块元素inline此元素会被显示为内联元素，元素前后没有换行符inline-table作为内联表格来显示（类似），表格前后没有换行符inline-flex将对象作为内联块级弹性伸缩盒显示none此元素不会被显示block此元素将显示为块级元素，此元素前后会带有换行符list-item此元素会作为列表显示table会作为块级表格来显示（类似），表格前后带有换行符table-caption作为一个表格标题显示（类似）table-cell作为一个表格单元格显示（类似和）table-column作为一个单元格列显示（类似）table-column-group作为一个或多个列的分组来显示（类似）table-row作为一个表格行显示（类似）table-row-group作为一个或多个行的分组来显示（类似）table-header-group作为一个或多个行的分组来显示（类似）table-footer-group作为一个或多个行的分组来显示（类似）inherit从父元素继承display属性的值,.,32,5,wxssposition(定位),属性说明absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left,top,right以及bottom属性进行规定。relative生成相对定位的元素，相对于其正常位置进行定位。因此，left:20会向元素的LEFT位置添加20像素。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left,top,right以及bottom属性进行规定。static默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）inherit规定应该从父元素继承position属性的值,.,33,6,wxssbackground(背景),background简写属性，作用是将背景属性设置在一个声明中background:colorpositionsizerepeatoriginclipattachmentimage;background-color指定要使用的背景颜色background-position指定背景图像的位置background-position:centerbackground-size指定背景图片的大小background-size:80px60px;宽度高度background-repeat指定如何重复背景图像repeat,repeat-x,repeat-y,no-repeat,inheritbackground-origin指定背景图像的定位区域padding-box背景图像填充框的相对位置,.,34,border-box背景图像边界框的相对位置content-box背景图像的相对位置的内容框background-clip指定背景图像的绘画区域属性值，同上background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。scroll背景图片随页面的其余部分滚动。这是默认fixed背景图像是固定的inherit指定background-attachment的设置应该从父元素继承local背景图片随滚动元素滚动background-image指定要使用的一个或多个背景图像url(URL)图像的URLnone无图像背景会显示。这是默认inherit指定背景图像应该从父元素继承,.,35,7,wxssborder(边框),属性说明border简写属性，用于把针对四个边的属性设置在一个声明border:5pxsolidred;border-width用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度border-top-width上右下左边框厚度属性值：thinmediumthicklengthborder-style设置元素所有边框的样式，或者单独地为各边设置边框样式。border-top-width上右下左边框样式属性值：solid,dashed,dotted,double等border-color元素的所有边框中可见部分的颜色，或为4个边分别设置颜色border-top-width上右下左边框颜色,.,36,7,wxss文本属性（text）,.,37,.,38,8,wxss字体属性（font）,.,39,9,wxssmargin(外边距)（margin）,.,40,10,wxsspadding(填充)（padding）,.,41,CONTENTS,01,计算器(布局),02,计算器(字体和背景),03,计算器(逻辑实现),.,42,逻辑实现,输入数字,输入运算符号,输入正负符号,输入其他,.,43,逻辑实现,输入数字,是否编辑模式,输入运算符号,是否编辑模式,是否为进行过计算,当前值是否是0,算式显示,临时结果计算,.,44,01,布局,02,定位,03,定时器,.,45,01,外部点实现,02,内部图片布局,03,抽奖逻辑实现,.,46,外部点实现,.container-outheight:600rpx;width:650rpx;background-color:#b136b9;margin:100rpxauto;border-radius:40rpx;box-shadow:010px0#871a8e;position:relative;,.circleposition:absolute;display:block;border-radius:50%;height:20rpx;width:20rpx;,.,47,/圆点闪烁setInterval(function()if(_this.data.colorCircleFirst=#FFDF2F)_this.setData(colorCircleFirst:#FE4D32,colorCircleSecond:#FFDF2F,)else_this.setData(colorCircleFirst:#FFDF2F,colorCircleSecond:#FE4D32,),500),/圆点设置varleftCircle=7.5;vartopCircle=7.5;varcircleList=;for(vari=0;i24;i+)if(i=0)topCircle=15;leftCircle=15;elseif(i6)topCircle=7.5;leftCircle=leftCircle+102.5;elseif(i=6)topCircle=15leftCircle=620;elseif(i12)topCircle=topCircle+94;leftCircle=620;elseif(i=12)topCircle=565;leftCircle=620;elseif(i18)topCircle=570;leftCircle=leftCircle-102.5;elseif(i=18)topCircle=565;leftCircle=15;elseif(i24)topCircle=topCircle-94;leftCircle=7.5;elsereturncircleList.push(topCircle:topCircle,leftCircle:leftCircle);,.,48,外部点实现,START,.,49,.container-inwidth:580rpx;height:530rpx;background-color:#871a8e;border-radius:40rpx;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;,.content-outposition:absolute;height:150rpx;width:166.6666rpx;background-color:#f5f0fc;border-radius:15rpx;box-shadow:05px0#d87fde;,.,50,.start-btnposition:absolute;margin:auto;top:0;left:0;bottom:0;right:0;border-ra