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

时间: 2024-08-03 19:29:34

HTML5 移动应用开发环境搭建及原理分析的相关文章

HTML5移动开发之路(24)—— PhoneGap Android开发环境搭建

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(24)-- PhoneGap Android开发环境搭建 有关JDK及Android开发环境的搭建请看我前面的博文:http://blog.csdn.net/dawanganban/article/details/9748497 一.下载PhoneGap 下载地址:http://phonegap.com/install/  我下载的是最新的PhoneGap 2.9.1 将下载好的PhoneGap解压缩,可以

Cordova+ionic 开发hybird App --- 开发环境搭建

Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次手动输入太麻烦而且都是重复劳动,于是你下决心改变这种状况,然后学会了把javac命令写到一个bat文件中,以后编译只需要单击运行即可:然后随着你敲的代码越来越多,而且有了JAVA project概念,于是你手动新建了很多文件夹比如src.bin.lib,你有写了一个bat文件来减少你的重复劳动:再后

Sublime Text 3下C/C++开发环境搭建

Sublime Text 3下C/C++开发环境搭建 之前在Linux Mint 17一周使用体验中简单介绍过Sublime Text. 1.Sublime Text 3安装 Ubuntu.Linux Mint的软件管理器中已经能够找到Sublime Text 3,直接安装即可.或者去官网下载.deb或tarball安装包,手动安装. 2.Package Control管理器 ST最吸引我的第一点就是这个非常棒的扩展管理器!安装方法也很简单,在ST中按Ctrl+`进入ST的控制台,然后去官网上将

RTEMS开发环境搭建——基于FreeBSD系统

RTEMS开发环境搭建——基于FreeBSD系统 2015年12月08日  星期二 本文是记录安装RTEMS-4.10.2开发环境的文章,且仅仅是记录,并未对其过程做过多原理方面的研究. 1.本文采用的FreeBSD 9.3版系统,系统自带的gcc-4.2.1编译器,并将由它完成环境搭建中各个程序的编译工作: 2.本文采用RTEMS-4.10.2版源码: 3.下面介绍开发环境的安装过程: (1)安装bash FreeBSD默认采用的是/bin/csh和/bin/sh两种shell,但在我测试的过

Struts2开发环境搭建,及一个简单登录功能实例

首先是搭建Struts2环境. 第一步 下载Struts2去Struts官网 http://struts.apache.org/ 下载Struts2组件.截至目前,struts2最新版本为2.3.1.3,下载struts-2.3.16.3-all.zip,解压,放着. 第二步 新建Web Project并导入jar包在MyEclispe中新建Web Project,然后找到解压的Struts2包,在里面apps文件夹下找到struts2-blank.war,解压这个WAR文件,将里面WEB-IN

Android笔记1——开发前奏1开发环境搭建和开发工具使用介绍

转载请注明http://www.cnblogs.com/devtrees/p/4382234.html 欢迎指正错误,共同进步! 一背景知识 1.1G-4G的介绍 Generation(一代) WAP(wait and pay) Wireless Markup Language(WML)精简版的html语言 二.Android概述 1.Android操作系统介绍 2.Android历史介绍 3.Android系统架构(重点) 第一层:应用层Application 第二层:应用框架层Applica

Android安卓开发环境搭建应用游戏项目实战知识体系_极客学院

Java是Android开发的主要语言,所以掌握Java语言基础非常重要,本阶段讲解了Java的基本语法,要深入掌握Java语言,可以通过Java学习路径图学习. 17课程 10小时 19分钟 1.Java编程基础知识入门:变量与数据类型 本课学习变量的命名.定义和初始化及整数.浮点.字符数据类型. 25课时,141分钟 626人学习 2.Java语言Switch语句详解 本课学习switch语句,switch语句是分支语句的一组,适用于判断同一变量的多种状态,进行流程控制. 5课时,17分钟

SpringMVC+Spring3+hibernate4 开发环境搭建以及一个开发实例教程

刚刚接触了SpringMVC这个框架,因此有必要把它拿过来同hibernate.Spring框架进行集成和开发一个实例,在真正企业从头开发的项目中往往一个稳定的开发环境至关重要,开发一个项目选择什么样的搭建平台也需要有经验才可以,并不是说你会搭建一个开发平台然后公司就会用你搭建的开发平台,一个项目或者一个公司看中的也不是你可以搭出框架,而是在这个框架使用过程中出现的各种问题你可以解决掉. 也就是说呢,无论开发什么项目要做到稳定.环境稳定.开发成本稳定.技术稳定.换句话说就是"风险可控"

【Cocos2D-X 学习笔记】Cocos2D-x 3.0+VS开发环境搭建[使用Python]

上一节讲了如何用VS自带的项目管理器创建项目,该方法只适用于cocos2d-x 2.0版本,而cocos2d-x 3.0较之前版本在命名等方面有了较大更新,而cocos2d-x3.0不再支持用VS项目管理器自建项目,而是用Python脚本创建项目. 为什么做这种改变?经过上一节讨论可以发现,使用VS创建项目有一个缺陷:新建的项目必须在cocos2d-x的解决方案中,这样会导致自己的项目和Template项目混淆:如果想单独创建一个项目的话,又需要把cocos2d-x包中的cocos2d文件整个拷