HTML5 移动应用开发环境搭建及原理分析

开发环境搭建：

一、Android 开发平台搭建

1. 安装java jdk：\\10.194.151.132\Mewfile\tmp\ADT
2. 配置java jdk

1)  新建系统变量，JAVA_HOME，C:\Program Files\Java\jdk1.8.0_25

2)  新建系统变量，classpath，;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

3)  Path，%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

4)  测试，javac

1. 安装Apache Ant
2. 配置Apache Ant

1)  新建系统变量，ANT_HOME，C:\soft\apache-ant-1.9.4

2)  Path，%ANT_HOME%\bin

1. 配置Android SDK

将SDK中的tools和platform-tools的路径添加到PATH中

1. 创建虚拟机

二、安装Cordova

1. 安装Node.js
2. 安装cordova：使用Node.js 的npm命令，C:\>npm install -g cordova，确保npm的路径在PATH中存在，如C:\Users\username\AppData\Roaming\npm
3. 创建HTML5应用：

cordova create hello com.example.hello HelloWorld

1. 添加应用平台：

cd hello

cordova platform add android

1. 建立APP：

cordova build

1. 在虚拟机中测试创建的APP

cordova emulate android

 

三、安装HBuilder（非必要）

1. 安装HBuilder
2. 导入Cordova生成的HTML5应用文件
3. 修改代码，使用cordova emulate android在虚拟机中调试。

HTML5移动应用原理分析

HTML5移动应用开发框架诸如Cordova，Ionic，HBuilder等，在编译生成移动应用的时候主要做两件事：

1. 集成WebView组件和浏览器；
2. 打包包含web应用程序文件的一系列资源。

即基于平台上自带的Web引擎，html5移动应用通过系统API，调用系统浏览器的加速引擎来加载页面：iOS可以调用UIWebview利用加速引擎Nitro加速，这样可以在前端使用JavaScript做大型运算；Android4.4之后，内置的Webview也由Android WebKit换成了Chromium，性能大幅提升。

上述HTML5移动应用开发框架的主要不足在于功能和性能方面，这主要是因为HTML5应用的能力严重依赖于系统自带的Web引擎：iOS的UIWebview、Android的Webview等，此类组件的HTML5能力相比Safari for iOS、Chrome for Android都要差一截。另外在Android平台上，由于系统碎片化比较严重，不同Android版本的Webview的HTML5能力也有较大差异，导致相应的HTML5应用一致性难以保证。所幸已经出现一些第三方的Web引擎以提供比系统默认的Webview更好的功能和性能，而PhoneGap/Cordova也正在改进架构以便引入这些更好的第三方Web引擎。

总的来说，HTML5应用的能力很大程度上依赖于Web引擎的能力。因此，无论是移动操作系统开发商还是开发工具的开发商，都持续在Web引擎的方向投入了更多的努力。

Web引擎

Web引擎目前大致可分为三种方式：

1. 浏览器，比如Safari/Chrome/UC Browser等;
2. 系统自带的Webview组件，比如上面提到的iOS UIWebview和Android Webview
3. 专门的Web Engine，比如Intel的开源项目Crosswalk、Ludei的Webview+

浏览器方式很容易理解，一个HTML5应用就是一个Web页面，用户通过浏览器打开一个URL，然后进入浏览器的全屏模式/App模式进行操作，或者是通过点击一个事先创建好的快捷方式打开应用。这种方式的性能取决于浏览器本身对HTML5的支持情况，一般来说要优于Webview组件的方式，但是问题在于不同的浏览器有差异，而且通过浏览器运行HTML5较难做到类似原生应用的体验（应用切换/权限管理/系统资源访问/整合等）以及丰富的API支持。

Webview组件方式的一般用法是以Hybrid的方式发布HTML5应用，即上述提到的PhoneGap/Cordova方案所采用的方式。其问题已经在上面提到过，主要是Webview组件本身对HTML5的支持能力不足。

专门的Web引擎可以有较好的HTML5功能和性能支持，同时有较好一致性，类似原生应用的系统整合也可以做得较好。这种方式的缺点则在于开发者需要将Web引擎与应用程序一起打包，生成的应用大小会更大，因此有的Web引擎（如Crosswalk）也提供了一种“共享模式”，让多个应用可以共享一个Web引擎，仅当应用第一次启动并且发现系统还没有相应Web引擎时才提示用户下载安装。

目前的发展趋势是：通过PhoneGap/Cordova方式得到丰富的API支持，通过专门开发的Web引擎去提升HTML5的能力。