《微信小程序-入门[知识荟萃]》由会员分享，可在线阅读，更多相关《微信小程序-入门[知识荟萃]（50页珍藏版）》请在金锄头文库上搜索。
1、微信小程序入门主讲：刘志敏博客：https:/ hover-class=none 时，没有点击态效果17借鉴内容8scroll-view18借鉴内容19借鉴内容9swiper20借鉴内容9movable-area21借鉴内容9cover-view地图22借鉴内容9icon23借鉴内容9text你好啊哈哈哈（空格是中文字符一半大小）你好啊哈哈哈（空格是中文字符大小）你好啊哈哈哈（空格根据字体设置）tt空格（空格（ 多个只会显示一个空多个只会显示一个空格）格） nn换行换行你好！t七月流火啊！n我在下一行spacespace有效值：有效值：24借鉴内容你好 啊 &e
2、nsp;哈哈哈（空格是中文字符一半大小）你好 啊 哈哈哈（空格是中文字符大小）你好 啊 哈哈哈（空格根据字体设置）decodedecode是否解码是否解码25借鉴内容WXSS26借鉴内容1尺寸单位设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)屏幕宽度iPhone51rpx=0.42px1px=2.34rpx320iPhone61rpx=0.5px1px=2rpx375iPhone6Plus1rpx=0.552px1px=1.81rpx414rpx（responsivepixel
3、）:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。27借鉴内容2样式导入使用import语句可以导入外联样式表，import后跟需要导入的外联样式表的相对路径，用;表示语句结束。28借鉴内容3内联样式框架组件上支持使用style、class属性来控制组件的样式。style：静态的样式统一写到class中。style接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进style中，以免影响渲染速度。class：用于指定样式规则，其属性值
4、是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。29借鉴内容样式内容显示定位背景边框文本属性fontmarginpadding30借鉴内容4wxssdisplay(显示display)属性说明flex多栏多列布局flex-direction:row/columninline-block行内块元素inline此元素会被显示为内联元素，元素前后没有换行符inline-table作为内联表格来显示（类似），表格前后没有换行符inline-flex将对象作为内联块级弹性伸缩盒显示none此元素不会被显示block此元素将显示为块级元素，此元素前后会带有换行符li
5、st-item此元素会作为列表显示table会作为块级表格来显示（类似），表格前后带有换行符table-caption 作为一个表格标题显示（类似）table-cell作为一个表格单元格显示（类似和）table-column 作为一个单元格列显示（类似）table-column-group作为一个或多个列的分组来显示（类似）table-row作为一个表格行显示（类似）table-row-group作为一个或多个行的分组来显示（类似）table-header-group作为一个或多个行的分组来显示（类似）table-footer-group作为一个或多个行的分组来显示（类似）inherit从父元
6、素继承display属性的值31借鉴内容5wxssposition(定位)属性说明absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过left,top,right以及bottom属性进行规定。relative生成相对定位的元素，相对于其正常位置进行定位。因此，left:20会向元素的LEFT位置添加20像素。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过left,top,right以及bottom属性进行规定。static默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-inde
7、x声明）inherit规定应该从父元素继承position属性的值32借鉴内容6wxssbackground(背景)backgroundbackground简写属性，作用是将背景属性设置在一个声明中background:colorpositionsizerepeatoriginclipattachmentimage;background-colorbackground-color指定要使用的背景颜色background-positionbackground-position指定背景图像的位置background-position:centerbackground-sizebackground-
8、size指定背景图片的大小background-size:80px60px;宽度高度background-repeatbackground-repeat指定如何重复背景图像repeat,repeat-x,repeat-y,no-repeat,inheritbackground-originbackground-origin指定背景图像的定位区域padding-box背景图像填充框的相对位置33借鉴内容border-boxborder-box背景图像边界框的相对位置content-boxcontent-box背景图像的相对位置的内容框background-clipbackground-clip指
9、定背景图像的绘画区域属性值，同上background-attachmentbackground-attachment设置背景图像是否固定或者随着页面的其余部分滚动。scroll背景图片随页面的其余部分滚动。这是默认fixedfixed背景图像是固定的inheritinherit指定background-attachment的设置应该从父元素继承locallocal背景图片随滚动元素滚动background-imagebackground-image指定要使用的一个或多个背景图像 url(URL)图像的URLnonenone无图像背景会显示。这是默认inheritinherit指定背景图像应该从
10、父元素继承34借鉴内容7wxssborder(边框)属性属性说明说明border简写属性，用于把针对四个边的属性设置在一个声明border:5pxsolidred;border-width用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度border-top-width上右下左边框厚度属性值：thinmediumthicklengthborder-style设置元素所有边框的样式，或者单独地为各边设置边框样式。border-top-width上右下左边框样式属性值：solid,dashed,dotted,double等border-color元素的所有边框中可见部分的颜色，或为4个边分
11、别设置颜色border-top-width上右下左边框颜色35借鉴内容7wxss文本属性（text）属性说明语法(属性值)color设置文本颜色direction设置文本方向。ltr:文本方向从左到右;rtl:文本方向从右到左letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本left：把文本排列到左边。默认值，由浏览器决定。right：把文本排列到右边。center：把文本排列到中间。justify：实现两端对齐文本效果。inherit: 规定应该从父元素继承 text-align 属性的值。36借鉴内容text-decoration向文
12、本添加修饰underline 定义文本下的一条线。overline 定义文本上的一条线。line-through 定义穿过文本下的一条线。blink 定义闪烁的文本。text-indent缩进元素中文本的首行text-shadow设置文本阴影text-shadow: h-shadow v-shadow blur color;h-shadow:水平阴影的位置,允许负值;v-shadow:垂直阴影的位置,允许负值;blur:模糊的距离;color:阴影的颜色text-transform控制元素中的字母capitalize 文本中的每个单词以大写字母开头。uppercase 定义仅有大写字母。low
13、ercase 定义无大写字母，仅有小写字母。unicode-bidi设置或返回文本是否被重写 vertical-align设置元素的垂直对齐white-space设置元素中空白的处理方式word-spacing设置字间距37借鉴内容8wxss字体属性（font）属性说明语法(属性值)font在一个声明中设置所有字体属性font:font-style font-variant font-weight font-size/line-height font-family(按顺序)font-style指定文本的字体样式normal 默认值。浏览器显示一个标准的字体样式。italic 浏览器会显示一个斜
14、体的字体样式。oblique 浏览器会显示一个倾斜的字体样式。inherit 规定应该从父元素继承字体样式。font-variant以小型大写字体或者正常字体显示文本normal 默认值。浏览器会显示一个标准的字体。small-caps 浏览器会显示小型大写字母的字体。inherit 规定应该从父元素继承 font-variant 属性的值。font-weight指定字体的粗细normal 默认值。定义标准的字符。bold 定义粗体字符。bolder 定义更粗的字符。lighter 定义更细的字符。inherit 规定应该从父元素继承字体的粗细。font-size指定文本的字体大小smalle
15、r 把 font-size 设置为比父元素更小的尺寸。larger 把 font-size 设置为比父元素更大的尺寸。length 把 font-size 设置为一个固定的值。% 把 font-size 设置为基于父元素的一个百分比值。font-family指定文本的字体系列38借鉴内容9wxssmargin(外边距)（margin）属性说明语法(属性值)margin在一个声明中设置所有外边距属性。margin:10px 5px 15px 20px;(上边距，右边距，下边距，左边距)margin-top设置元素的上外边距。margin-right设置元素的右外边距。margin-bottom设
16、置元素的下外边距。margin-left设置元素的左外边距39借鉴内容10wxsspadding(填充)（padding）属性说明语法(属性值)padding使用缩写属性设置在一个声明中的所有填充属性padding:10px 5px 15px 20px;(上填充，右填充，下填充，左填充)padding-top设置元素的顶部填充。padding-right设置元素的右部填充padding-bottom设置元素的底部填充padding-left设置元素的左部填充40借鉴内容CONTENTS01计算器(布局)02计算器(字体和背景)03计算器(逻辑实现)41借鉴内容逻辑实现输入数字输入运算符号输入正
17、负符号输入其他42借鉴内容逻辑实现输入数字是否编辑模式输入运算符号是否编辑模式是否为进行过计算当前值是否是0算式显示临时结果计算43借鉴内容01布局02定位03定时器44借鉴内容01外部点实现02内部图片布局03抽奖逻辑实现45借鉴内容外部点实现.container-outheight:600rpx;width:650rpx;background-color:#b136b9;margin:100rpxauto;border-radius:40rpx;box-shadow:010px0#871a8e;position:relative;.circleposition:absolute;displ
18、ay: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
19、=7.5;varcircleList=;for(vari=0;i24;i+)if(i=0)topCircle=15;leftCircle=15;elseif(i6)topCircle=7.5;leftCircle=leftCircle+102.5;elseif(i=6)topCircle=15leftCircle=620;elseif(i12)topCircle=topCircle+94;leftCircle=620;elseif(i=12)topCircle=565;leftCircle=620;elseif(i18)topCircle=570;leftCircle=leftCircle-1
20、02.5;elseif(i=18)topCircle=565;leftCircle=15;elseif(i24)topCircle=topCircle-94;leftCircle=7.5;elsereturncircleList.push(topCircle:topCircle,leftCircle:leftCircle);47借鉴内容外部点实现START48借鉴内容.container-inwidth:580rpx;height:530rpx;background-color:#871a8e;border-radius:40rpx;position:absolute;left:0;right
21、:0;top:0;bottom:0;margin:auto;.content-outposition:absolute;height:150rpx;width:166.6666rpx;background-color:#f5f0fc;border-radius:15rpx;box-shadow:05px0#d87fde;49借鉴内容.start-btnposition:absolute;margin:auto;top:0;left:0;bottom:0;right:0;border-radius:15rpx;height:150rpx;width:166.6666rpx;background-color:#ffe400;box-shadow:05px0#e7930a;color:#f6251e;text-align:center;font-size:55rpx;font-weight:bolder;line-height:150rpx;.award-imageposition:absolute;margin:auto;top:0;left:0;bottom:0;right:0;height:140rpx;width:130rpx;50借鉴内容
