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

开发环境搭建:html

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_25html5

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

3)  Path,%JAVA_HOME%\bin;%JAVA_HOME%\jre\binandroid

4)  测试,javacweb

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

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

2)  Path,%ANT_HOME%\binnpm

  1. 配置Android SDK

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

相关文章
相关标签/搜索