1. APP类型
1.1 Native APP
1.1.1 介绍
- Native APP又称原生APP，就是我们平时说的手机应用软件。
- 原生APP 是针对IOS、Android、Windows等不同的手机操作系统要采用不同的语言和框架进行开发出来的，通常是由“服务器数据+APP应用客户端”两部份构成。
1.1.2 实现技术
iOS: oc 或者 swift
Android: java1.1.3 优缺点
优点：
体验好，用户无法上网也可访问APP应用中以前下载的数据
性能稳定，可调用手机的硬件设备（语音、摄像头、短信、GPS、重力感应等）和本地资源（通讯录，相册等）
操作速度快，能够实现出色的动效，转场动画完美
缺点：
开发周期长，开发人员工资起点高。
用户要使用原生APP，必须通过安装到手机里面才行，而且APP软件体积大，占用较多手机内存容量
更新缓慢，根据不同平台，提交–审核–上线流程较复杂。
要获取最新功能，需要升级应用，所以会容易出现有些用户不升级，导致多个不同功能版本出现，维护成本大
跨平台差，每种平台都需要独立的开发语言。Java(安卓),Objective-C(iOS)等等1.2 Web APP
1.2.1 介绍
- Web APP本质上是为移动浏览器设计的网站，可以在各种智能手机浏览器上运行。
1.2.2 实现技术
HTML5+Javascript+CSS3
vue组件化+项目打包
....1.2.3 优缺点
优点：
一套代码到处运行，可以同时在 PC、Android、iPhone 浏览器上访问
开发者不需要发布到应用市场审核，用户不需要下载、安装和更新
开发周期短，维护成本低
用户不需用户手动更新，可以自动更新，直接使用最新版本
缺点：
转场表现略差，要求联网
用户体验没那么炫。图片和动画支持性不高
没法在App Store中下载、无法通过应用下载获得盈利机会
对手机功能应用缺乏，有限制（摄像头、GPS、蓝牙等）1.3 Hybrid APP
1.3.1 介绍
- Hybrid App就是混合APP，就是Native结合Web的混合开发，就是内部本质是Web网页，使用打包软件给它套一层原生APP的外壳。
1.3.2 实现技术：
React Native
phoneGap(cordova+android)
APICloud
WeX5
appMobi
appcan
....1.3.3 优缺点
优点：
集众家之长，既可以调用丰富的手机设备API，也能拥有Web APP的跨平台能力
可以在应用商店发布，实现收费下载
内部是网页结构，可以自主更新，做到开发一次，所有平台生效
降低开发成本和技术成本，降低维护和开发周期
缺点：
本质上就是一个Web APP使用了原生APP的壳，所以体验比不上原生APP
开发难度比Web APP高，有一定的学习成本，开发周期比Web APP长
APP发布有可能无法通过审核，需要多次调整，才能发布
依赖开发框架本身提供的手机设备API，少部分设备功能还是只能借住原生语言进行调用才可以
对团队技术栈要求相对高，既要懂web开发的，也要懂原生APP开发的2. 元信息（meta）
2.1 介绍
- html中的meta标签，也叫元信息标签。作用就是用来告诉浏览器，当前网页的附加信息。
- meta标签主要有2个属性比较重要。
- 例子：
<head>
<meta name="description" content="移动端开发" />
<meta name="keywords" content="移动端,APP,flask" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Refresh" content="5;url=http://www.luffycity.com" />
</head>2.2 视口（Viewport）
2.2.1 介绍
- 视口是一个相对比较复杂的概念，所以我们可以简单的理解为，viewport就是用户看手机页面时的可视区域，相当于桌面浏览器的窗口。
- 在桌面浏览器中，viewport 就是浏览器窗口的宽度高度。但在移动端设备上就有点太窄了。
关于视口的详细扩展知识可以参看：viewports剖析_viewports 教程_W3cplus
https://www.w3cplus.com/css/viewports.html
2.2.2 视口通过meta标签进行设置
<meta name="viewport" content="width=device-width, initial-scala=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />2.2.3 视口参数说明
| 属性名 | 属性值 |
|---|---|
| device-width | 设备的宽度 |
| initial-scale | 初始的缩放比例 |
| minimum-scale | 允许用户缩放到的最小比例 |
| maximum-scale | 允许用户缩放到的最大比例 |
| user-scalable | 用户是否可以手动缩放 |
2.3 像素（pixel）
- 在移动端上，所谓的像素分为两种。
- CSS像素：CSS像素就是我们在编写CSS代码时的像素。
- 设备像素：设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。
- em单位：一个em就是一个字体宽度，
- rem单位：1个相对于html标签的字体宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scala=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes" />
<title>Document</title>
<style>
@media screen and (max-width:599px) {
html{
font-size: 10px;
}
}
@media screen and (min-width:600px) {
html{
font-size: 20px;
}
}
body{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 50px;
background-color: red;
color: white;
}
.box1{
width: 20rem; /* em单位：一个em就是一个字体宽度，rem单位：1个相对于html标签的字体宽度 */
}
</style>
</head>
<body>
<div class="box">Hello</div>
<div class="box box1">中文中文中文中文中文中文中文中文中文中文</div>
</body>
</html>2.4 媒体查询（media query）
- 媒体查询是css3的一个新增语法属性，它根据页面的视口宽度来定义特殊的 CSS 规则，一般用于进行移动端适配。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
本文含有隐藏内容，请 开通VIP 后查看