移动端适配

1. 小程序没有DOM对象，一切基于组件化；
2. flex布局

移动端适配

1. 物理像素
    1. 设备像素，屏幕的分辨率，如1920×1080像素分辨率
    2. 设备能控制显示的最小单元，可以把物理像素看成是对应的像素点
2. 设备独立像素与CSS像素
    1. CSS像素：又称为虚拟像素，是指在样式代码中使用的逻辑像素(如width:120px)；
    2. 设备独立像素：又称为密度无关像素，与设备无关的逻辑像素，可以认为是计算机坐标系统中的一个点，
    代表可以通过程序控制使用的虚拟像素，然后由相关系统转换为物理像素，是一个总体概念，包括了CSS像素；
    3. PC端：在100%(屏幕未缩放)下，1个设备独立像素=1个设备像素，如果缩放到200%，1个设备独立像素=2个设备像素
    4. 移动端：标准屏幕(160ppi)下，1个设备独立像素=1个设备像素

dpr、DPI、PPI

1. dpr：设备像素比，物理像素/设备独立像素=dpr，一般以iPhone6的dpr为准(dpr=2，1个css像素相当于2个物理像素)
    1. JS获取DPR：window.devicePixelRatio
    2. 对于750*1334的设计图，如果是普通手机(dpr=1)，750px的宽就是100%宽，因为其物理分辨率和逻辑分辨率相同。
    3. 而在DPR=2的屏幕上，显示的却是200%，因为浏览器认为屏幕的分辨率是375*667
    4. 所以在制作移动端网页时，DPR=1时 initial-scale=1.0，DPR=2时 initial-scale=0.5；
    通过JS获取DPR，动态改变 initial-scale；所以使用二倍图才能在iPhone6上达到最佳效果。
2. PPI：1英寸(屏幕对角线长度)显示屏上的像素点个数，数值越高，说明屏幕能以更高密度显示图像
    1. 如屏幕分辨率X*Y的PPI=(X*X+Y*Y)的平方根/屏幕尺寸，屏幕尺寸是指屏幕对角线的长度；
    2. 120-160ppi之间的手机归为低密度手机，160-240ppi归为中密度，240-320ppi归为高密度，320+归为超高密度。
4. DPI：每英寸像素点，印刷行业术语，对于电脑屏幕而言，同PPI

视口

1. 布局视口：在html中，一般在meta中 name="viewport" 就是控制的布局视口；
    1. 布局视口的尺寸：document.documentElement.clientWidth，document.documentElement.clientHeight
2. 视觉视口：浏览器可视区域的大小，即用户看到的网页的区域，视觉视口的宽度继承自布局视口的宽度；
    1. 视觉视口的尺寸：window.innerWidth，window.innerHeight
3. 理想视口：布局视口虽然解决了移动端查看PC端网页的问题，但完全忽略了手机本身的尺寸，所以苹果引入了理想视口；
    1. 它对设备来说是最理想的布局视口，用户不需要对页面进行缩放就能完美的显示整个页面；
    2. 最简单的做法就是使布局视口宽度改成屏幕的宽度，可以通过 window.screen.width 获取屏幕宽度；
    <meta name="viewport" content="width=device-width">
    3. iPhone5：window.screen.width=320px
    4. iPhone6：window.screen.width=375px
4. 移动端适配不同屏幕的最简单方式就是设置视口，让布局视口等于理想视口
    <meta name="viewport" 
    content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    1. 在定义布局视口时，即布局视口等于理想视口(屏幕宽度)，屏幕没有滚动条，不存在高清屏下字体较小的问题。
    2. 但是在不同屏幕上，其视觉宽度是不同的，不能简单的将所有的尺寸都设置为px，可能会出现滚动条。
    3. 小尺寸的可以用px，如height，但大尺寸的只能用百分比和弹性布局。
5. viewport缩放
    <meta name="viewport" 
    content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    1. 这种设置在不同屏幕上，CSS像素对应的物理像素不一致，在dpr=1的屏幕下，1个css像素对应1个物理像素；
    2. 而在iPhone6的视网膜屏幕下，dpr=2，1css像素 = 2个物理像素，那么就可以通过缩放viewport解决；
    3. initial-scale 是将布局视口进行缩放，相对于理想视口，即 initial-scale=1 与 width=device-width 是一样的效果，
    initial-scale=0.5 等效于 width=2倍的device-width，所以设置 initial-scale 和 width 都可以改变布局视口的大小；
    4. 对于iPhone6(dpr=2)添加如下设置：
    <meta name="viewport" 
    content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
    5. initial-scale=0.5 将页面缩小2倍后等于iPhone6屏幕宽度，布局视口width: width / 2 = 375px; width = 750px;
    所以此时布局视口为750px，1px等于1物理像素。

移动端适配的方案

1. 使用理想视口：固定高度，宽度自适应；目前使用较多、相对简单的方案；
    <meta name="viewport" 
    content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    1. 垂直方向使用固定的值，水平方向使用弹性布局，元素采用定值、百分比、flex布局等；
    2. 相对简单，但还原度也非常低。
2. 固定布局视口宽度，使用viewport进行缩放；
3. 根据不同屏幕动态写入font-size，以 rem 作为宽度单位，固定布局视口为理想视口；
    <meta name="viewport" 
    content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    1. 对于640px和750px的设计稿，网易这样处理的：
    var width = document.documentElement.clientWidth;   //屏幕的布局视口宽度
    var rem = width / 7.5; --> 750px设计稿将布局视口分为7.5份
    var rem = width / 6.4; --> 640px设计稿将布局视口分为6.4份
    2. 这样不管是750px设计稿还是640px设计稿，1rem 等于设计稿上的100px
    rem = px * 0.01;
    3. 在750px的设计稿上
    在ipone6上：width = document.documentElement.clientWidth = 375px;
        rem = 375px / 7.5 = 50px;
        0.75rem = 37.5px;  --> (37.5/375=10%；占屏幕10%)
    在ipone5上：width = document.documentElement.clientWidth = 320px;
        rem = 320px / 7.5 = 42.667px;
        0.75rem = 32px;  --> (32/320=10%；占屏幕10%)
    4. 故而对于设计稿上任何一个尺寸换成rem后，在任何屏下对应的尺寸占屏幕宽度的百分比相同。
