H5教程
- 一、H5 的含义
- 二、原生应用
- 2.1 概念
- 2.2 优点
- 2.3 缺点
- 三、Web 应用
- 3.1 概念
- 3.2 优点和缺点
- 3.3 PWA
- 四、混合应用
- 4.1 概念
- 4.2 API Bridge
- 4.3 优点
- 4.4 缺点
- 4.5 小程序
- 五. 手机App的技术栈
- 5.1 原生 App 技术栈
- 5.2 混合 App 技术栈
- 5.3 跨平台 App 技术栈
- 六. WebView 控件
- 七. 原生技术栈
- 7.1 Xcode
- 7.2 Android Studio
- 八. 混合技术栈
- 8.1 框架种类
- 8.2 Ionic 实例
- 九. 跨平台技术栈
- 9.1 React Native
- 9.2 Xamarin
- 9.3 Flutter
- 十. 总结
一、H5 的含义
H5 这个词，可以理解成就是混合 App 模型，只不过它特指混合 App 的前端部分。
二、原生应用
2.1 概念
- iphone诞生: 2007年6月
- android诞生: 2008年9月
- 原生 App 使用与手机操作系统相同的语言。
2.2 优点
（1）较好的性能和体验；
（2）可以使用系统的所有硬件和软件 API
2.3 缺点
- 成本:每个手机平台都要建立一个独立的开发团队
- 时间周期长: 底层操作系统的语言，都是很重的编译型语言, 开发和调试成本相对较高
- 需要长期支持已发布版本: 原生 App 必须下载安装才能使用，只要升级版本，就必须重新下载安装。
三、Web 应用
3.1 概念
Web App 是使用网页做的应用程序，必须在浏览器中使用。
3.2 优点和缺点
- 优点
1.1 不需要下载安装，打开浏览器就能使用，而且总是使用最新版本；
1.2 对于开发者来说，Web App 写起来比较快，调试容易，不需要应用商店的批准就能发布。- 缺点
2.1 浏览器提供的 API（即 Web API）很有限（目前只有相机、GPS、电池等少数几个），大部分系统硬件都不能通过网页访问，也无法直接读取硬盘文件，所以 Web App 无法充分利用平台的硬件。
2.2 网页通过浏览器渲染，性能不如原生 App，不适合做性能要求较高的页面。
2.3 不方便: 需要打开浏览器才能使用- 总结
谷歌曾经调查了原生 App 和 Web App 各一千个，发现 Web App 可以覆盖更多的用户（1100万 vs 400万），但是原生 App 的用户使用时间（188分钟）远超 Web App（9分钟）。
3.3 PWA
四、混合应用
4.1 概念
混合 App （hybrid App）顾名思义就是原生 App 与 Web App 的结合。它的壳是原生 App，但是里面放的是网页。
4.2 API Bridge
4.3 优点
- 跨平台
- 灵活性
- 开发方便
4.4 缺点
- 由于存在网页引擎的中间层，所以性能比较欠缺
- 由于页面跨平台，就无法使用只有特定平台提供的功能，导致体验不如纯的原生 App
4.5 小程序
所谓小程序，可以看作是针对特定容器的 H5 开发。
五. 手机App的技术栈
5.1 原生 App 技术栈
5.2 混合 App 技术栈
- 典型代表: PhoneGap、Cordova、Ionic
- 这个技术栈就主要学习容器提供的 API Bridge
5.3 跨平台 App 技术栈
- 纯粹的容器技术栈, 典型代表: React Native、Xamarin、Flutter
- 除了学习容器的 API Bridge，还要学习容器提供的 UI 层
六. WebView 控件
控件, 网页引擎, 解析网页
七. 原生技术栈
7.1 Xcode
它是一种集成开发环境（IDE），也是苹果公司指定的 iOS 官方开发工具，所有苹果手机的 App 都由它打包生成。
7.2 Android Studio
八. 混合技术栈
8.1 框架种类
- 历史最悠久是 PhoneGap，诞生于2009年。
- Adobe 公司将 PhoneGap 的核心代码，后来都捐给了 Apache 基金会，作为一个全新的开源项目，名为 Apache Cordova。
- 后来，其他人也开始基于 Cordova 封装自己的框架，所以市场上有许多基于 Cordova 的开源框架，比较著名的有 Ionic、Monaca、Framework7 等。
- 优点是开发简单、周期短、成本低，缺点是功能和性能都很有限。
8.2 Ionic 实例
九. 跨平台技术栈
跨平台技术栈的框架，都是使用自己的语法编写页面，不使用 Web 技术，编译的时候再将其转为原生控件，或者使用自己的底层控件，生成原生 App。这样就完全解决了 Web 页面性能不佳的问题。
9.1 React Native
- 原理
2013年， Facebook 公司发布了 React 框架。这个框架是为网页开发设计的，
核心思想是在网页之上，建立一个 UI 的抽象层，所有数据操作都在这个抽象层
完成（即在内存里面完成），然后再渲染成网页的 DOM 结构，这样就提升了性
能。
很快，工程师们就意识到了，UI 抽象层本质上是一种数据结构，与底层设备无
不仅可以渲染成网页，也可以渲染成手机的原生页面。这样的话，只要写一次
React 页面，就能分别编译成 iOS 和安卓的原生 App。这就是 React Native 项
目的由来。
- 实例
- React Native 的问题
- iOS 和安卓原生页面，做不到完全一致，尤其是复杂页面，样式或功能存在差异。
- Airbnb 公司在使用 React Native 两年后，宣布放弃，改用原生技术栈。
9.2 Xamarin
9.3 Flutter
Flutter
十. 总结
1）原生技术栈的技能和体验最好，对于复杂的大型 App，如果条件允许，应该
采用这种方式开发。
2）混合技术栈的成本低，灵活性好，对性能要求不高的简单 App，尤其是纯展
示性的页面，可以采用这种方式开发。
3）跨平台技术栈适用于，存在外部或内部条件的限制，只有一个团队开发跨平
台App 的情况。
