一、什么移动端开发

一、什么移动端开发

5G目前是移动开发主流，未来5G、VR、AI，移动开发，前景更广泛。

移动端开发，也叫手机开发或者移动互联开发，以手机等移动端设备为基础的开发工作，因其采用无线上网的方式，业界也称为无线开发。

http://www.cnnic.net.cn/

网站：https://tongji.baidu.com/research/site#profile

浏览器分类：谷歌浏览器（80全球份额）70亿、火狐、微软IE/Edge(内核是谷歌浏览器)、国内的是伪浏览器。

二、移动端开发的大致分类

• 原生app:原生开发是用基于移动设备操作系统的程序语言进行的第三方的应用开发

• swift语言；java； 比如：ios, andriod windowphone（over了）、诺基亚（系统换安卓了）、鸿蒙（内核是安卓）

• 学习慢，门槛高，优点，基于底层系统，可以和底层系统，无缝对接，效率更高。

     native app 因为位于平台层上方 所以向下访问和兼容能力较好， 可以支持在线离线 消息推送或者本地资源访问，以及调用硬件资源的便利性 都有天生优势，但由于设备碎片化，app开发成本较高，维持版本升级比较麻烦 用户安装门槛较高  乐观的情况的是基于苹果的appstore 培养了一批良好的用户付费模式。 

• webApp ：（html5/css3/js 移动端页面 运行在手机浏览器上）基于网络与浏览器之上，通过网页开发技术来实现 特定功能的应用 vue —》 uniapp ； react==reactnactive。

• 在16 17左右，可以使用H5来写移动端程序，使用在手机上，替代部分或全部原生app的功能。java会点H5，C# H5,python H5,来抢移动端份额。andriod iso自己也学。

• 混合app： hybrid app 基于webApp和navtiveApp 之间 兼具了原生应用良好的用户体验和webApp跨平台特性。

     其实就是通过网页技术实现内容，然后借助原生app的UIWebView接口来访问像是包了一个壳，里面是webApp。通过网址访问比如早期街旁网以及掌上百度、安卓淘宝客户端。
  

  

三、了解移动端开发的一些基础常识

乔布斯：针对主要呈现区域，主要呈现区域宽度，统一设置为980。

移动端开发区别于pc端开发主要体现在屏幕尺寸以及分辨率上

1 屏幕尺寸 （可视区域的对角线的长度） 1 inch= 2.54cm = 25.4mm
2 屏幕尺寸：可视区域对角线的长度  3.5inch = 2.54cm*3.5 = 8.89cm
3 分辨率（1366*768）水平方向和垂直方向可以放多少个像素点



	2.1 物理分辨率：物理设备出厂的时候就决定的 不能人为进行改变  （基于硬件屏幕的物理分辨率）
	2.2 逻辑分辨率：web开发中的页面在不缩放的正常状态下的css像素 构成的分辨率 （可以理解成web开发的文档页面分辨率）
	2.3 像素密度 ： ppi （像素每英寸） 每英寸包含的像素点越高  则画面越细腻 越清晰
						如何求 320*320+480*480 然后进行开方 除以 3.5 = 163
						
	物理像素：实际的屏幕像素;
	CSS像素：程序员像素;在普通屏幕的时候，一个CSS像素=1个物理像素；
	高清屏幕的时候：
	    1CSS像素=N个物理像素
	Retina 屏幕(视网膜屏幕)
	Retina 是苹果公司 2010 年推出的一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。
	在普通屏幕的时候，1:1的比例，不可能把手机屏幕做的无限大，太大pad，再打PC。用户想在有限的屏幕（750*1334）IPHONE6(2014年9月9日)范围内呈现出来。思路就是把物理设备的像素点增加一倍。
							
设备像素比（密度）  window.devicePixelRatio

缩放比

早期的iPhone3GS的屏幕屏幕分辨率是320 * 480,iOS绘制图形（CGPoint/CGSize/CGRect）均已point为单位。
1point = 1 pixel

后来在iPhone4中，同样大小（3.5inch）的屏幕采用Retina(视网膜)屏幕显示技术，横、纵向方向像素密度都被放大到2倍，像素分辨率提高到（320 * 2） * （480 * 2） = 640 * 960,显像分辨率提高到iPhone3GS的4倍。iPhone6Plus中横、纵向方向像素密度都被放大到3倍，显像分辨率提高到iPhone3GS的9倍。

