最新版Cordova 5.3.1(PhoneGap)搭建开发环境(android,html,phonegap,移动开发)

时间:2024-04-30 02:08:15 作者 : 石家庄SEO 分类 : 移动开发
  • TAG :

引言

简单介绍一下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

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

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

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

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

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

回到目录


二、JDK安装部署

JDK (Java Development Kit) 是 Sun 针对Java开发员的产品,是现今使用最广泛的Java SDK。JDK 是整个Java的核心,包括了Java运行环境和基础类库等。常用版本包括 JDK 6、JDK 7、JDK 8。

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

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

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

变量说明java_homeC:\ 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的原有值上加入此值

回到目录


三、Android SDK 安装部署

如果通过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等版本的管理。当然,如果使用AndroidStudio等开发工具,ADT可无需安装。

最新版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

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

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

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

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

最新版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

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

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

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

HTTP Proxy Server设置为:android-mirror.bugly.qq.com
HTTP Proxy Port设置为:8080
也可参考网站 http://tools.android-studio.org/

最新版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 版本

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

回到目录


四、Cordova/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安装后,系统就会出现以下提示:

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

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

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

回到目录


五、建立Cordova 测试项目

5.1 建立Android工程基础文件

输入命令 “cordova create AndroidFiles com.sun.androidapp AndroidTest” ,建立工程文件。
其中AndroidFiles是文件夹名称,com.sun.androidapp是包名称,AndroidTest是工程名称

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

5.2创建工程实例

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

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

除此以外,还可以用以类似命令创建 iOS、WP、BlackBerrry 等平台的实例

cordovaplatformaddioscordovaplatformaddwp7cordovaplatformaddwp8cordovaplatformaddblackberry10

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

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

此时,再输入命令 cordovabuild ,当出现BUILD SUCCESSFUL等字样后,代表项目已成功生成

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

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

  • 浏览器测试

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

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

  • 手机测试

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

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

  • 模拟器测试

输入命令cordova emulate android

最新版Cordova 5.3.1(PhoneGap)搭建开发环境


5.4项目编辑配置

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

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

注意:Cordova 5.3.1 中 CordovaLib 要求运行在 Android SDK 5.1.1, API Level 22或以上,否则某些API将报错,MainActivity 运行的平台版本则可以按需要而设。

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

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

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

一般在Eclipse使用Android Virtual Device (AVD) 虚拟器进行项目测试,在运行测试前,先配置运行环境。选择Target->Manager

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

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

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

完成配置后,选择Start,启动Android虚拟器

最新版Cordova 5.3.1(PhoneGap)搭建开发环境

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

回到目录

本章小结

使用Cordova/PhoneGap,应用程序的构建可以无需本地代码,直接使用的是Web技术即可。由于这些API在多个设备平台上是一致的,都是基于HTML5 Web标准创建,因此应用程序的移植很方便。Cordova支持iOS、Android、Blackberry、Windows Phone、Palm WebOS、Bada和Symbian等多个平台,只需要使用平台SDK打包成应用程序,可以从每种设备的应用程序商店下载安装。因此,Cordova将成为未来手机混合开发的新趋势。

参考文章

Cordova(PhoneGap)通过CordovaPlugin插件调用 Activity 实例

Apache2.2+Tomcat7.0整合配置详解

Windows Server 2008 R2 负载平衡入门篇

最新版Cordova 5.1.1(PhoneGap)搭建开发环境

作者:风尘浪子

http://www.cnblogs.com/leslies2/p/4819008.html

原创作品,转载时请注明作者及出处


 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:最新版Cordova 5.3.1(PhoneGap)搭建开发环境的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:Android 四大组件之Activity 基础总结(1)下一篇:

3 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18