使用 Cordova(PhoneGap)构建Android程序

分享到:

移动终端开发随着智能手机的普及变得越来越热,什么项目都想移动一把,但反观要去学这些各个终端的控件使用,实属不易,又特别是每个终端的控件及所用语言都各不相同,使得这种学习变得更加困难.

有没有一种简单的方式能够快速构建移动终端程序并能在各个终端平台上快速打包并正常使用? 答案是肯定的,并且这种框架还不少,本文简单的介绍通过Cordova(原名为phonegap)这个平台构建一个android 程序.

  1. 开发环境准备.
    1. 安装JDK,此步骤忽略,各位有意的看官可自行去oracle网站上下载你适合的jdk版本.安装完后请添加系统环境变量”JAVA_HOME”,指向的路径为你刚安装的JDK目录.并将Path环境变量增加上 JAVA_HOME 路径,即在Path环境变量路径末尾增加上 ”;%JAVA_HOME%\bin”.
    2. 下载Adt-bundle-windows软件包,这个是google集成了android sdk的eclipse开发环境. 下载后直接解压即可使用.
    3. 安装node.js, 因Cordova最新版可直接使用node.js来安装,并且每次开发的时候都可以更新到最新的Cordova版本,故本处我们先安装Node.js.可通过官网直接下载.
    4. 安装cordova,在命令行工具中输入”npm install -g phonegap”,成功后再次输入 “npm install -g cordova”,
    5. 配置”ANDROID_HOME”环境变量,将其路径指向你的Android SDK路径,如我本机会设置为”D:\Stady\JAVA\Android\Adt-bundle-windows\sdk”.
    6. 另外,ADT(android 模拟器)会默认创建在 操作系统盘的用户目录下,若想改到其他位置,可以添加一个环境变量 “ANDROID_SDK_HOME”,指向你期望的位置即可.
  2. 在正式例子之前,我们先验证环境是否已经ok,可简单通过查看 java/npm 版本命令来在验证是否正常,如 java –version / npm –version.
  3. 在以上步骤都ok之后,我们就可以开始Cordova之旅了.
    1. 在命令窗口提供cd命令跳转到新项目存放的目录.如 cd D:\Stady\JAVA\Android\Project .
      image
    2. 通过命令 Cordova Create 创建一个新项目,最常用的命令可以使用 Cordova 路径 包名 项目名 ,如本处我们将创建一个用于人力资源的APP,将其简称为 HR, 创建项目的命令便可以使用为 cordova create HR com.xiezl.hr HR , 命令执行完后,我们的项目文件大概如下图所示.
      imageimage
    3. Cordova 是一个可以跨平台的移动终端解决方案,目录中platforms 就将存放各个平台所独有的文件资源,目前因为我们还没有添加任何平台进去,所以这个目录暂时是空的.本文主要介绍Android环境下的开发,其他平台(IOS,wp等)本人没有尝试过,但感觉应该类似.
    4. 进入到项目解决方案目录后,通过 cordova platform add android 命令添加 android 平台.稍等片刻直到见到如下图所示.image
    5. 此时,我们在进入到platform便可见到我们刚添加的android平台,如下图所示.
      image
    6. 当完成上面步骤后,我们的基础工作就已经完成了,接下来,我们用Adt-bundle-windows 中的eclipse 来打开我们刚刚创建的项目.通过eclipse中的import命令导入我们刚创建的项目.
      imageimageimage
    7. 导入后,我们的项目在eclipse的效果如上图所示,一共有两个项目,CordovaApp-CordovaLib为lib项目,HR为我们的工作项目.在这个项目中,assets 目录下目前只有一个提示文件,可以通过这个提示文件的辅助方法,将文件过滤器移除后,就可以展现出我们的项目文件.
      image
    8. 接下来我们可以尝试去看下 index.html 文件,这个便是我们的程序入口展示界面,我们可以简单的改造一下,假设如下所示.
      image
    9. 因为仅仅是测试项目,改造完后,我们通过模拟器来运行这个项目.大概像这个样子.可以清楚的看出我们的app展示的界面就是我们的index.html的内容.我们回到我们项目解决方案目录下,定位到platform\android\bin目录下,可以看到这里有一个HR.apk文件,相信大家已经猜出这个文件是什么了,不妨把这个文件拷贝到手机上去安装后运行下看看什么情况.
      imageimage
    10. 经过了以上步骤,我想各位应该能明白怎么使用cordova做android项目了.大家可以自己去尝试一下.
  4. 在上面我们简单的介绍了使用Cordova来快速搭建一个android开发项目,例子就先介绍到此,后面我们将通过一个实实在在的真实项目HR,来一起学习如何使用jquery mobile +html5+cordova开发真正的app程序.
    号外,我也是刚开始学习这个东东,所以文中难免会有写疏漏,欢迎各位指出以便共同学习.共同提高.
