微信小程序入门

演示文(Wen)稿微信小程序入门第一页，共四十九页。（优选）微信小程(Cheng)序入门第二页，共四十九页。CONTENTS课程内(Nei)容第三页，共四十九页。认识(Shi)小程序第四页，共四十九页。1小程序开发工(Gong)具的下载与安装下载地址：/miniprogram/dev/devtools/download.html第五页，共四十九页。2小程序代码(Ma)构成第六页，共四十九页。app.json官(Guan)网地址：/miniprogram/dev/framework/config.html第七页，共四十九页。3页面生命(Ming)周期第八页，共四十九页。第九页，共四十九页。4页(Ye)面栈第十页，共四十九页。4小程序生命周期与运行机(Ji)制小程序需必须在app.js中使用App()函数进行小程序的注册，并且不能注册多个。小程序第一打开时将会下载整个小程序代码包，紧接着通过app.json配置初始化App，页面线程开始渲染首页，初始化完成后应用服务线程执行App中onLauch()函数和onShow()函数，然后才执行页面中的onLoad()函数和onShow()函数，每次进入后台（当用户点击左上角关闭，或者按了设备Home键离开微信）都会先执行页面中的onHide()函数再执行app.js中的onHide()函数，每次进入前台都会先执行app.js中onShow()函数再执行页面中的onShow()函数。第十一页，共四十九页。第十二页，共四十九页。运行机制小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此(Ci)时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此(Ci)时小程序需要重新加载启动。更新机制小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。如果需要马上应用最新版本，可以使用

wx.getUpdateManager

API进行处理运行机制小程序没有重启的概念当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁当短时间内（5s）连续收到两次以上收到系统内存告警，会进行小程序的销毁第十三页，共四十九页。5页(Ye)面跳转navigator标签跳转<navigatorurl="/page/navigate/navigate?title=navigate"hover-class="navigator-hover">跳转到新页面</navigator>

<navigatorurl="../../redirect/redirect/redirect?title=redirect"open-type="redirect"hover-class="other-navigator-hover">在当前页打开</navigator>

<navigatortarget="miniProgram"open-type="navigate"app-id=""path=""extra-data=""version="release">打开绑定的小程序</navigator>第十四页，共四十九页。通过路由(You)函数进行跳转第十五页，共四十九页。6页面参数传(Chuan)递第十六页，共四十九页。6页面返回(Hui)值//获取页面栈varpages=getCurrentPages();if(pages.length>1){//上一个页面实例对象varprePage=pages[pages.length-2];//关键在这里prePage.changeData(‘hello’);}0123第十七页，共四十九页。7View实现点(Dian)击效果<view

