搜索
微信小程序入门主讲：刘志敏博客：微信视频：群：785071190课程内容认识小程序1小程序开发工具的下载与安装下载地址：小程序代码构成app.json官网地址：页面生命周期4页面栈4小程序生命周期与运行机制小程序需必须在app.js中使用App()函数进行小程序的注册，并且不能注册多个。小程序第一打开时将会下载整个小程序代码包，紧接着通过app.json配置初始化App，页面线程开始渲染首页，初始化完成后应用服务线程执行App中onLauch()函数和onShow()函数，然后才执行页面中的onLoad()函数和onShow()函数，每次进入后台（当用户点击左上角关闭，或者按了设备Home键离开微信）都会先执行页面中的onHide()函数再执行app.js中的onHide()函数，每次进入前台都会先执行app.js中onShow()函数再执行页面中的onShow()函数。运行机制小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。更新机制小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。如果需要马上应用最新版本，可以使用wx.getUpdateManagerAPI进行处理运行机制•小程序没有重启的概念•当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁•当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁5页面跳转navigator标签跳转navigatorurl=/page/navigate/navigate?title=navigatehover-class=navigator-hover跳转到新页面/navigatornavigatorurl=../../redirect/redirect/redirect?title=redirectopen-type=redirecthover-class=other-navigator-hover在当前页打开/navigatornavigatortarget=miniProgramopen-type=navigateapp-id=path=extra-data=version=release打开绑定的小程序/navigator通过路由函数进行跳转6页面参数传递6页面返回值//获取页面栈varpages=getCurrentPages();if(pages.length1){//上一个页面实例对象varprePage=pages[pages.length-2];//关键在这里prePage.changeData(‘hello’);}01237View实现点击效果viewhover-class='hover'按钮/view.hover{background-color:#aaa;}WXMLWXSShover-class指定按下去的样式类。当hover-class=none时，没有点击态效果8scroll-view!--垂直滚动，这里必须设置高度--scroll-viewscroll-y=truestyle=height:200pxviewstyle=background:red;width:100px;height:100px/viewviewstyle=background:green;width:100px;height:100px/viewviewstyle=background:blue;width:100px;height:100px/viewviewstyle=background:yellow;width:100px;height:100px/view/scroll-view!--水平滚动--scroll-viewscroll-x=truestyle=white-space:nowrap;display:flex!--display:inline-block--viewstyle=background:red;width:200px;height:100px;display:inline-block/viewviewstyle=background:green;width:200px;height:100px;display:inline-block/viewviewstyle=background:blue;width:200px;height:100px;display:inline-block/viewviewstyle=background:yellow;width:200px;height:100px;display:inline-block/view/scroll-view!--white-spacenormal:正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)pre:保持HTML源代码的空格与换行,等同与pre标签nowrap:强制文本在一行,除非遇到br换行标签pre-wrap:同pre属性,但是遇到超出容器范围的时候会自动换行pre-line:同pre属性,但是遇到连续空格会被看作一个空格inherit:继承--9swiperswiperindicator-dots='true'swiper-itemimagesrc='...'/image/swiper-itemswiper-itemimagesrc='...'/image/swiper-item/swiper9movable-areamovable-areastyle=width:200px;height:200px;background-color:black;movable-viewstyle='background-color:red;width:50px;height:50px;'direction='all'/movable-view/movable-area9cover-viewmapcover-view地图cover-imagesrc='/images/1.jpg'style='width:50px;heigth:50px;'/cover-image/cover-view/map9iconicontype=success/9textviewtextspace=ensp你好啊哈哈哈（空格是中文字符一半大小）/text/viewviewtextspace=emsp你好啊哈哈哈（空格是中文字符大小）/text/viewviewtextspace=nbsp你好啊哈哈哈（空格根据字体设置）/text/view\t空格（多个只会显示一个空格）\n换行text你好！\t七月流火啊！\n我在下一行/textspace有效值：viewtextdecode={{true}}你好 啊 哈哈哈（空格是中文字符一半大小）/text/viewviewtextdecode={{true}}你好 啊 哈哈哈（空格是中文字符大小）/text/viewviewtextdecode={{true}}你好 啊 哈哈哈（空格根据字体设置）/text/viewdecode是否解码WXSS1尺寸单位设备rpx换算px(屏幕宽度/750)px换算rpx(750/屏幕宽度)屏幕宽度iPhone51rpx=0.42px1px=2.34rpx320iPhone61rpx=0.5px1px=2rpx375iPhone6Plus1rpx=0.552px1px=1.81rpx414rpx（responsivepixel）:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。2样式导入使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。3内联样式框架组件上支持使用style、class属性来控制组件的样式。style：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。viewstyle=color:{{color}};/class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。viewclass=normal_view/样式内容①显示②定位③背景④边框⑤文本属性⑥font⑦margin⑧padding4wxssdisplay(显示display)属性说明flex多栏多列布局flex-direction:row/columninline-block行内块元素inline此元素会被显示为内联元素，元素前后没有换行符inline-table作为内联表格来显示（类似table），表格前后没有换行符inline-flex将对象作为内联块级弹性伸缩盒显示none此元素不会被显示block此元素将显示为块级元素，此元素前后会带有换行符list-item此元素会作为列表显示table会作为块级表格来显示（类似table），表格前后带有换行符table-caption作为一个表格标题显示（类似caption）table-cell作为一个表格单元格显示（类似td和th）table-column作为一个单元格列显示（类似col）table-column-group作为一个或多个列的分组来显示（类似colgroup）table-row作为一个表格行显示（类似tr）table-row-group作为一个或多个行的分组来显示（类似tbody）table-header-group作为一个或多个行的分组来显示（类似thead）table-footer-group作为一个或多个行的分组来显示（类似tfoot）inherit从父元素继承display属性的值5wxssposition(定位)属性说明absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left,top,right以及bottom属性进行规定。relative生成相对定位的元素，相对于其正常位置进行定位。因此，left:20会向元素的LEFT位置添加20像素。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left,top,right以及bottom属性进行规定。static默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-