scale= 单位长度内的数量比(pixel/point)

二倍或者三倍图：

拿iphone3Gs 和iphone4去举例，在相同的屏幕尺寸下，css像素是一致的，但iphone4的物理像素是iphone3Gs的2倍，因此1个css像素是通过2个物理像素去显示的，这样图像就会放大，图像放大显示就会失真（位图格式jpg 1650万种颜色 bmp  png gif 256 颜色表示种类少），越清晰的屏幕上 图像越失真
解决方案：把图片设计成2倍图，或者3倍图，设计师需要将图片80*80设计成160或者240见方，图像缩小进行的计算远比图像放大损失小
图片：矢量图（数学公式计算得来的 放大不失真） 位图（由像素点来构成 放大失真）
一般设计师设计图标的时候 尽可能使用矢量图去做 一般做两倍图

视口 viewport

通常浏览 器会设置一个默认大小的viewport，为了能够正常显示那些专为PC设计的网页，一般这个值的大小会大于屏幕的尺寸

viewport详解：

理解，

meta:代表手机的可视

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.5, minimum-scale=0.5">

在默认的移动端浏览器的视口大小下，显示的内容会进行缩小，因此我们需要调整视口显示比例为1 （即正常显示不缩放 ）或者让视口宽度等于设备宽度，开发中一般同时设置width=device-width和initial-scale=1.0（为了解决一些兼容问题）

设计和开发完的网页一般是不允许用户进行随意缩放的，因此需要设置禁止用户缩放

适配方案：

移动开发的核心是屏幕适配

方案1 ： 固定宽度

1、设置<meta name=viewport content=width=device-width, initial-scale=1>
2、设置内容区域大小为320px
3、设置内容区域水平居中显示

![image-20210809115056566](C:\Users\teayear\Desktop\深圳\移动端\day01\assets\image-20210809115056566.png)

这种方案比较low 目前很少采用

方案2: 流式布局 jd移动端 百分比布局方案 问题不会参考父盒子的padding;没有父级元素，则参考元素为body元素； padding百分比，参考的是父级元素的width属性，无乱哪个元素，都是父级元素的width;

1、设置<meta name=viewport content=width=device-width, initial-scale=1>
2、设置页面宽度为百分比
.layout{
     min-width: 320px;
     max-width: 640px;
     /*移动设备的区间主要在320-640之间*/
     width: 100%;
     height: 100px;
     background-color: pink;
     margin: 0 auto;
}

这种布局方式 只能处理宽度适配 ，高度固定的场景，1/3比例问题等 无法完美解决

方案3: rem布局+flex-box弹性盒

1、设置<meta name=viewport content=width=device-width, initial-scale=1，user-scalable=no>
2、通过js设置html字体大小
		var oHtml = document.querySelector(html);
		var iW = document.documentElement.clientWidth;
		iW = iW>540 ? 540 :iW; 参照淘宝移动端适配思路
		oHtml.style.fontSize = iW/8 + px;
		var iH = document.documentElement.clientHeight;
		var oBody = document.getElementsByTagName(body)[0];
		oBody.style.height = iH + px;		

rem 移动端布局+flex-box（列表布局菜单）+ float浮动布局 目前企业级移动端适配最佳解决方案

less

less 是一个css预处理语言，它扩充了css语言，实现了变量，混合，函数等功能，使css开发变得更加高效，维护更加方便，于此类似的还有 scss,stylus

了解less的基本使用方式

​```js // 1 引入在线cdn cdn:网络内容分发节点 服务器 （百度 服务器集群（华北区域 北京 华南区域 广州） 阿里 腾讯） <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script> // 2 link标签一定在less.js之前引入, 并且设置rel 为 less <link rel="stylesheet/less" href="style.less"> <script src="less.min.js"></script>

```javascript
预处理器的作用
// 2 基于自动化工具 构建
// nodejs 
npm install -g less
// 编译 使用
$ lessc styles.less > styles.css
// 如果使用webpack  需要安装 less-loader来实现

// 3 使用koala软件进行编译 考拉
// 4 使用开发工具的内置插件实现编译 vscode 插件，easyless这个插件帮助我们实现less自动编译

