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