4. 以rem作为宽度单位，动态写入viewport和font-size进行缩放
5. 根据不同屏幕动态写入font-size和viewport，以rem作为宽度单位
    1. 将屏幕分为固定的块数10：
    var width = document.documentElement.clientWidth;
    var rem = width / 10; --> 将布局视口分为10份
    2. 这样在任何屏幕下，总长度都为10rem。1rem对应的值也不固定，与屏幕的布局视口宽度有关；
    3. 动态生成viewport，根据dpr设置缩放initial-scale、maximum-scale、minimum-scale
    var devicePixelRatio = window.devicePixelRatio;
    var isIPhone = window.navigator.appVersion.match(/iphone/gi);
    var dpr, scale;
    if (isIPhone) { ---> 淘宝只对iPhone做了缩放处理，对Android，所有的dpr都为1，没有缩放
        if (devicePixelRatio >=3) {
            dpr = 3;
        } else if (devicePixelRatio >=2) {
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        dpr = 1;
    }
    scale = 1 / dpr;  --> 得到缩放的值
    4. 淘宝团队在处理安卓端的缩放存在很多问题，所以dpr都做1处理，安卓端也就没有解决1px的问题；
    5. 在大屏手机中一行看到的段落文字应该比小屏手机的多，所以段落文本不能用 rem 作为单位，应该用px处理，
    对于不同的dpr下设置不同的字体：
    .selector { 
        color: red; 
        font-size: 14px; 
    }
    [data-dpr="2"] .selector {  --> data-dpr 是手淘方案的独有的选择器
        font-size: 28px; //14 * 2
    } 
    [data-dpr="3"] .selector { 
        font-size: 42px; // 14 * 3
    }
6. 手淘的Flexible框架实现H5页面的终端适配

微信小程序适配方案

1. iPhone6：dpr=物理像素/设备独立像素=2，1rpx(微信小程序的特有单位) = 1物理像素 = 0.5px(CSS像素)
2. 微信官方的换算方式：
    1. 以iPhone6的物理像素个数为标准：750
    2. 1rpx = 目标设备宽度 / 750*px
    3. 此时底层已经做了 viewport 适配的处理，即实现了理想视口，所以直接使用 rpx 单位已经可以适配了。
3. 视网膜(Retina)屏幕是分辨率超过人眼识别极限的高分辨率屏幕，由2010年iPhone4发布会上首次推出；
    1. iPhone6的dpr=2
    2. iPhone6Plus的dpr=3，但dpr=2的屏幕分辨率已经是人眼识别的极限了，所以dpr=3与dpr=2显示图像的清晰度是一样的，
    只是因为iPhone6Plus的硬件设备更好，图像的显示才会更清晰。

微信小程序开发

1. 刚发布时的压缩包体积最大不超过1M，2017年4月提升到2M
2. 授权用户的个人信息
    1. 在首页 index.js 的生命周期方法 onLoad() 中检查是否授权
    wx.getSetting({
        success: (data) => {
            if(data.authSetting['scope.userInfo']) { //已授权
                wx.getUserInfo({
                    success: (user) => {
                        this.setData({
                            userInfo: user.userInfo
                        })
                    }
                })
            }
        }
    })
    2. 如果尚未授权，在页面中应使用 <button> 弹出授权提示框
    <button wx:if="{{!userInfo}}" bindgetuserinfo="getInfoResult" open-type='getUserInfo'>
        获取用户的登录信息
    </button>
    3. 点击<button>，在回调函数 getInfoResult(res) 中查看授权状态
    getInfoRes(res) {
        if (res.detail.userInfo) {//用户允许获取个人信息
            this.setData({
                userInfo: res.detail.userInfo
            })
        }
    }
3. 模板：template
    1. 在根目录下或pages目录下，创建template目录，用于存放模板，包括模板的HTML和CSS
    2. 模板是页面的一部分，组件化开发，提高复用性；
    3. 新建模板 A.wxml和A.wxss，A.wxml的根节点是<template>，name 属性表示模板名；
    <template name="swiper">
        <view>
            <image src="{{imgUrl}}"></image>
        </view>
    </template>
    4. 在页面 list.wxml 中导入模板，并使用模板
        <import src="/template/A.wxml" />
        <view class='list'>
            <template is="swiper" data="{{imgUrl}}" />
        </view>
        1. is 属性指定使用的模板名
        2. data 属性向模板传递参数
    5. 在页面 list.wxss 中引入模板样式
    @import '/template/A.wxss';
4. 事件传参
    <button data-hi="WeChat" bindtap="onClick">点击</button>
    onClick(event) {
        let hi = event.currentTarget/target.dataset.hi
    }
    1. 把参数设置在自定义属性上
    2. 回调函数的第一个参数是当前DOM对象，通过DOM对象获取自定义属性上的参数
5. 页面之间传参
    1. GET形式传参
    wx.navigateTo({
        url: 'test?id=1'
    })
    2. 在下一个页面的 onLoad(options) 中获取参数
6. app.js中可以存放全局数据，其他页面中通过 getApp() 获取 App 实例
    App({
        data: { key: value } --> 全局数据
    })
    const app = getApp(); --> 获取App实例
    app.data.key = newVal; --> 修改全局数据
7. 网络请求：wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个