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

开发环境搭建：

1、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. 建立虚拟机

 

2、安装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

 

3、安装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的能力。