小程序

课程大纲：

（1）循环指令key属性补充
（2）wx:if条件变异指令
（3）标签
（4）hidden隐藏元素
（5）模板
（6）引用
（7）共同属性

循环指令key属性补充：

Vue和React框架用遍历指令时的key值不建议用index
（1）key值在没有删除插入操作时只要是唯一值也无所谓，即此时为index索引也可以
（2）如果有删除或者插入的操作，后一位会继承删掉的index，这时的key写不如不写，本来key是为了让遍历性能优化的操作，这种可能重复或者改变的key值，不仅不会优化还会影响性能
（3）index作为:key值，有可能导致第一次执行循环体初始化失败，正确的做法是尽量使用理想的 key 值，比如每项都有的唯一 id或者名字

用index作为wx:key值

用id作为wx:key值：

WXML语法—条件渲染：

标签
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

标签

注意
并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

hidden隐藏元素

除了wx:if可以控制元素显隐外，hidden属性也可以控制显隐

wx:if vs hidden
①wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染
②wx:if是惰性的，切换开销大，但初始化开销小
③hidden组件始终会被渲染，只是简单的控制wxss显示与隐藏
④一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

WXML语法—模板

WXML提供模板template，可以在模板中定义代码片段，然后在不同的地方调用。

①template.wxml定义模板并命名
②在其他页面通过import和include引入
③使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

（1）定义模板并命名
例如在template.wxml中定义模板并命名

（2）在其他页面通过import或者include引入
例如在test.wxml文件通过import引入

（3）使用 is 属性，声明模板，然后传入data

（4）最终渲染结果

同理，在别的页面也可以调用模板，然后传入数据

WXML语法—引用

WXML 提供两种文件引用方式import和include
（1）import
import 可以文件中使用目标文件定义的 template，正如之前案例所示。
（2）include
include可以将整个代码引入，相当于是拷贝到 include 位置

WXML语法—共同属性

WXML语法—自定义属性

获取自定义属性值
event.currentTarget.dataset.***
event.currentTarget代表的是注册了监听点击事件的组件

课程大纲

（1）WXSS简介
（2）分类
（3）尺寸单位rpx
（4）样式导入@import
（5）style内联样式
（6）WXSS选择器
（7）开发工具设置

WXSS分类

小程序中的样式文件一共分为两个级别/两类：
提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
小程序全局样式app.wxss，也叫页面公共样式，会被注入到小程序的每个页面。页面样式page.wxss，即单个页面样式
注意：WXSS 仅支持部分 CSS 选择器

WXSS尺寸单位

在WXSS中，引入了rpx（responsive pixel响应像素）尺寸单位。
引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。

场景：同一个元素，在不同宽度的屏幕下，如果使用px为尺寸单位，有可能造成页面留白过多，如下图所示。

原理:-----移动端—2倍—UI7501334—375667
小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375逻辑像素的屏幕下，1rpx = 1px。
具体适配与像素问题见下节《物理像素与逻辑像素》

WXSS样式导入
微信小程序可以使用@import语句导入外联样式表
@import后跟需要导入的外联样式表的相对路径，用;表示结束

WXSS内联样式

小程序框架组件支持使用 style属性来控制组件的样式
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，要尽量避免将静态的样式写进 style 中，以免影响渲染速度。

WXSS选择器

开发工具设置

（1）上传代码时自动补全
小程序要求兼容到iOS8以下版本，需要开启样式自动补全，在“设置”—“项目设置”—勾选“上传代码时样式自动补全”。
（2）不校验合法域名
设置完毕后，在微信开发者工具中，就可以随意访问了。此时便可以使用 http://localhost:12345/这种既不带 https的安全链接地址。

课堂总结

1）尺寸单位rpx
（2）样式导入@import
（3）内联样式style
（4）全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

屏幕尺寸

屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米

比如常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等

如何计算手机尺寸？
知道手机屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。还有个更简单的方法，只要用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。

物理像素–UI设计师像素

物理像素/屏幕分辨率/物理分辨率：
屏幕分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点，指的是设备屏幕实际拥有的像素点。
单位：px，即1px=1个像素点
比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750px*1334px个物理像素
注意：屏幕分辨率即物理像素是固定的，这是厂商在出厂时就设置好的，也就是说一个设备的分辨率是固定的

苹果系列商品的参数

重点：
UI----物理像素
前端—逻辑像素

逻辑像素/设备独立像素DIP—WEB

逻辑像素/设备独立像素
也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。
这个是计算机坐标系统里的虚拟慨念，这个点代表一个可以由程序使用的虚拟像素(比如: css像素-----逻辑像素)

逻辑像素/设备独立像素

iPhone 4用4个物理像素表示1个设备独立像素（横向2个物理像素表示1个设备独立像素，纵向2个物理像素表示一个设备独立像素），这一切都是由操作系统控制的。

viewport

viewport:
viewport（谷歌翻译为：视）中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素。
也就是说我们经常说的工程师尺寸就是逻辑像素，设计师尺寸就是物理像素。

倍率与逻辑像素

倍率与逻辑像素：
苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

注意：设备像素比是视网膜屏与非视网膜屏的一个识别区别：非视网膜屏的设备像素比为1，视网膜屏的设备像素比大于等于2。

倍率与逻辑像素

物理像素与逻辑像素

CSS中的1px并不等于设备的1px
在CSS中一般使用px作为单位，在Web浏览器中CSS的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成一个错觉，那就是CSS中的像素就是设备的物理像素。
但实际情况却并非如此，CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的设备物理像素是不同的。

