小程序开发

小程序刚发布的时候要求压缩包的体积不能大于1M，否则无法通过，2017年进行了改进，由原来的1M提升到2M。小程序对app进行互补，比app操作更加简洁的轻应用，开发门槛低，成本低。

1. 小程序没有DOM对象，一切基于组件化
2. 小程序的四个重要的文件
   1. *.js
   2. *.wxml ---> view结构 ----> html
   3. *.wxss ---> view样式 -----> css
   4. *. json ----> view 数据 -----> json文件
3. 储备知识
   1. 理解事件机制
   2. 理解组件化
   3. 理解数据绑定
   4. Flex布局
   5. 移动端适配方案
4. 学习vue后开发小程序非常方便
5. Flex布局简介

   1) Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

   2) 任何一个容器都可以指定为Flex布局。3) display: ‘flex’

6. flex属性

   1) flex-direction:

   row（默认值）：主轴为水平方向，起点在左端。

   row-reverse：主轴为水平方向，起点在右端。

   column：主轴为垂直方向，起点在上沿。

   column-reverse：主轴为垂直方向，起点在下沿。

7. 学习网站：Flex 布局语法教程 | 菜鸟教程

8. 移动端适配

   4.3.1 物理像素

   1) 屏幕的分辨率

   2) 设备能控制显示的最小单元，可以把物理像素看成是对应的像素点

   4.3.2 设备独立像素 & css像素

   设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。

   4.3.3 dpr比 & DPI & PPI

   1) dpr: 设备像素比，物理像素/设备独立像素 = dpr， 一般以Iphon6的dpr为准 dpr = 2

   2) PPI: 一英寸显示屏上的像素点个数

   3) DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

9. 小程序的适配方案

   Iphon6： 1rpx = 1物理像素 = 0.5px

   微信官方提供的换算方式：1）以iPhone6的物理像素个数为标准: 750;2）1rpx = 目标设备宽度 / 750 * px;3）注意此时底层已经做了viewport适配的处理，即实现了理想视 口

重要点描述：