昵    称:
验证码:

相关文档:

  • 前端开发规范之html编码规范
    原则1.规范。保证您的代码规范,趋html5,远xhtml,保证结构表现行为相互分离。2.简洁。保证代码的最简化,避免多余的空格、空行,保...
  • 代码生成器+shiro安全框架+SpringMVC+mybatis+bootstrap+HTML5
    请认准本正版代码,售后技术有保障,代码有持续更新。(盗版可耻,违者必究)此为本公司团队开发 ------------------------------------------------...
  • web app与app的区别,即html5与app的区别
    公司准备要做一个项目,是p2p配资的app。在网上问了一些人后,发现有的是直接有html5做好后,用软件封装的。之前我学过app的开发,当...
  • HTML5+JS 《五子飞》游戏实现(四)夹一个和挑一对
    在第一章我们已经说了怎么才能“夹一个”以及怎样才能挑一对,但那毕竟只是书面上的,对码农来讲,我们还是用代码讲解起来...
  • Html5 Web Workers
    web worker 是运行在后台的 JavaScript,不会影响页面的性能。web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。...
  • 学习笔记:HTML5 Canvas绘制简单图形
    HTML5Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作。 <canvasid="mycanvas"height="700"width="1024"style="border:1pxsolid#aaa;text-align:center;"> 你...
  • 第一章 Hello World – A Cross-platform Game
    本章通过制作跨平台的Helloworld来学习: 跨平台游戏背后的理论 Cocos2d-JS安装 Cocos2d-JS项目文件一览 场景(Scene)、图层(Layers)、精灵...
  • 学习HTML5之路
    Web技术大致的时间轴 1991HTML 1994HTML2 1996CSS1+JavaScript 1997HTML4 1998CSS2 2000XHTML1 2002使用DIV+CSS进行网页布局 2005AJAX 2009HTML5 1.什么是HTML5? HTML5(...
  • 移动手机平台的HTML5前端优化指南
    对于访问量大的网站来说,前端的优化是必须的,即使是优化1KB的大小对其影响也很大,下面来看看来自ISUX的米随随讲讲移动手机平台...
  • Web前端开发规范文档你需要知道的事--HTML、css、js、文档等需要规范内容
    规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开...
  • python下的MySQLdb使用
    下载安装MySQLdb <1>linux版本 http://sourceforge.net/projects/mysql-python/下载,在安装是要先安装setuptools,然后在下载文件目录下,修改mysite.cf...
  • HTML5开发手机应用--viewport的作用--20150216
    在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢。在网上,大家会得到很多答案。我...
  • HTML5学习笔记
    HTML5学习笔记 1.HTML5-新特性 HTML5中的一些有趣的新特性: 用于绘画的canvas元素 用于媒介回放的video和audio元素 对本地离线存储的更好的...
  • html5-Notification未来的属性
    用作桌面提醒特别方便,特别是手机端。先睹为快吧^_^ 1<!DOCTYPEhtml> 2<htmllang="en"> 3 4<head> 5<metacharset="UTF-8"> 6<title>D...
  • HTML5 拖放(Drag 和 Drop)功能开发——基础实战
    随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功...
  • html5 canvas 移动小方块
    <!doctypehtml> <html> <head> <metacharset="utf-8"> <title>无标题文档</title> <style> body{ background:pink; } #c...
  • [原创]基于html5新标签canvas写的一个小画板
    最近刚学了canvas,写个小应用练习下 源代码 1<!DOCTYPE> 2<html> 3<head> 4<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 5...
  • AFNetworking 2.0 新特性讲解之AFHTTPSessionManager
    [置顶]AFNetworking2.0新特性讲解之AFHTTPSessionManager...
  • html5之多文件的上传
    <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>html5多文件的上传</title> <script> functionshowFileNa...
  • PhotoSwipe
    PhotoSwipe是一个专门针对移动设备的图像画廊,它的灵感来自iOS的图片浏览器和谷歌移动端图像。PhotoSwipe提供您的访客熟悉和直观的界面...