天天看点

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

cordova的前身叫phonegap,自被adobe收购后交由apache管理,并将其核心功能开源改名为cordova。它能让你使用html5轻松调用本地api接口和发布应用到商店的应用开发平台。有低成本,低开发周期,轻量化等优点。它统一封装了andriod,ios,windowsphone,symbian等几大移动开发平台的api,采用html5+javascript的混合开发的模式来开发智能移动的app,解决系统兼容等问题。使用cordova/phonegap,应用程序的构建可以无需本地代码,直接使用的是web技术即可。由于这些api在多个设备平台上是一致的,都是基于html5 web标准创

引言

简单介绍一下cordova的来历,cordova的前身叫phonegap,自被adobe收购后交由apache管理,并将其核心功能开源改名为cordova。它能让你使用html5轻松调用本地api接口和发布应用到商店的应用开发平台。有低成本,低开发周期,轻量化等优点。它统一封装了andriod,ios,windowsphone,symbian等几大移动开发平台的api,采用html5+javascript的混合开发的模式来开发智能移动的app,解决系统兼容等问题。使用cordova把app从一个平台移植到另外一个平台只需要把html代码跟js打包一下就可以了,减少了大量的开发成本与开发时间,因此受到广大企业与开发人员的青睐。现在不少的大型网站(例如京东,淘宝等)手机app都是使用此种混搭模式进行开发。

详细说明可看cordova的官方网站 http://cordova.apache.org/

目录

一、软件下载

二、jdk安装部署

三、android sdk 安装部署

四、cordova/phonegap 安装部署

五、建立cordova 测试项目

一、软件包下载

运行环境:windows 7

jdk 7 下载:http://www.oracle.com/technetwork/java/javase/downloads/index.html

android sdk 下载:http://android-sdk.en.softonic.com/

adt-23.0.6下载:http://tools.android-studio.org/

node-v4.1下载:https://nodejs.org/dist/latest/node-v4.1.0-x64.msi

ant-1.9.6下载:http://apache.fayea.com//ant/binaries/apache-ant-1.9.6-bin.zip

回到目录

jdk (java development kit) 是 sun 针对java开发员的产品,是现今使用最广泛的java sdk。jdk 是整个java的核心,包括了java运行环境和基础类库等。常用版本包括 jdk 6、jdk 7、jdk 8。

成功安装 jdk 7 后,必须设置环境变量,让系统感知并能调用 jdk 7。

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

打开 “控制面板 --> 系统安全 --> 系统 --> 高级系统设置 --> 环境变量”,增加以下配置 :

变量

说明

java_home

c:\ jdk7.win32.x86_64_1.7.0.u45

写入jdk安装的路径

path

;%java_home%\bin

在path原有值上加入此值

classpath

;%java_home%\lib\dt.jar;%java_home%\lib\tools.jar

在classpath的原有值上加入此值

 回到目录

如果通过eclipse来开发andorid应用程序,配置好了jdk变量环境之后可以安装eclipse,然后下载android sdk(software development kit)并在eclipse中安装adt插件,这个插件能让eclipse和android sdk关联起来。

3.1 adt安装

adt 全名 android development tools, 使用eclipse开发android,在eclipse编译ide环境中安装adt,可以为android开发提供开发工具的升级或者变更,方便android sdk等版本的管理。当然,如果使用android studio等开发工具,adt可无需安装。

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

由于中国的特殊情况,防护墙把google官网给封了,所以在eclipse marketplace中直接下载adt,将出现类似 “unable to connect to repository http://dl-ssl.google.com/android/eclipse/content.xml ” 等错误。此时除了使用代理外,修改hosts等方法外,还可使用以下方法进行安装。

首先在 http://tools.android-studio.org/ 下载adt-23.0.6.zip包,打开菜单help-installforsite

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

直接选择已下载的adt-23.0.6.zip包

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

安装完成后,你可以看到新建项目时出现android选项

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

3.2 部署环境变量

