微信小程序 入门ppt课件.ppt
《微信小程序 入门ppt课件.ppt》由会员分享,可在线阅读,更多相关《微信小程序 入门ppt课件.ppt(50页珍藏版)》请在三一办公上搜索。
1、微信小程序入门,主讲:刘志敏博客:https:/,CONTENTS,课程内容,认识小程序,1,小程序开发工具的下载与安装,下载地址:https:/,2,小程序代码构成,app.json,官网地址:https:/,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(); if
4、(pages.length 1) /上一个页面实例对象 var prePage = pagespages.length - 2; /关键在这里 prePage.changeData(hello); ,0,1,2,3,7,View,实现点击效果,按钮,.hoverbackground-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,样式导入,使用import语句可以导入外联样式表,
6、import后跟需要导入的外联样式表的相对路径,用;表示语句结束。,3,内联样式,框架组件上支持使用 style、class 属性来控制组件的样式。style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。,样式内容,显示定位背景边框文本属性fontmarginpadding,4,wxss display(显示display),属性说明flex多栏多列布局flex-dir
7、ection:row/columninline-block行内块元素inline此元素会被显示为内联元素,元素前后没有换行符inline-table作为内联表格来显示(类似 ),表格前后没有换行符inline-flex将对象作为内联块级弹性伸缩盒显示none此元素不会被显示block此元素将显示为块级元素,此元素前后会带有换行符list-item此元素会作为列表显示table会作为块级表格来显示(类似 ),表格前后带有换行符table-caption作为一个表格标题显示(类似 )table-cell作为一个表格单元格显示(类似 和 )table-column作为一个单元格列显示(类似 )tab
8、le-column-group作为一个或多个列的分组来显示(类似 )table-row作为一个表格行显示(类似 )table-row-group作为一个或多个行的分组来显示(类似 )table-header-group作为一个或多个行的分组来显示(类似 )table-footer-group作为一个或多个行的分组来显示(类似 )inherit从父元素继承 display 属性的值,5,wxss position(定位),属性说明absolute生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行
9、规定。relative生成相对定位的元素,相对于其正常位置进行定位。因此,left:20 会向元素的 LEFT 位置添加 20 像素。fixed生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)inherit规定应该从父元素继承 position 属性的值,6,wxss background(背景),background简写属性,作用是将背景属性设置在一个声明中background
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 微信小程序 入门ppt课件 微信小 程序 入门 ppt 课件

链接地址:https://www.31ppt.com/p-1415895.html