了解less的常用语法

变量、混合、嵌套、运算、作用域、注释、导入

//返回图像尺寸(示例尺寸100*50)
image-size(file.jpg); // => 100px 50px 
image-width(file.jpg); // => 100px
image-height(file.jpg); // => 50px

// 单位转换
convert(9s, ms); // => 9000ms
convert(14cm, mm); // => 140mm

@list: A, B, C, D;
length(@list); // => 4
extract(@list, 3); // => C

ceil(2.1); // => 3 向上取整
floor(2.1); // => 2 向下取整
percentage(.3); // => 30% 转百分比
round(1.67, 1); // => 1.7 四舍五入，保留一位小数点
sqrt(25cm); // => 5cm 取平方根
abs(-5cm); // => 5cm 取绝对值

增加饱和度 
saturate(color, 20%) 
减少饱和度 
desaturate(color, 20%) 
增加亮度 
lighten(color, 20%) 
减少亮度 
darken(color, 20%) 
增加透明度 
fadein(color, 10%) 
降低透明度 
fadeout(color, 10%)

京东首页-base.css/reset.css

高亮显示 关于视口的其他单位vw vh

视口设置以及外部文件的引入

窗口的布局容器jd_layout宽度限制 最小320

顶部搜索容器定义

二倍图的问题（屏幕像素比）

img 通过宽高来压缩
背景图 通过background-size来压缩

搜索框的宽度自适应

轮播图区域布局

导航栏flex布局

四个公共的样式盒子

京东秒杀

京东首页

1. 准备工作：

less实现css的编写， flex-box+rem+流式布局 + 浮动 + 固定像素

视口的设置 根元素的字体大小 跟随屏幕宽度来实现响应—js

补充：meta苹果设备 工具栏菜单栏设置 以及iphoneX 前刘海问题

页面：(index.html, css文件夹，js文件夹，img文件夹)

启动本地服务器（node里面的一个小模块 live-server）

2. base.less

做一些样式重置 以及 公用样式 base.less （了解它的语法）

3.index.less

头部搜索区域 百分比布局 两侧不变 中间拉伸变化

轮播图区域

导航区域 （flex-box）

京东秒杀区域 （京东的自己的字体 我们找到它的一个css文件中font-face: JDZheng, src:京东的服务器）

东家小院： （渐变的文字）

每日逛 直接复用上面的代码结构

京东快报 （中间那里是个列表）

为你推荐 商品区域

底部tab栏：flex-box

返回顶部按钮

4 . index.js

通过对象的方式 对所有的功能进行管理

// 1 头部搜索区域的背景颜色的变化 功能
	rgba(228, 49, 48, + (top / lunbo_dis) + )

// 2 倒计时：3*60*60
  // 开启定时器  times--
	// 把总秒数转换为 小时 分钟  秒
	// 赋值的时间要补零

// 文字上下滚动
  定时器
	transtion + transitionend + transform=translateY(每次负一个li高度)
// 返回顶部： js
	两个事： 1: 返回顶部  2 显示隐藏返回顶部按钮
  1: 返回顶部
  touchend 定时器 top每次递减 赋值 scrollTop 缓慢向上移动
  2 显示隐藏返回顶部按钮
  	window.onscroll 监听它的scrollTop值 如果大于某个距离则显示否则隐藏
    
 // 轮播图：
    	// 1 自动轮播起来  定时器   无缝  css3
     transition + transitionend + transform=translateX(每次滑过一个图片宽度+ (-index*iW)+);
		transitionend 用来修改index （左边临界点 和右边临界点 都要修改index）
    // 2 小圆圈跟着变 在transitionend 添加 active
    
    // 3 手指实现滑动 三个事件 touchstart touchmove touchend
    判断滑动距离 大于1/3 判断方向（正值 index--）(负值index++)  如果小于1/3 吸附回去 
    滑动的时候停止定时器  滑动完之后开启定时器

animate.css css的插件 可以实现丰富的动画效果（购物点击删除 弹框效果）

点透问题：课堂的实例：出现点透

解决方法 
1.zepto的tap 它处理了点透  
2.最好将click事件替换 
3.使用fastclick.js插件 来提高click响应时间