hover-class='hover'>按钮</view>.hover{ background-color:

#aaa;}WXMLWXSShover-class指定按下去的样式类。当hover-class="none"时，没有点击态效果第十八页，共四十九页。8scroll-view<!--垂直滚动，这(Zhe)里必须设置高度--><scroll-viewscroll-y="true"style="height:200px"><viewstyle="background:red;width:100px;height:100px"></view><viewstyle="background:green;width:100px;height:100px"></view><viewstyle="background:blue;width:100px;height:100px"></view><viewstyle="background:yellow;width:100px;height:100px"></view></scroll-view>第十九页，共四十九页。<!--水(Shui)平滚动--><scroll-viewscroll-x="true"style="white-space:nowrap;display:flex"><!--display:inline-block--><viewstyle="background:red;width:200px;height:100px;display:inline-block"></view><viewstyle="background:green;width:200px;height:100px;display:inline-block"></view><viewstyle="background:blue;width:200px;height:100px;display:inline-block"></view><viewstyle="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:继承-->第二十页，共四十九页。9swiper<swiperindicator-dots='true'><swiper-item>

<imagesrc='...'></image></swiper-item><swiper-item>

<imagesrc='...'></image></swiper-item></swiper>第二十一页，共四十九页。9movable-area<movable-areastyle="width:200px;height:200px;background-color:black;"><movable-viewstyle='background-color:red;width:50px;height:50px;'direction='all'></movable-view></movable-area>第二十二页，共四十九页。9cover-view<map><cover-view>地(Di)图<cover-imagesrc='/images/1.jpg'style='width:50px;heigth:50px;'></cover-image></cover-view></map>第二十三页，共四十九页。9icon<icontype="success"/>第二十四页，共四十九页。9text<view><textspace="ensp">你好啊哈哈哈（空(Kong)格是中文字符一半大小）</text></view><view><textspace="emsp">你好啊哈哈哈（空格是中文字符大小）</text></view><view><textspace="nbsp">你好啊哈哈哈（空格根据字体设置）</text></view>\t空格（多个只会显示一个空格）\n换行<text>你好！\t七月流火啊！\n我在下一行</text>space有效值：第二十五页，共四十九页。<view><textdecode="{{true}}">你好 啊   哈哈哈（空格是中文字符一半大小）</text></view><view><textdecode="{{true}}">你好 啊   哈哈哈（空格是中文字符大小）</text></view><view><textdecode="{{true}}">你好 啊   哈哈哈（空格根(Gen)据字体设置）</text></view>decode是否解码第二十六页，共四十九页。WXSS第二十七页，共四十九页。1尺寸(Cun)单位设备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样(Yang)式导入使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。第二十九页，共四十九页。3内(Nei)联样式框架组件上支持使用style、class属性来控制组件的样式。style：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。<viewstyle="color:{{color}};"/>class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。<viewclass="normal_view"/>第三十页，共四十九页。样(Yang)式内容显示定位背景边框文本属性fontmarginpadding第三十一页，共四十九页。4wxssdisplay(显(Xian)示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(定(Ding)位)属性 说明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属性的值第三十三页，共四十九页。6wxssbackground(背(Bei)景)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背景图像填充框的相对位置第三十四页，共四十九页。border-box

背景图像边界框的相对位置(Zhi)content-box

背景图像的相对位置的内容框background-clip

指定背景图像的绘画区域

属性值，同上background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动。

scroll背景图片随页面的其余部分滚动。这是默认fixed

背景图像是固定的inherit

指定background-attachment的设置应该从父元素继承local

背景图片随滚动元素滚动background-image

指定要使用的一个或多个背景图像 url('URL')图像的URLnone

无图像背景会显示。这是默认inherit

指定背景图像应该从父元素继承第三十五页，共四十九页。7wxssborder(边(Bian)框)属性

说明

border

简写属性，用于把针对四个边的属性设置在一个声明

border:5pxsolidred;border-width 用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度

border-top-width上右下左边框厚度属性值：thinmediumthicklengthborder-style 设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-top-width上右下左边框样式属性值：solid,dashed,dotted,double等border-color 元素的所有边框中可见部分的颜色，或为4个边分别设置颜色

border-top-width上右下左边框颜色第三十六页，共四十九页。7wxss文本(Ben)属性（text）属性说明语法(属性值)color设置文本颜色direction设置文本方向。ltr:文本方向从左到右;rtl:文本方向从右到左letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本left：把文本排列到左边。默认值，由浏览器决定。right：把文本排列到右边。center：把文本排列到中间。justify：实现两端对齐文本效果。inherit:规定应该从父元素继承

text-align属性的值。第三十七页，共四十九页。text-decoration向文本添加修饰underline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。blink定义闪烁的文本。text-indent缩进元素中文本的首行text-shadow设置文本阴影text-shadow:h-shadowv-shadowblurcolor;h-shadow:水平阴影的位置,允许负值;v-shadow:垂直阴影的位置,允许负值;blur:模糊的距离;color:阴影的颜色text-transform控制元素中的字母capitalize文本中的每个单词以大写字母开头。uppercase定义仅有大写字母。lowercase定义无大写字母，仅有小写字母。unicode-bidi设置或返回文本是否被重写

vertical-align设置元素的垂直对齐white-space设置元素中空白的处理方式word-spacing设置字间距第三十八页，共四十九页。8wxss字体属(Shu)性（font）属性说明语法(属性值)font在一个声明中设置所有字体属性font:font-stylefont-variantfont-weightfont-size/line-heightfont-family(按顺序)font-style指定文本的字体样式normal默认值。浏览器显示一个标准的字体样式。italic浏览器会显示一个斜体的字体样式。oblique浏览器会显示一个倾斜的字体样式。inherit规定应该从父元素继承字体样式。font-variant以小型大写字体或者正常字体显示文本normal默认值。浏览器会显示一个标准的字体。small-caps浏览器会显示小型大写字母的字体。inherit规定应该从父元素继承

font-variant属性的值。font-weight指定字体的粗细normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。inherit规定应该从父元素继承字体的粗细。font-size指定文本的字体大小smaller把

font-size设置为比父元素更小的尺寸。larger把

font-size设置为比父元素更大的尺寸。length把

font-size设置为一个固定的值。%把

font-size设置为基于父元素的一个百分比值。font-family指定文本的字体系列第三十九页，共四十九页。9wxssmargin(外(Wai)边距)（margin）属性说明语法(属性值)margin在一个声明中设置所有外边距属性。margin:10px5px15px20px;(上边距，右边距，下边距，左边距)margin-top设置元素的上外边距。margin-right设置元素的右外边距。margin-bottom设置元素的下外边距。margin-left设置元素的左外边距第四十页，共四十九页。10wxsspadding(填(Tian)充)（padding）属性说明语法(属性值)padding使用缩写属性设置在一个声明中的所有填充属性padding:10px5px15px20px;(上填充，右填充，下填充，左填充)padding-top设置元素的顶部填充。padding-right设置元素的右部填充padding-bottom设置元素的底部填充padding-left设置元素的左部填充第四十一页，共四十九页。CONTENTS01计算(Suan)器(布局)02计算器(字体和背景)03计算器(逻辑实现)第四十二页，共四十九页。逻(Luo)辑实现输入数字输入运算符号输入正负符号输入其他第四十三页，共四十九页。逻辑实(Shi)现输入数字是否编辑模式输入运算符号是否编辑模式是否为进行过计算当前值是否是0算式显示临时结果计算第四十四页，共四十九页。01布(Bu)局02定位03定时器第四十五页，共四十九页。01外部点(Dian)实现02内部图片布局03抽奖逻辑实现第四十六页，共四十九页。外部点实(Shi)现<viewclass="container-out"><viewclass="circle"wx:for="{{circleList}}"style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color:{{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view></view>.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;}第四十七页，共四十九页。//圆(Yuan)点闪烁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;leftCircl