微信小程序-入门优秀PPT.ppt

《微信小程序-入门优秀PPT.ppt》由会员分享，可在线阅读，更多相关《微信小程序-入门优秀PPT.ppt（50页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、微信小程序入门主讲：刘志敏QQ群：785071190CONTENTS课程内容相识小程序1小程序开发工具的下载与安装下载地址：s:/developers.weixin.qq /miniprogram/dev/devtools/download.html2小程序代码构成app.json官网地址：s:/developers.weixin.qq /miniprogram/dev/framework/config.html3页面生命周期4页面栈4小程序生命周期与运行机制小程序需必需在app.js中运用App()函数进行小程序的注册，并且不能注册多个。小程序第一打开时将会下载整个小程序代码包，紧接着通过a

2、pp.json配置初始化App，页面线程起先渲染首页，初始化完成后应用服务线程执行App中onLauch()函数和onShow()函数，然后才执行页面中的onLoad()函数和onShow()函数，每次进入后台（当用户点击左上角关闭，或者按了设备 Home 键离开微信）都会先执行页面中的onHide()函数再执行app.js中的onHide()函数，每次进入前台都会先执行app.js中onShow()函数再执行页面中的onShow()函数。运行机制运行机制小程序启动会有两种状况，一种是冷启动，一种是热启动。小程序启动会有两种状况，一种是冷启动，一种是热启动。假如假如用户已经打开过某小程序，然后

3、在确定时间内再次打开该小程序，此时无需用户已经打开过某小程序，然后在确定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的状况，此时小动指的是用户首次打开或小程序被微信主动销毁后再次打开的状况，此时小程序须要重新加载启动。程序须要重新加载启动。更新机制更新机制小程序冷启动时假如发觉有新版本，将会异步下载新版本的代码包，并小程序冷启动时假如发觉有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序须

4、要等下一次冷启同时用客户端本地的包进行启动，即新版本的小程序须要等下一次冷启动才会应用上。动才会应用上。假如须要立刻应用最新版本，可以运用假如须要立刻应用最新版本，可以运用wx.getUpdateManagerAPI进行处理进行处理运行机制运行机制小程序没有重启的概念小程序没有重启的概念当小程序进入后台，客户端会维持一段时间的运行状态，超过确定时间后当小程序进入后台，客户端会维持一段时间的运行状态，超过确定时间后（目前是（目前是5分钟）会被微信主动销毁分钟）会被微信主动销毁当短时间内（当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的）连续收到两次以上收到系统内存告警，会进行小

5、程序的销毁销毁5页面跳转navigator标签跳转跳转到新页面 在当前页打开 打开绑定的小程序通过路由函数进行跳转通过路由函数进行跳转6页面参数传递6页面返回值/获得页面栈 var pages=getCurrentPages();if(pages.length 1)/上一个页面实例对象 var prePage=pagespages.length-2;/关键在这里 prePage.changeData(hello);01237View实现点击效果实现点击效果按钮.hoverbackground-color:#aaa;WXMLWXSShover-class指定按下去的样式类。当 hover-cla

6、ss=none 时，没有点击态效果8scroll-view 9swiper9movable-area9cover-view地图9icon9text 你好 啊 哈哈哈（空格是中文字符一半大小）你好 啊 哈哈哈（空格是中文字符大小）你好 啊 哈哈哈（空格依据字体设置）t t 空格（空格（多个只会显示一个空多个只会显示一个空格）格）n n 换行换行你好！t七月流火啊！n我在下一行space space 有效值：有效值：你好 啊   哈哈哈（空格是中文字符一半大小）你好 啊   哈哈哈（空格是中文字符大小）你好 

7、啊   哈哈哈（空格依据字体设置）decodedecode是否解码是否解码WXSS1尺寸单位rpx（responsive pixel）:可以依据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。2样式导入运用import语句可以导入外联样式表，import后跟须要导入的外联样式表的相对路径，用;表示语句结束。3内联样式框架组件上支持运用 style、class 属性来限制组件的样式。style：静态的样式统一写到 clas

8、s 中。style 接收动态的样式，在运行时会进行解析，请尽量避开将静态的样式写进 style 中，以免影响渲染速度。class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不须要带上.，样式类名之间用空格分隔。样式内容显示定位背景边框文本属性fontmarginpadding4wxss display(显示display)属性说明flex多栏多列布局flex-direction:row/columninline-block行内块元素inline此元素会被显示为内联元素，元素前后没有换行符inline-table作为内联表格来显示（类似），表格前后没有换行符in

9、line-flex将对象作为内联块级弹性伸缩盒显示none此元素不会被显示block此元素将显示为块级元素，此元素前后会带有换行符list-item此元素会作为列表显示table会作为块级表格来显示（类似），表格前后带有换行符table-caption 作为一个表格标题显示（类似）table-cell作为一个表格单元格显示（类似 和）table-column 作为一个单元格列显示（类似）table-column-group作为一个或多个列的分组来显示（类似）table-row作为一个表格行显示（类似）table-row-group作为一个或多个行的分组来显示（类似）table-header-g

