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

微信小程序入门 主讲 刘志敏博客 1 CONTENTS 课程内容 2 认识小程序 3 1 小程序开发工具的下载与安装 下载地址 4 2 小程序代码构成 5 app json 官网地址 6 3 页面生命周期 7 8 4 页面栈 9 4 小程序生命周期与运行机制 小程序需必须在app js中使用App 函数进行小程序的注册 并且不能注册多个 小程序第一打开时将会下载整个小程序代码包 紧接着通过app json配置初始化App 页面线程开始渲染首页 初始化完成后应用服务线程执行App中onLauch 函数和onShow 函数 然后才执行页面中的onLoad 函数和onShow 函数 每次进入后台 当用户点击左上角关闭 或者按了设备Home键离开微信 都会先执行页面中的onHide 函数再执行app js中的onHide 函数 每次进入前台都会先执行app js中onShow 函数再执行页面中的onShow 函数 10 11 运行机制小程序启动会有两种情况 一种是 冷启动 一种是 热启动 假如用户已经打开过某小程序 然后在一定时间内再次打开该小程序 此时无需重新启动 只需将后台态的小程序切换到前台 这个过程就是热启动 冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况 此时小程序需要重新加载启动 更新机制小程序冷启动时如果发现有新版本 将会异步下载新版本的代码包 并同时用客户端本地的包进行启动 即新版本的小程序需要等下一次冷启动才会应用上 如果需要马上应用最新版本 可以使用wx getUpdateManagerAPI进行处理 运行机制小程序没有重启的概念当小程序进入后台 客户端会维持一段时间的运行状态 超过一定时间后 目前是5分钟 会被微信主动销毁当短时间内 5s 连续收到两次以上收到系统内存告警 会进行小程序的销毁 12 5 页面跳转 navigator标签跳转 跳转到新页面在当前页打开打开绑定的小程序 13 通过路由函数进行跳转 14 6 页面参数传递 15 6 页面返回值 获取页面栈varpages getCurrentPages if pages length 1 上一个页面实例对象varprePage pages pages length 2 关键在这里prePage changeData hello 0 1 2 3 16 7 View 实现点击效果 按钮 hover background color aaa WXML WXSS hover class指定按下去的样式类 当hover class none 时 没有点击态效果 17 8 scroll view 18 19 9 swiper 20 9 movable area 21 9 cover view 地图 22 9 icon 23 9 text 你好啊哈哈哈 空格是中文字符一半大小 你好啊哈哈哈 空格是中文字符大小 你好啊哈哈哈 空格根据字体设置 t空格 多个只会显示一个空格 n换行 你好 t七月流火啊 n我在下一行 space有效值 24 你好哈哈哈 空格根据字体设置 decode是否解码 25 WXSS 26 1 尺寸单位 rpx responsivepixel 可以根据屏幕宽度进行自适应 规定屏幕宽为750rpx 如在iPhone6上 屏幕宽度为375px 共有750个物理像素 则750rpx 375px 750物理像素 1rpx 0 5px 1物理像素 27 2 样式导入 使用 import语句可以导入外联样式表 import后跟需要导入的外联样式表的相对路径 用 表示语句结束 28 3 内联样式 框架组件上支持使用style class属性来控制组件的样式 style 静态的样式统一写到class中 style接收动态的样式 在运行时会进行解析 请尽量避免将静态的样式写进style中 以免影响渲染速度 class 用于指定样式规则 其属性值是样式规则中类选择器名 样式类名 的集合 样式类名不需要带上 样式类名之间用空格分隔 29 样式内容 显示定位背景边框文本属性fontmarginpadding 30 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属性的值 31 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属性的值 32 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背景图像填充框的相对位置 33 border box背景图像边界框的相对位置content box背景图像的相对位置的内容框background clip指定背景图像的绘画区域属性值 同上background attachment设置背景图像是否固定或者随着页面的其余部分滚动 scroll背景图片随页面的其余部分滚动 这是默认fixed背景图像是固定的inherit指定background attachment的设置应该从父元素继承local背景图片随滚动元素滚动background image指定要使用的一个或多个背景图像url URL 图像的URLnone无图像背景会显示 这是默认inherit指定背景图像应该从父元素继承 34 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上右下左边框颜色 35 7 wxss文本属性 text 36 37 8 wxss字体属性 font 38 9 wxssmargin 外边距 margin 39 10 wxsspadding 填充 padding 40 CONTENTS 01 计算器 布局 02 计算器 字体和背景 03 计算器 逻辑实现 41 逻辑实现 输入数字 输入运算符号 输入正负符号 输入其他 42 逻辑实现 输入数字 是否编辑模式 输入运算符号 是否编辑模式 是否为进行过计算 当前值是否是0 算式显示 临时结果计算 43 01 布局 02 定位 03 定时器 44 01 外部点实现 02 内部图片布局 03 抽奖逻辑实现 45 外部点实现 container out height 600rpx width 650rpx background color b136b9 margin 100rpxauto border radius 40rpx box shadow 010px0 871a8e position relative circle position absolute display block border radius 50 height 20rpx width 20rpx 46 圆点闪烁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 i 24 i if i 0 topCircle 15 leftCircle 15 elseif i 6 topCircle 7 5 leftCircle leftCircle 102 5 elseif i 6 topCircle 15leftCircle 620 elseif i 12 topCircle topCircle 94 leftCircle 620 elseif i 12 topCircle 565 leftCircle 620 elseif i 18 topCircle 570 leftCircle leftCircle 102 5 elseif i 18 topCircle 565 leftCircle 15 elseif i 24 topCircle topCircle 94 leftCircle 7 5 else return circleList push topCircle topCircle leftCircle leftCircle 47 外部点实现 START 48 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 05px0 d87fde 49 start btn position absolute margin auto top 0 left 0 bottom 0 right 0 border radius