CSS中的1px并不等于设备的1px
在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320480，在iphone3上，1个CSS像素确实是等于1个物理像素的。
后来随着技术的发展，移动设备的像素越来越高，从iphone4开始，推出了所谓的Retina屏，分辨率提高了一倍，变成640960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，1个CSS像素是等于4个物理像素的，需要使用大约4个物理像素来显示一个CSS像素。

实现真正的1物理像素
当viewport（谷歌翻译为：视）的属性initial-scale（谷歌翻译为：初始规模）为1时，页面大小正常，但initial-scale（谷歌翻译为：初始规模）为0.5时，页面被缩小了1倍，像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。

小结：
工程师尺寸就是逻辑像素，设计师尺寸就是物理像素；

小结：
小程序编译后，rpx会做一次px换算
vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。但是一般情况下，百分比+rpx就已经足够使用了,所以出场机会很少
二倍图：1个逻辑像素等于2个物理像素

rpx适配

rpx是小程序中的尺寸单位，它有以下特征：
①小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此
②1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6的screenWidth=375px，则在iphone6中1rpx=0.5px

由上可知，在不同设备上rpx与px的转换是不相同的，但是宽度的rpx却是固定的，所以可以使用rpx作为单位，来设置布局的宽高。

WXSS尺寸单位

原理:
小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。

vw、vh适配

vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。
①小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
②小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh
所以，在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局，但是一般情况下，百分比+rpx就已经足够使用了,所以它们的出场机会很少。

WXSS选择器权重与优先级

WXSS优先级与CSS类似，权重如下图所示

权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式

权重案例：

适配小结

针对上节介绍的物理像素与逻辑像素相关概念，本节再来做个小结，简单做下回顾

物理像素dp

（1）物理像素(physical pixel)
物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。
一个设备的物理像素是固定不变的。每个像素可以根据操作系统设置自己的颜色和亮度。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素.
也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

（1）物理像素(physical pixel)

设备独立像素DIP

（2）设备独立像素
CSS像素/逻辑像素/设备独立像素/设备无关像素（Device Independent Pixels）
设备独立像素(又称设备无关像素 Device Independent Pixels），可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: css像素),然后由相关系统转换为物理像素。

设备像素比DPR

（3）设备像素比（Device Pixel Ratio, DPR）
一个设备的物理像素与逻辑像素之比

计算：设备像素比 2(dpr)＝ 物理像素(dp)750 / 逻辑像素375(dip)

在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素/逻辑像素相当于2个物理像素。通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。

每英寸点数DPI

（4）DPI（Dots Per Inch，每英寸点数）
一个量度单位，用于点阵数码影像，指每一英寸长度中，取样、可显示或输出点的数目。
是屏幕像素密度ppi（pixel per inch）的单位

屏幕像素密度ppi

（5）屏幕像素密度ppi（pixel per inch）
屏幕像素密度(ppi)是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高。
单位：dpi（Dots Per Inch，每英寸点数）
计算：屏幕像素密度(ppi) = 对角线分辨率 / 对角线尺寸

媒体查询

（1） 媒体查询
利用设备像素比缩放，设置小数像素；css与js写法任选其一

优点：简单，好理解
缺点：兼容性差，目前之余IOS8+才支持，在IOS7及其以下、安卓系统都是显示0px。

border-image 方案

（2）设置 border-image 方案
iOS7已经发布有一段时间，扁平化设计风格有很多值得称赞的地方，其中有很多设计细节都是值得研究的。
首先，来看下面iOS设置的截图中的border：

（2）设置 border-image 方案
从上面的截图可以看到iOS7的设计是非常精细的，border是一根非常细的线。可以使用border-image实现iOS7的border效果。

通常手机端的页面设计稿都是放大一倍的，如：为适应iphone retina，设计稿会设计成640*960的分辨率，图片按照2倍大小切出来，在手机端看着就不会虚化，非常清晰。

（2）设置 border-image 方案
同样，在使用border-image时，将border设计为物理1px，如下：

显示效果对比：

（2）设置 border-image 方案
border-width：指定边框的宽度，可以设定四个值，分别为上右下左border-width: top right bottom left。
border-image：该例意为：距离图片上方2px（属性值上没有单位）裁剪边框图片作为上边框，下方2px裁剪作为下边框。距离左右0像素裁剪图片即没有边框，以拉伸方式展示。

（2）设置 border-image 方案

缺点：需要制作图片，圆角可能出现模糊。代码写起来挺简单，但是要自己制作图片，而且圆角也不好弄，如果改了颜色就要对图片处理，所以不是很好的方案。

box-shadow方案

（3）利用box-shadow阴影也可以实现

box-shadow属性的用法：box-shadow: h-shadow v-shadow [blur] [spread] [color] [inset]

参数：
参数分别表示: 水平阴影位置，垂直阴影位置，模糊距离， 阴影尺寸，阴影颜色，将外部阴影改为内部阴影，后四个可选。该例中为何将阴影尺寸设置为负数？设置成-1px 是为了让阴影尺寸稍小于div元素尺寸，这样左右两边的阴影就不会暴露出来，实现只有底部一边有阴影的效果。从而实现分割线效果（单边边框）。

优点：没有圆角问题
缺点：颜色不好控制

transform方案

（4）transform: scale(0.5) 方案 - 推荐: 很灵活
核心思想是使用transform的scale来整体缩放，如果你想画一条1px的线，就可以直接用

理论上在dpr为2时就是scaleY(0.5)，在dpr为3时就是scaleY(0.333)，但是通常并没有针对其他dpr的做特殊处理。
因为在iPhone6（dpr=2）和iPhone6 Plus（dpr=3）中看起来差别不大

如果你想给一个元素加一个1px的边框可以利用到伪元素，在这个方案下边框加圆角也很容易实现，具体代码如下：

媒体查询 + transfrom
（5）媒体查询 + transfrom 对方案1的优化