10、roup作为一个或多个行的分组来显示（类似）table-footer-group作为一个或多个行的分组来显示（类似）inherit从父元素继承 display 属性的值5wxss position(定位)属性说明absolute生成确定定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 left,top,right 以及 bottom 属性进行规定。relative生成相对定位的元素，相对于其正常位置进行定位。因此，left:20 会向元素的 LEFT 位置添加 20 像素。fixed生成确定定位的元素，相对于阅读器窗口进行定位。元素的位置通过 left,top,

11、right 以及 bottom 属性进行规定。static默认值。没有定位，元素出现在正常的流中（忽视 top,bottom,left,right 或者 z-index 声明）inherit规定应当从父元素继承 position 属性的值6wxss background(背景)backgroundbackground简写属性，作用是将背景属性设置在一个声明中简写属性，作用是将背景属性设置在一个声明中background:color position size repeat origin clip attachment image;background:color position size r

12、epeat origin clip attachment image;background-colorbackground-color指定要运用的背景颜色指定要运用的背景颜色background-positionbackground-position指定背景图像的位置指定背景图像的位置background-position:centerbackground-position:centerbackground-size background-size 指定背景图片的大小指定背景图片的大小background-size:80px 60px;background-size:80px 60px;宽度宽

13、度 高度高度background-repeatbackground-repeat指定如何重复背景图像指定如何重复背景图像repeat,repeat-x,repeat-y,no-repeat,inheritrepeat,repeat-x,repeat-y,no-repeat,inheritbackground-originbackground-origin指定背景图像的定位区域指定背景图像的定位区域padding-box padding-box 背景图像填充框的相对位置背景图像填充框的相对位置border-boxborder-box背景图像边界框的相对位置背景图像边界框的相对位置content-

14、boxcontent-box背景图像的相对位置的内容框背景图像的相对位置的内容框background-clipbackground-clip指定背景图像的绘画区域指定背景图像的绘画区域属性值，同上属性值，同上background-attachmentbackground-attachment设置背景图像是否固定或者随着页面的其余部分滚动。设置背景图像是否固定或者随着页面的其余部分滚动。scroll scroll 背景图片随页面的其余部分滚动。这是默认背景图片随页面的其余部分滚动。这是默认fixed fixed 背景图像是固定的背景图像是固定的inherit inherit 指定指定backgr

15、ound-attachmentbackground-attachment的设置应当从父元素继承的设置应当从父元素继承local local 背景图片随滚动元素滚动背景图片随滚动元素滚动background-imagebackground-image指定要运用的一个或多个背景图像指定要运用的一个或多个背景图像 url(URL)url(URL)图像的图像的URLURLnonenone无图像背景会显示。这是默认无图像背景会显示。这是默认inherit inherit 指定背景图像应当从父元素继承指定背景图像应当从父元素继承7wxss border(边框)属性属性说明说明borderborder简写属

16、性，用于把针对四个边的属性设置在一个声明简写属性，用于把针对四个边的属性设置在一个声明border:5px solid red;border:5px solid red;border-widthborder-width用于为元素的全部边框设置宽度，或者单独地为各边边框设置宽度用于为元素的全部边框设置宽度，或者单独地为各边边框设置宽度border-top-width border-top-width 上右下左边框厚度上右下左边框厚度 属性值：属性值：thin medium thick lengththin medium thick lengthborder-styleborder-style设置

17、元素全部边框的样式，或者单独地为各边设置边框样式。设置元素全部边框的样式，或者单独地为各边设置边框样式。border-top-width border-top-width 上右下左边框样式上右下左边框样式 属性值：属性值：solid,dashed,dotted,doublesolid,dashed,dotted,double等等border-colorborder-color元素的全部边框中可见部分的颜色，或为元素的全部边框中可见部分的颜色，或为 4 4 个边分别设置颜色个边分别设置颜色border-top-width border-top-width 上右下左边框颜色上右下左边框颜色7wxs

18、s 文本属性（text）8wxss 字体属性（font）9wxss margin(外边距)（margin）10wxss padding(填充)（padding）CONTENTS01计算器(布局)02计算器(字体和背景)03计算器(逻辑实现)逻辑实现输入数字输入运算符号输入正负符号输入其他逻辑实现输入数字是否编辑模式输入运算符号是否编辑模式是否为进行过计算当前值是否是0算式显示临时结果计算01布局02定位03定时器01外部点实现02内部图片布局03抽奖逻辑实现外部点实现 .container-out height:600rpx;width:650rpx;background-color:#b13

19、6b9;margin:100rpx auto;border-radius:40rpx;box-shadow:0 10px 0#871a8e;position:relative;.circle position:absolute;display:block;border-radius:50%;height:20rpx;width:20rpx;/圆点闪烁 setInterval(function()if(_this.data.colorCircleFirst=#FFDF2F)_this.setData(colorCircleFirst:#FE4D32,colorCircleSecond:#FFDF

20、2F,)else _this.setData(colorCircleFirst:#FFDF2F,colorCircleSecond:#FE4D32,),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)

21、topCircle=topCircle+94;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,leftCircle:leftCircle);外部

22、点实现 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:#f5f0fc;border-radius:15rpx;box-shadow:0 5px 0#d87fde;.start-btn

23、 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;