把下载的android sdk解压后,新建系统变量,操作类似于jdk1.7系统变量设置。选择“系统变量”中变量名为“path”的环境变量,变量后追加 “;d:\myeclipse professional 2014\android-sdk-windows\tools;d:\myeclipse professional 2014\android-sdk-windows\tools\platform-tools;”

3.3 安装android sdk

官网上下载android sdk后,直接打开sdk manager

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

由于中国的特殊情况,防护墙把google官网给封了,所以下载前须打开菜单tools-options设置代理,否则会出现 “fetching https://dl-ssl.google.com/android/repository/addons_list-2.xml” 等错误

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

http proxy server设置为:android-mirror.bugly.qq.com 

http proxy port设置为:8080

也可参考网站 http://tools.android-studio.org/

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

选择所需要的android版本进行下载,如果下载版本多所占用的空间可能比较大,用的时间也比较长。个人下载了android 5.1、android 4.4、android4.1.2等几个版本,需要大约20g左右。

3.4 绑定android sdk

打开菜单 windows-preferences ,选择android项目,把sdk location绑定到 android sdk 所在的文件夹,可看到刚刚所下载的各个android sdk 版本

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

在官网下载最新版 node-v4.1,完成安装后,在环境变量中把path增加配置 “ ;c:\program files\nodejs\;”

为了方便管理,建议为eclipse加入ant插件。在ant 官网下载 ant-1.9.6,完成安装后在环境变量中把path增加配置 “;d:\myeclipse professional 2014\apache-ant-1.9.6\bin” 。

此时,在命令提示符窗口执行以下命令 npm install -g cordova

等待三五分钟,完成cordova安装后,系统就会出现以下提示:

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

注意:cordova 对 android sdk 的版本是有要求的,如果需要控制所安装的版本,可使用命令

npm install -g cordova@****  (版本号)

5.1 建立android工程基础文件

输入命令 “cordova create androidfiles com.sun.androidapp androidtest” ,建立工程文件。

其中androidfiles是文件夹名称,com.sun.androidapp是包名称,androidtest是工程名称

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

5.2创建工程实例

进入刚创建的文件androidfiles, 输入命令 cordova platform add android 建立工程实例

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

除此以外,还可以用以类似命令创建 ios、wp、blackberrry 等平台的实例

同时,也可使用以下命令控制所生成实例的 android sdk 运行环境

cordova platform add android@****  (版本号)

此时,再输入命令 cordova build ,当出现build successful等字样后,代表项目已成功生成

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

 此时可以用几种简单的方式对项目进行测试

浏览器测试

输入命令cordova serve android, 在浏览器中打开相关地址 http://localhost:8000

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

手机测试

连接手机,选择调试选项,输入命令cordova run android

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

 模拟器测试

输入命令cordova emulate android

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

5.4项目编辑配置

打开eclipse,导入刚创建的工程,工程中包含两个项目,一个是cordovalib,一个是mainactivity。mainactivity为测试项目,cordovalib 为cordova 的源代码项目。 首先选择项目属性,设置android所运行的基础平台。

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

注意:cordova 5.3.1 中 cordovalib 要求运行在 android sdk 5.1.1, api level 22或以上,否则某些api将报错,mainactivity 运行的平台版本则可以按需要而设。

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

另外,jdk 1.7要求android sdk 版本为api level 17或以上,若选择运行16或者以下运行环境,系统将会出现以下错误。此时可设置项目属性,把运行环境设计为jdk 1.6 以解决问题。

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

一般在eclipse使用android virtual device (avd) 虚拟器进行项目测试,在运行测试前,先配置运行环境。选择target->manager

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

按下create键,配置一台android虚拟器,用户可根据实际情况配置多台android虚拟机。

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

完成配置后,选择start,启动android虚拟器

Android移动APP开发笔记——最新版Cordova 5.3.1(PhoneGap)搭建开发环境

启动调试后,选择你所配置的虚拟机即可运行,在此cordova的环境部署已经大功告成了,你可以在eclipse中使用html5+javascript方式完成android开发了。