小程序的认识

认识小程序
1.什么是小程序？
微信小程序（mini program）,2017年百度百科十大热词之一（张小龙对其定义是无需安装，用完即走。但实际是需要安装的，只是他的体积小，下载速度很快，用户感觉不到下载的过程）
2017年1月9日0点，第一批小程序低调上线
小程序刚发布的时候要求压缩体积不大于1m否则无法通过，2017年4月提到2M
2.小程序可以干什么？
同App进行互补，提供App类似的功能，比App简洁的轻应用 主要是为了引流
通过扫一扫或者微信搜索就可以下载
用户使用频率不高，有时又不得不使用
连接线上线下
开发门槛低，成本低
开发小程序
1小程序没有Dom对象，一切基于组件化开发
理解：什么是模块？什么是组件？
模块化针对js。一个模块对应一个具有特定功能的js文件，js文件之间不会互相干扰
组件化针对html,css,js。组件是具有特定功能效果的代码集合
2小程序的四个重要文件：
a: *.js
b: *.wxml ----view结构 ----html
c: *.wxss ----view样式 ----css
D: *.json ----view数据 ----json文件
3.储备知识：
a. 理解事件机制
b. 理解组件化
c. 理解数据绑定 //vue里面有接触
d. Flex布局
e. 移动端适配方案
4.提示：学习vue后开发小程序会很容易
Flex布局简介
1.什么是Flex布局?
1）Flex是flexible box的缩写,意为“弹性布局”（又叫伸缩布局），用来为盒模型提供最大的灵活性
2）任何一个容器都可以指定为Flex布局
3）display:flex
2.flex属性
1.flex-direction
row :默认值，主轴为水平方向，起点在左边
row-reverse :主轴为水平方向，起点在右边
column: 主轴为垂直方向，起点在上沿
column-reverse :主轴为垂直方向，起点在下沿
2.学习地址：http://www.runoob.com/w3cnote/flex-grammar.html

移动端适配
相关理论知识：
1物理像素（设备像素）
1屏幕分辨率（一个屏幕由多少个像素点组成的） 分辨率高不代表越清晰，分辨率还和尺寸有关
图像分辨率（图片含有的像素数）同一尺寸的图片，分辨率越高越清晰
2设备能控制显示的最小单元，可以把物理像素看成是对应的像素点
2dpr比 DPI PPI
dpr:设备像素比，物理像素/设备独立像素 （开发中一般参照 iphone6的dpr 为2 （使用2*2（4）个设备像素显示个1css像素））
在css中，可以使用媒体查询min-device-pixel-radio区分dpr
如：@media (-webkit-min-device-pixel-radio:2),(min-device-pixel-radio:2){}
PPI：一英寸显示屏上的像素点个数 PPI越高，越清晰
DPI：最常用在描述打印机，表示打印机每英寸可打印的点数。打印机DPI越高，打印图像越精细，同时也会消耗更多密度和事件。
3设备独立像素（简称DIP 或者DP）：与设备无关的逻辑像素，代表可以通过程序控制的虚拟像素，是一个总体概念，(包括了css像素)
4移动端开发：在IOS， Adroid ，reactNative中没有明确其实都是使用的设备独立像素
ios的尺寸单位：pt,android的尺寸单位为dp，React Native 中没有指定明确的单位，他们其实都是设备独立像素
在使用Reac Native开发app时，ui给我们的原型图一般时基于iphone的像素给定的。
为了适配所有机型，我们在写样式时需要把物理像素转换为设备独立像素 例如，给的那个一个元素宽高为200px(这里的px指的是物理像素而非css像素)，iphone的设备像素比为2，我们给定的height应为100px/2 =100dp
当然，最好是和ui设计沟通好，所有ui用设备独立像素来出。
还可以在react Native中进行px,dp转换。。。
5web前端开发：在写css时，我们用的单位px.即css像素，当页面缩放比为100%时，一个css像素等于一个设备独立像素，但是css像素很容易被改变，当用户对浏览器进行了放大，css像素会被放大
这时一个css像素会跨越更多的物理像素
页面缩放系数 = css像素/设备独立像素
6视口:
布局视口 视觉视口 理想视口
布局视口：（layout viewport）当我们以百分比指定一个元素大小时，它的大小由包含块计算而来；当这个元素时最顶级的元素时，他就是基于布局视口来计算的。
所以，布局视口是网页布局的基准窗口，在pc浏览器上，布局视口就相当于当前浏览器的窗口大小（不包括borders,margins,滚动条）；在移动端，布局视口被赋予一个默认值，
大部分为980px,这保证pc的网页可以在手机上呈现，但是非常小，用户可以手动对网页放大。
可通过document.documentElement.clientWidth/clientHeight来获取布局视口大小
视觉视口：(visual viewport) 用户通过屏幕看到的区域
视觉窗口默认等于当前浏览器的窗口大小（包含滚动条宽度）
当用户对浏览器进行缩放，不会改变布局视口的大小，所以页面布局是不会变的，但是缩放会改变视觉视口的大小
所以，布局视口会限制css布局而视觉视口会决定用户具体能看到什么
可以调用window.innerWidth/innerHeight来获取视口大小
理想视口：（ideal viewport）网页在移动端展示的理想大小
在浏览器调试移动端时页面上给定的像素大小几句诗理想视口的大小，他的单位就是设备独立像素
页面的缩放系数=理想视口宽度/视觉视口宽度更为准确
所以，当页面缩放比例为100%时，css像素 =设备独立像素，理想视口 =视觉视口
可通过screen.width来获取理想视口大小
7meta viewport
元素可以告诉浏览器如何解析页面
可以通过meta的viewport来帮助我们设置视口、缩放等，从而让移动端得到更好展示效果

