HTML5 移动应用开发环境搭建及原理分析
开发环境搭建:
一、Android 开发平台搭建
- 安装java jdk:\\10.194.151.132\Mewfile\tmp\ADT
- 配置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
- 安装Apache Ant
- 配置Apache Ant
1) 新建系统变量,ANT_HOME,C:\soft\apache-ant-1.9.4
2) Path,%ANT_HOME%\bin
- 配置Android SDK
将SDK中的tools和platform-tools的路径添加到PATH中
- 创建虚拟机
二、安装Cordova
- 安装Node.js
- 安装cordova:使用Node.js 的npm命令,C:\>npm install -g cordova,确保npm的路径在PATH中存在,如C:\Users\username\AppData\Roaming\npm
- 创建HTML5应用:
cordova create hello com.example.hello HelloWorld
- 添加应用平台:
cd hello
cordova platform add android
- 建立APP:
cordova build
- 在虚拟机中测试创建的APP
cordova emulate android
三、安装HBuilder(非必要)
- 安装HBuilder
- 导入Cordova生成的HTML5应用文件
- 修改代码,使用cordova emulate android在虚拟机中调试。
HTML5移动应用原理分析
HTML5移动应用开发框架诸如Cordova,Ionic,HBuilder等,在编译生成移动应用的时候主要做两件事:
- 集成WebView组件和浏览器;
- 打包包含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引擎目前大致可分为三种方式:
- 浏览器,比如Safari/Chrome/UC Browser等;
- 系统自带的Webview组件,比如上面提到的iOS UIWebview和Android Webview
- 专门的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 移动应用开发环境搭建及原理分析的更多相关文章
- Android开发环境搭建相关文章列表(转载)
Android开发虽然有所了解,但是一直没有搭建开发环境去学习,Android的更新速度比较快了,Android1.0是2008年发布的,截止到目前为止Android已经更新Android5.0.1, ...
- 如何学习web开发环境搭建和脚手架
Web前端的学习路线 第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DO ...
- Cordova+ionic 开发hybird App --- 开发环境搭建
Cordova 开发hybird App 开发环境搭建 一.一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...
- Struts2开发环境搭建,及一个简单登录功能实例
首先是搭建Struts2环境. 第一步 下载Struts2去Struts官网 http://struts.apache.org/ 下载Struts2组件.截至目前,struts2最新版本为2.3.1. ...
- C++学习之开发环境搭建篇(一)
由于C++是一门非跨平台语言,其开发的程序编译生成的可执行文件,只能在相应的操作系统中被执行,离开此系统环境将无法执行. 主要原因是不同的操作系统,可执行文件的结构不同,最为常见的操作系统是有:MAC ...
- Sublime Text 3下C/C++开发环境搭建
Sublime Text 3下C/C++开发环境搭建 之前在Linux Mint 17一周使用体验中简单介绍过Sublime Text. 1.Sublime Text 3安装 Ubuntu.Linux ...
- Nordic nRF51/nRF52开发环境搭建
本文将详述Nordic nRF51系列(包括nRF51822/nRF51802/nRF51422等)和nRF52系列(包括nRF52832/nRF52810/nRF52840)开发环境搭建. 1. 强 ...
- SLAM+语音机器人DIY系列:(五)树莓派3开发环境搭建——1.安装系统ubuntu_mate_16.04
摘要 通过前面一系列的铺垫,相信大家对整个miiboo机器人的DIY有了一个清晰整体的认识.接下来就正式进入机器人大脑(嵌入式主板:树莓派3)的开发.本章将从树莓派3的开发环境搭建入手,为后续ros开 ...
- nginx+uwsgi+django开发环境搭建
Nginx+uWSGI+Djangoi开发环境搭建 Django简介,环境搭建 uWSGI简介,安装与配置 Nginx安装与配置 Nginx+uWSGI+Django原理解析 1.django简介,环 ...
随机推荐
- Android LayoutInflater.inflate使用上的问题解惑
最近在在使用LayoutInflater.inflate方法时遇到了一些问题,以前没有仔细看过此类的使用方法,故将其记录下来,方便日后查阅. 相信大家都知道LayoutInflater.inflate ...
- AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
http://quote.eastmoney.com/center/list.html#28003501_0_2 http://bbs.tianya.cn/post-53726-21098-1.sht ...
- PHP异常处理
一.异常处理——可以有效地控制多条出现错误或异常的代码 基本语法如下: try{ //可能出现异常的代码 } catch(Exception $e){ //对异常处理 //1.自己处理 //2.不作处 ...
- Python学习笔记——面向对象基础
1.类和实例 1.1类的定义 类的定义使用class关键字,其后紧跟类名(通常大写开头),紧接着是(object),object是该类继承的类名,没有就继承object类. 实例化时就是类名+(),有 ...
- 2014年度辛星html教程夏季版第三节
接下来我们继续学习HTML中的标签,希望大家能够再接再厉,同时辛星也会支持大家,我们一起努力,一起加油.我们本小节来认识另外几个标签. *************空格和换行************** ...
- POJ 2002 Squares 哈希
题目链接: http://poj.org/problem?id=2002 #include <stdio.h> #include <string.h> ; struct Has ...
- c++ 最短路两种算法
最短路是个老问题了,大神们留下很多文档但是很多都是针对算法使用一些固定大小的数组进行数据存储在实际应用中受到限制,这里自己练习一下,主要用了一些c++的stl,减少了固定长度数组的依赖,换一种写法试图 ...
- BZOJ1861[ZJOI2006]Book书架
Description 小T有一个很大的书柜.这个书柜的构造有些独特,即书柜里的书是从上至下堆放成一列.她用1到n的正整数给每本书都编了号. 小T在看书的时候,每次取出一本书,看完后放回书柜然后再拿下 ...
- 分页加查询的sql语句
"SELECT TOP(@pagesize) * FROM T_News WHERE(NewsTitle LIKE @newskey OR NewsContent LIKE @newskey ...
- UIVIewController自定义切换效果-b
之前介绍动画时提过UIView的转场动画,但是开发中我们碰到更多的viewController的切换,ios中常见的viewcontroller切换有四种:模态视图,导航栏控制器,UITabBar ...