Android使用Cordova框架开发Android Hybrid App
来源:互联网 发布:fikker破解版linux 编辑:程序博客网 时间:2024/05/18 20:10
1.1. Hybrid App介绍
随着Html5的兴起以及手机硬件性能的提升,越来越多的移动应用采用Web技术进行开发,从而产生了一种新的应用叫Hybrid App(混合型移动应用)。所谓的混合模式移动应用,是指一种介于Native App(本地原生应用)与Web App (网页应用)之间的应用,该类应用的开发除了使用到本地平台开发技术(Android、iOS、 BlackBerry等)外,部分功能还使用了Web技术,通过内嵌浏览器显示网页的方式来实现,目前市面上好多移动应用都是混合型的,像QQ,微信,支付宝,淘宝等。1.2. Hybrid App特点
与本地原生应用相比,混合型应用有两个主要的优势:一个是跨平台,不用再针对不同的移动平台进行开发,大大降低了开发的成本;另外一个是升级维护变得容易和简单,只需更新网页即可,不需要用户重新下载安装包进行升级;不足的地方表现在速度和用户体验上,但随着移动硬件性能的提升,这个差距正在逐渐缩小。Web App(网页应用)Hybrid App(混合型应用)Native App(原生应用)开发成本低中高维护更新简单简单复杂体验差中优安装不需要需要需要跨平台优优差图1:Web App、Hybrid App、Native App 之间的对比
1.3. 基于Cordova进行Hybrid App开发
那么,如何快速地高效地开发这种混合型应用呢?目前有不少用于开发Hybrid App的移动开发框架,比如PhoneGap/Cordova、WeX5、APICloud、Appcelerator、ExMobi等。本文主要介绍如何使用PhoneGap/Cordova框架的进行Hybrid App的开发,下面先了解一下PhoneGap与Cordova。1.3.1. PhoneGap与Cordova
PhoneGap是一个使用Web技术(HTML,CSS和JavaScript)开发跨平台移动应用的免费且开源框架,目前很多主流的移动开发框架均源于PhoneGap,比如WeX5、appMobi、Worklight等。而要了解Cordova,得先了解一下PhoneGap的一些背景:PhoneGap框架的起源于加拿大一家叫Nitobi的软件公司,08年一次iOS开发者大会上,该公司的几个人提出一个想法:Bridging the gap between the web and the iPhone sdk,想做一个工具来弥补Web和iOS开发之间的不足,这是PhoneGap名字的来源。
2011年10月,Adobe收购了创立PhoneGap项目的Nitobi公司,随后把PhoneGap项目捐给了Apache基金会,但Adobe保留了PhoneGap的商标所有权。故项目到了Apache旗下,改了个名字叫Apache Callback,因为名字毫无新意,后来又作了一次改名,即现在的Apache Cordova。Cordova是Nitobi团队当时坐落的街道名称,用此名来纪念Nitobi团队的贡献。
到此,我们差不多了解PhoneGap与Cordova之间的关系了:Cordova是Adobe公司把PhoneGap捐给Apache后新起的名字,它作为一个开源项目,是从PhoneGap中抽取出来的核心,Cordova与PhoneGap的关系就类似于WebKit与Chrome或Safari的关系。
1.3.2.基于Cordova开发Hybrid App
了解完Cordova之后,下面可以搭建环境,实现我们的例子了。1.3.2.1. Cordova开发准备工作
1.3.2.1.1. 安装nodeJS
官网下载地址:https://nodejs.org/Cordova是利用nodeJS进行管理的,所以需要先下载nodeJS。下载安装完后,在cmd中输入npm -version,如果看到版本号则表示安装成功了,如下图所示: NPM的全称是Node Package Manager,是一个nodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。nodeJS提供了一些基本模块,但仅仅依靠这些基本模块可能还不能满足实际开发需求,因此会用到很多的nodeJS库和框架。但众多的库或框架管理起来又很麻烦,因此有了NPM,通过它可以很快的找到要使用的包,进行下载、安装以及管理已经安装的包。
1.3.2.1.2. 安装Cordova
在cmd中执行如下安装Cordova的命令开始安装:npm install -g cordova
之后,你可能需要等待很长一段时间。在国内使用NPM是很慢,可能是因为GFW的原因,我们可以使用淘宝的npm解决此问题,具体操作如下:
第一步:命令行下输入:
npm config set registry https://registry.npm.taobao.org
第二步:再执行以下命令:
npm info underscore
如果第一步配置正确,这个命令应该会有类似下面的输出:接下来再执行上面安装Cordova的命令就可以了,安装成功后,在cmd中输入cordova -v则会显示相应的版本号,如下图所示:
1.3.2.1.3. 安装Apache Ant
下载地址:http://apache.fayea.com/apache-mirror/ant/binaries/设置环境变量,新建:ANT_HOME=E:\ant\apache-ant-1.9.4
Path中添加:%ANT_HOME%\bin;
1.3.2.1.4. 安装Android SDK
下载安装Android SDK,新建ANDROID_HOME环境变量,设置为sdk安装的根目录,并把sdk下面的tools和platform-tools两个目录配置到环境变量path中。1.3.2.1.5. 创建CordovaSample项目
第一步:进入工作空间目录(例如:D:\workspace_cordova),cmd中执行以下命令创建一个叫CordovaSample的项目:cordova create CordovaSample cn.itcast.cordova CordovaSample
第一个参数CordovaSample,指定目录名称;
第二个参数cn.itcast.cordova为Java包名;
第三个参数CordovaSample 指定了应用程序的显示标题;
第二步:进入CordovaSample 目录:
cd CordovaSample
第三步:添加项目要支持的移动平台(此处表示添加支持Android平台)
cordova platform add android
第四步:把CordovaSample作为Android工程导入到eclipse中:
编译没报错,就可以运行了,执行结果如下图所示:图2 CordovaSample运行结果
以上操作可能会出现的问题:你的sdk的版本太低或不匹配,或者项目导入到eclipe后编译出错,这时你需要把你的Android SDK升级到一个比较高的版本,比如android 5.0。
1.3.2.1.6. 添加插件支持
如上图2我们看到的,Cordova默认提供的程序界面和功能非常简单。当然你可以根据你的需要,运行标准Web开发技术对页面进行设计。当你需要和不同的设备进行通讯交互时,你就需要借助于一些插件,以便能够访问Cordova提供的核心API。一般来说,你添加一个插件的目的是为了利用Cordova的API访问设备。详细的可用插件列表你可以在社区中看到:http://plugins.cordova.io你可以通过以下命令安装插件,例如:
cordova plugin add org.apache.cordova.camera // 摄像头
cordova plugin add org.apache.cordova.vibration // 震动
cordova plugin add org.apache.cordova.contacts // 联系人
你可以用以下命令查看所有已经安装的插件
cordova plugin ls
使用以下命令删除插件:
cordova plugin rm org.apache.cordova.console
1.3.2.2. 在网页中实现业务逻辑代码
修改项目中assets/www/index.html文件,在<header>中引入cordova开发库,并实现业务代码showDialog方法;当点击<body>中的超链接时,会调用showDialog()方法,在该方法中会调用cordova sdk弹出android原生对话框:<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function showDialog(){
navigator.notification.alert("你好Cordova!");
}
</script>
<title>Hello Cordova</title>
</head>
<body>
<h1>Hello Cordova</h1>
<a onClick="showDialog()" href="">显示对话框</a>
</body>
</html>
执行运行结果如下图所示:至此,我们使用Cordova开发Anroid Hybrid App的例子就实现完了。
本文版权归传智播客Android培训学院所有,欢迎转载,转载请注明作者出处。谢谢!
作者:传智播客Android培训学院
首发:http://www.itcast.cn/android/
0 0
- Android使用Cordova框架开发Android Hybrid App
- Android使用Cordova框架开发Android Hybrid App
- android cordova hybrid app总结
- Cordova hybrid app -- android -- plugins
- Android Hybrid开发 —— Cordova
- 【Android Hybrid App】Cordova 之扫码(二维码)功能
- Cordova html5开发android app
- Android App混合开发----Hybrid开发
- Android 混合开发 hybrid app -- 2
- android - Hybrid App
- 使用cordova开发app
- 移动端跨平台开发框架 Cordova 学习笔记(一) 环境搭建及创建第一个 Cordova Android APP
- cordova的Hybrid App开发环境搭建(Windows)
- 基于Cordova+Vue+IDEA开发Hybrid App(一)
- android 框架之Cordova 集成开发过程
- 【随笔】Android Hybrid App 体系结构
- 基于Android Webview的Hybrid App开发的前端优化
- Android hybrid App项目构建和部分基本开发问题
- iOS 循环引用
- 使用开单引号对SQL语句中的表字段名转义
- linux vps下mysql cpu占用过高解决办法
- 交叉编译nanopi QT+QWT界面的流程和问题
- [hadoop]hadoop eclipse plugin安装与配置(四)
- Android使用Cordova框架开发Android Hybrid App
- Best Time to Buy and Sell Stock III
- (二)Hyper如何对DataBlock中的数据进行索引
- 将pgm图片使用Sequence file存储到hdfs,并读取为Mat数组格式
- 后缀数组模板
- java编写网页爬虫(分页——插入数据库——导出数据)
- Sublime Text 3 常用插件以及安装方法
- 定制自己的报表!7款实用开源报表工具
- UIAutomator定位Android控件的方法实践和建议(Appium姊妹篇)