• 
  移动端适配方案：
  1.百分比：所有需要动态调整的元素宽高采用百分比，字号固定像素
  描述： 大部分条件下可行，可以让元素乖乖待在自己的位置，无论屏幕大小如何
  但是文字就存在很大问题，由于文字是固定的，在屏幕dpr变化时，文字的css像素不变，就导致了文字在页面中的占位发生了变化。
  缺陷： 这样的结果就是，文字过多或屏幕dpr过小时会发生溢出；但如果按照小屏幕为基准，又会发生字体太小这种情况。
  应用：百分比在当前移动端适配排版时候，更多会作为section级别元素的兼容排版。这个也要和设计稿中的效果相关，如果设计稿只要求定宽，直接使用px就可以了。
  2.rem:通过计算或者js获取到设备像素/css像素的比例，确定根元素的字体像素，然后所有单位根据根元素字体像素进行rem设置，确定大小，而基础rem会攻入南京设备变化而变化
  描述： 和em有点类似，区别在于rem基于根元素的font-size来进行计算的一个相对值。em存在很多缺点，比如层层嵌套后，就忘了上一层的font-size到底多大。或者比如像现在的模块化开发，一个路由套在另一个路由里面，甚至找父元素都要去其他文件找
  rem为了解决em的问题。所有元素大小都用rem来作为单位，然后在页面根元素中确定化地赋值，这样所有rem单位都是一个明确地基准了。当屏幕适配时，只需要调整这个基准值，就可以保证每个元素的大小自动按照比例调整
  缺陷： 仅仅适用移动端，并且不能进行横屏适配，因为横屏后，页面宽度发生变化，但是基准值还保持着原本绑定到根节点上面的基准值。
  应用： 阿里的lib-flexible解决方案就是利用了这个方式，通过给html标签 绑定font-size以及data-dpr属性来进行整个页面的适配
  3.vm:根据当前设备的Visual Vieport宽度作为100vm,然后得出单位vm的宽度，所有元素按照vm为单位进行样式排布
  (使用这个意味着放弃了IE11以下的pc用户，但现在主要兼容移动端，并没太大副作用)
  描述： vm自身将整个视口横向分成了一百份，每一个单位就是1vm.这个单位最大的优势就是在移动端的时候，无论横屏竖屏，vm永远都是针对于横向的，比rem好在当屏幕大小发生变化（顺便兼容了以后可调节屏幕大小的移动设备）时，不会让页面崩掉
  对于移动设备来说，比如Iphone6+的375px的css像素宽度，1vm就等于3.75px,通过这个单位可以解决上面的依赖于脚本绑定根元素font-size的问题，
  4.meta viewport
  5.Media Query:通过断点来进行不同宽度区间的设备样式适配
  小程序适配（rpx）
  iphone6 : 1rpx= 1物理像素= 0.5px
  微信官方提供的换算方式：
  1.以iphone6的物理像素个数为标准 ：750 //水平方向上750像素点
  2.1rpx = 目标设备宽度 /750*px;
  3.注意此时底层已经用了viewport适配的处理，即实现了理想视口(meta标签 width=device-width让布局视口等于理想视口)
  扩展：视网膜屏幕
  是分辨率超过人眼识别极限的高分辨率屏幕，由苹果公司在2010年在Iphone4发布会上首次推出销售术语
  iphone dpr=2 人眼分辨的极限