首页 > 代码库 > HTML5 移动应用开发环境搭建及原理分析

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中的toolsplatform-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的能力。

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