Cordova webapp实战开发:(4)Android环境搭建

时间:2022-01-15 17:57:40

在《Cordova webapp实战开发:(3)后面可能会学到的东西》中我们说了一下后续大致包括的内容,今天我们继续。上周我在掌中广材集成了友盟的社交分享,今天想集成iOS应该很顺利的,但是只要一加入libSocialQQ.a就错。我对iOS也不太熟,没找到原因,头晕了,写一篇博客权当休息一下。今天我们就来搭建一下Android环境,并编写一个hello world吧。准备好了吗?Web app开发旅程即将正式开始了.......

JAVA环境

  1. 安装JAVA JDK
  2. 打开我的电脑--属性--高级--环境变量 
    • 新建系统变量JAVA_HOME,变量名:JAVA_HOME ,变量值:C:\Program Files\Java\jdk1.7.0
    • 新建系统变量CLASSPATH,变量名:CLASSPATH ,变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
    • 选择“系统变量”中变量名为“Path”的环境变量,双击该变量,在原来变量后追加 ;%JAVA_HOME%\bin
  3. 现在测试环境变量的配置成功与否。在DOS命令行窗口输入“JAVAC”,输出帮助信息即为配置正确。如图:
    Cordova webapp实战开发:(4)Android环境搭建

Android环境

1. 下载Andorid SDK以及Eclipse
  如果你想通过Eclipse来开发Andorid应用程序,在你配置好了JDK变量环境之后可以安装Eclipse之后下载Android SDK(Software Development Kit)并在Eclipse中安装ADT插件,这个插件能让Eclipse和Android SDK关联起来。为了更加方便,在Andorid SDK下载中会包括SDK以及一个可以直接使用的Eclipse。

写blog,我不能保证文章的内容在以后也能使用,包括下载地址和链接,但我既然写了,就要有责任保证现在的是能用的。以前下载地址是在Android SDK,大家可以根据自己的系统选择相应的系统版本下载。不过

今天我写这篇文章的时,不知是我网络原因还是其他的,总之不能访问,所以我在我的百度网盘放了一个之前下载的SDK压缩包,大家可前往下载:http://pan.baidu.com/s/1gdgur2j。下载完后,我把这个压缩包解压到E:\dev-tools\adt-bundle-windows-x86_64-20140321(你可以自己随便放在哪个盘符
Cordova webapp实战开发:(4)Android环境搭建

2. 环境变量的配置
在JAVA环境配置中,我们做了一步环境变量的配置,对于android的开发人员来说,我们首先要做的也是环境变量的配置。
打开我的电脑--属性--高级--环境变量

  • 新建系统变量ANDROID_HOME,变量名:ANDROID_HOME,变量值:E:\dev-tools\adt-bundle-windows-x86_64-20140321\sdk
  • 选择“系统变量”中变量名为“Path”的环境变量,双击该变量,在原来变量后追加 ;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
  • 现在测试环境变量的配置成功与否。在DOS命令行窗口输入“adb”,输出帮助信息即为配置正确。如图:
    Cordova webapp实战开发:(4)Android环境搭建

Cordova环境

Apache Cordova官网上有明确的建立步骤,具体说明在 The Command-Line Interface  中。

  1. 安装NodeJS
    Cordova webapp实战开发:(4)Android环境搭建
  2. 下载安装一个 git客户端
  3. Window下行执行命令行:

    npm install -g cordova
    

    Mac下执行命令行

    $ sudo npm install -g cordova
    

    我现在的电脑已经存在Cordova项目,但是安装环境却没有了。为了写这篇文字,我又重新安装cordova,在命令行下输入
    Cordova webapp实战开发:(4)Android环境搭建
    同样,仍旧非常慢,别急,耐心点,不要中断执行,出去跑5公里之后再回来看看是否安装成功了。本来这篇博文是昨天发布的,只是这一步一直未完成,今天一大早又再试了试,很快就完成了。
    安装成功的样子是这样的:

    Cordova webapp实战开发:(4)Android环境搭建
    如果你真的很着急,就要明白下载慢的原因了。下载慢是因为源的问题,如果等不及可以使用其它源。我看在PhoneGap App开发QQ群(348192525  Cordova webapp实战开发:(4)Android环境搭建 )中有人介绍了通过更改下载源可以解决,如果你知道的话,可以在本文回复一下,与大家分享一下。

敏捷个人,快乐、平衡、高效

下面我们来做一个Hello world示例

1. 新建一个项目,执行命令行 cordova create agileme cn.zhoujingen.agileme AgileMe , 如果安装有问题可以后面加上 –d启动查看执行详细信息。下载类库时间有点长,我大概等了10几分钟吧,你也耐心点,不要中断执行。我第一次就是因为不想等了,然后中断,导致后面步骤失败,不得已删除下载的类库目录文件再次执行此步骤

Cordova webapp实战开发:(4)Android环境搭建

error:please install android target: "android-22".

Cordova webapp实战开发:(4)Android环境搭建

老老实实打开Andorid SDK Manager下载最新Tools吧

Cordova webapp实战开发:(4)Android环境搭建

不过要用代理才能下,算了,我直接用我以前做的代码做了一个Demo源码打包,使用的是Cordova3.几的版本。Andorid示例下载地址:webapptest.zip

如果你要下载,那就按这个设置,目前是可行,以后这个代理是否可用就不知道了。

Cordova webapp实战开发:(4)Android环境搭建

至于如何使用Eclipse导入项目我就不说了,不知道的就网上找找,或者在群里问问大家吧

Cordova webapp实战开发:(4)Android环境搭建

你可以在虚机上运行,

Cordova webapp实战开发:(4)Android环境搭建

Cordova webapp实战开发:(4)Android环境搭建

不过Andorid虚机很慢,我一般连接真机测试机

Cordova webapp实战开发:(4)Android环境搭建

直接按运行,选择Andorid Application后,就会显示出主界面了

Cordova webapp实战开发:(4)Android环境搭建

如果你看到这个界面了,恭喜你,你的成功迈进了一步。

如果看文字有点累,那就看看咱们群里人录制的视频吧。

预习作业

第一次写一步一步的,感觉自己是不是写的太简单了

  1. 下载Cordova自带的notication插件,跑一跑
  2. 自己做一个获得App大小版本号的插件

PhoneGap App开发 477842664 Cordova webapp实战开发:(4)Android环境搭建