《微信小程序-入门ppt课件.ppt》由会员分享，可在线阅读，更多相关《微信小程序-入门ppt课件.ppt（50页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、微信小程序入门主讲：刘志敏博客：https:/ Home 键离开微信）都会先执行页面中的onHide()函数再执行app.js中的onHide()函数，每次进入前台都会先执行app.js中onShow()函数再执行页面中的onShow()函数。运行机制运行机制小程序启动会有两种情况，一种是冷启动，一种是热启动。 假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。更新机制更新机制小程序冷启动时如果发现有新版本，将会异步下载新
2、版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本，可以使用 wx.getUpdateManager API 进行处理运行机制运行机制小程序没有重启的概念当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁5页面跳转navigator标签跳转跳转到新页面 在当前页打开 打开绑定的小程序通过路由函数进行跳转通过路由函数进行跳转6页面参数传递6页面返回值/获取页面栈 var pages = getCurrentPage
3、s(); if(pages.length 1) /上一个页面实例对象 var prePage = pagespages.length - 2; /关键在这里 prePage.changeData(hello); 01237View实现点击效果实现点击效果按钮.hoverbackground-color: #aaa;WXMLWXSShover-class指定按下去的样式类。当 hover-class=none 时，没有点击态效果8scroll-view 9swiper9movable-area9cover-view地图9icon9text 你好 啊 哈哈哈（空格是中文字符一半大小） 你好 啊 哈
4、哈哈（空格是中文字符大小） 你好 啊 哈哈哈（空格根据字体设置）你好！t七月流火啊！n我在下一行 你好 啊 哈哈哈（空格是中文字符一半大小） 你好 啊 哈哈哈（空格是中文字符大小） 你好 啊 哈哈哈（空格根据字体设置）WXSS1尺寸单位设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)屏幕宽度iPhone51rpx = 0.42px1px = 2.34rpx320iPhone61rpx = 0.5px1px = 2rpx375iPhone
5、6 Plus1rpx = 0.552px1px = 1.81rpx414rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。2样式导入使用import语句可以导入外联样式表，import后跟需要导入的外联样式表的相对路径，用;表示语句结束。3内联样式框架组件上支持使用 style、class 属性来控制组件的样式。style：静态的样式统一写到 class 中。style 接收动态的样
6、式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。样式内容 显示 定位 背景 边框 文本属性 font margin padding4wxss display(显示display)属性说明flex多栏多列布局flex-direction:row/columninline-block行内块元素inline此元素会被显示为内联元素，元素前后没有换行符inline-table作为内联表格来显示（类似 ），表格前后没有换行符inline-fl
7、ex将对象作为内联块级弹性伸缩盒显示none此元素不会被显示block此元素将显示为块级元素，此元素前后会带有换行符list-item此元素会作为列表显示table会作为块级表格来显示（类似 ），表格前后带有换行符table-caption 作为一个表格标题显示（类似 ）table-cell作为一个表格单元格显示（类似 和 ）table-column 作为一个单元格列显示（类似 ）table-column-group作为一个或多个列的分组来显示（类似 ）table-row作为一个表格行显示（类似 ）table-row-group作为一个或多个行的分组来显示（类似 ）table-header-g
8、roup作为一个或多个行的分组来显示（类似 ）table-footer-group作为一个或多个行的分组来显示（类似 ）inherit从父元素继承 display 属性的值5wxss position(定位)属性说明absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。relative生成相对定位的元素，相对于其正常位置进行定位。因此，left:20 会向元素的 LEFT 位置添加 20 像素。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left,
9、 top, right 以及 bottom 属性进行规定。static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）inherit规定应该从父元素继承 position 属性的值6wxss background(背景)简写属性，作用是将背景属性设置在一个声明中background: color position size repeat origin clip attachment image;指定要使用的背景颜色指定背景图像的位置background-position:center 指定背景图片的大小backgrou
10、nd-size:80px 60px;宽度 高度指定如何重复背景图像repeat,repeat-x,repeat-y,no-repeat,inherit指定背景图像的定位区域padding-box 背景图像填充框的相对位置背景图像边界框的相对位置背景图像的相对位置的内容框指定背景图像的绘画区域属性值，同上设置背景图像是否固定或者随着页面的其余部分滚动。scroll 背景图片随页面的其余部分滚动。这是默认背景图像是固定的指定background-attachment的设置应该从父元素继承背景图片随滚动元素滚动指定要使用的一个或多个背景图像 url(URL) 图像的URL无图像背景会显示。这是默认指
11、定背景图像应该从父元素继承7wxss border(边框)border简写属性，用于把针对四个边的属性设置在一个声明border:5px solid red;border-width用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度border-top-width 上右下左边框厚度 属性值：thin medium thick lengthborder-style设置元素所有边框的样式，或者单独地为各边设置边框样式。border-top-width 上右下左边框样式 属性值：solid,dashed,dotted,double等border-color元素的所有边框中可见部分的颜色，或为
12、 4 个边分别设置颜色border-top-width 上右下左边框颜色7wxss 文本属性（text）属性说明语法(属性值)color设置文本颜色direction设置文本方向。ltr:文本方向从左到右;rtl:文本方向从右到左letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本left：把文本排列到左边。默认值，由浏览器决定。right：把文本排列到右边。center：把文本排列到中间。justify：实现两端对齐文本效果。inherit: 规定应该从父元素继承 text-align 属性的值。text-decoration向文本添加修
13、饰underline 定义文本下的一条线。overline 定义文本上的一条线。line-through 定义穿过文本下的一条线。blink 定义闪烁的文本。text-indent缩进元素中文本的首行text-shadow设置文本阴影text-shadow: h-shadow v-shadow blur color;h-shadow:水平阴影的位置,允许负值;v-shadow:垂直阴影的位置,允许负值;blur:模糊的距离;color:阴影的颜色text-transform控制元素中的字母capitalize 文本中的每个单词以大写字母开头。uppercase 定义仅有大写字母。lowerca
14、se 定义无大写字母，仅有小写字母。unicode-bidi设置或返回文本是否被重写 vertical-align设置元素的垂直对齐white-space设置元素中空白的处理方式word-spacing设置字间距8wxss 字体属性（font）属性说明语法(属性值)font在一个声明中设置所有字体属性font:font-style font-variant font-weight font-size/line-height font-family(按顺序)font-style指定文本的字体样式normal 默认值。浏览器显示一个标准的字体样式。italic 浏览器会显示一个斜体的字体样式。ob
15、lique 浏览器会显示一个倾斜的字体样式。inherit 规定应该从父元素继承字体样式。font-variant以小型大写字体或者正常字体显示文本normal 默认值。浏览器会显示一个标准的字体。small-caps 浏览器会显示小型大写字母的字体。inherit 规定应该从父元素继承 font-variant 属性的值。font-weight指定字体的粗细normal 默认值。定义标准的字符。bold 定义粗体字符。bolder 定义更粗的字符。lighter 定义更细的字符。inherit 规定应该从父元素继承字体的粗细。font-size指定文本的字体大小smaller 把 font-
16、size 设置为比父元素更小的尺寸。larger 把 font-size 设置为比父元素更大的尺寸。length 把 font-size 设置为一个固定的值。% 把 font-size 设置为基于父元素的一个百分比值。font-family指定文本的字体系列9wxss margin(外边距)（margin）属性说明语法(属性值)margin在一个声明中设置所有外边距属性。margin:10px 5px 15px 20px;(上边距，右边距，下边距，左边距)margin-top设置元素的上外边距。margin-right设置元素的右外边距。margin-bottom设置元素的下外边距。margi
17、n-left设置元素的左外边距10wxss padding(填充)（padding）属性说明语法(属性值)padding使用缩写属性设置在一个声明中的所有填充属性padding:10px 5px 15px 20px;(上填充，右填充，下填充，左填充)padding-top设置元素的顶部填充。padding-right设置元素的右部填充padding-bottom设置元素的底部填充padding-left设置元素的左部填充CONTENTS01计算器(布局)02计算器(字体和背景)03计算器(逻辑实现)逻辑实现输入数字输入运算符号输入正负符号输入其他逻辑实现输入数字是否编辑模式输入运算符号是否编辑
18、模式是否为进行过计算当前值是否是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: absolute; display: block; border-radius: 50%; he
19、ight: 20rpx; width: 20rpx;/圆点闪烁 setInterval(function () if (_this.data.colorCircleFirst = #FFDF2F) _this.setData( colorCircleFirst: #FE4D32, colorCircleSecond: #FFDF2F, ) else _this.setData( colorCircleFirst: #FFDF2F, colorCircleSecond: #FE4D32, ) , 500) /圆点设置 var leftCircle = 7.5; var topCircle = 7
20、.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; leftCircle = 620; else if (i = 12) topCircle = 565;
21、 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, leftCircle: leftCircle ); 外部点实现 START .container-in w
22、idth: 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: #f5f0fc; border-radius: 15rpx; box-shadow: 0 5px 0 #d87fde;.sta
23、rt-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;