cordovaWebBestPractices.ms

Quickly start an app using Yeoman, Ionic, AngularJS and PhoneGap

Cordova + Web Best Practices v2.0

Android安卓开发环境搭建

1、安装JDK

官网下载地址：jdk下载页
点击你下载下来的jdk-8u20-windows-i586.exe文件，会先后安装jdk与jre。
安装完JDK后配置环境变量

计算机→属性→高级系统设置→高级→环境变量

1 系统变量→新建 JAVA_HOME 变量，变量值填写jdk的安装目录（本人是 C:\Program Files\Java\jdk1.8.0_20)
2 系统变量→寻找 Path 变量→编辑，在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
3 系统变量→新建 CLASSPATH 变量，变量值填写 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar（注意最前面有一点）

系统变量配置完——检验是否配置成功 运行cmd 输入 java -version;
显示出版本号则安装成功。

2、安装apache-ant

下载http://ant.apache.org/bindownload.cgi　

解压到Ｅ盘

配置环境变量
系统变量：
ANT_HOME : E:\apache-ant-1.9.4-bin\apache-ant-1.9.4
CLASSPATH : ;%ANT_HOME%\lib;
Path : ;%ANT_HOME%\bin;
测试是否安装成功，在cmd命令方式下输入：ant -version，出现下面则安装成功：

3、安装Android SDK

SDK Manager.exe 安装SDK

  1. 下载android-sdk_r23.0.2-windows.zip页面
    打开下载页面，点击VIEW ALL DOWNLOADS AND SIZES，找到android-sdk_rxx.x.x-windows.zip
  2. 解压到E:\Android\

  3. 运行E:\Android\android-sdk-windows目录下的【SDK Manager.exe】
    然后等待更新…(该步骤必须联网，因为SDK安装包需要在线获取)。
    在更新的过程中若遇到如下的提示窗口：

    则代表更新失败，解决的方法为：
    到C:\WINDOWS\system32\drivers\etc目录下，用记事本打开hosts文件，在最后一行添加上74.125.237.1 dl-ssl.google.com，保存【hosts】文件并关闭。
    然后关闭Androic SDK Manager软件，再打开一次，即可更新成功。
    上述过程需要反复安装，在安装时我费了不时间，你也可以从网上找其它办法直接下载进行安装，可以参考android sdk无法更新的解决方法

    我安装的内容如下图：

    复制 E:\Android\android-sdk-windows下的 tools目录，粘贴到android-sdk-windows下面改名为 tools-copy ,此时在android-sdk-windows 目录下有两个目录 tools 和 tools-copy
    在tools-copy目录运行 android.bat ，这样就可以正常 update all 了
    之后，关闭 sdk,
    在 android-sdk-windows 目录运行 SDK Manager.exe， 就可以了

  4. 设置环境变量
    计算机右键－属性－高级系统设置－高级－环境变量－
    用户变量－PATH－E:\Android\android-sdk-windows\tools;E:\Android\android-sdk-windows\platform-tools。
  5. 验证SDK是否安装成功
    运行android -h命令

    运行cmd adb命令，出现下图则安装成功：

AVD Manager.exe 安装模拟器

创建Android模拟器，进入 android-sdk 目录E:\Android\android-sdk-windows，
双击运行 AVD Manager.exe - ‘android virtual devices’ - create 填写内容，

如果target或device下拉列表没有内容的话，说明SDK包没有安装完整有缺少，再安装SDK包，重新再来。
如果都有的话，填写完整后，点击OK，就创建了一个AVD Name

选中AVD_Name，点击 start，出现

yeoman安装

npm install yo -g

详细参考Yeoman安装文章
或分解单个安装，仅留参考npm install -g grunt-cli yo bower generator-angular

cordova安装

npm install -g cordova

在指定的一个文件夹下运行以下命令（我是在Ｅ盘下）

cordova create myBlogProject com.example.myBlogProject "myBlog"

这样就会在Ｅ盘下建立一个名为myBlogProject的文件夹，引号里的myBlog为你的App名称，也就是要显示在在你手机上名称。

cd myBlogProject cordova platforms add android
cordova run android

mkdir yeoman

cd yeoman yo webapp
cd ../hooks/ mkdir before_prepare
在文件夹before_prepare下建立一个名为yeoman_build_copy_script.sh的文件
文件的内容为：

#!/bin/bash

echo "Building Grunt Project.";
cd ./yeoman/;
grunt build;

cd ../;

echo "Deleting files in ./www";
rm -rf ./www/*;

echo "Copying files from ./yeoman/dist to ./www";
cp -r ./yeoman/dist/* ./www/;

./hooks/before_prepare/yeoman_build_copy_script.sh
用git-bash执行上面这个文件，liunx命令，cmd不行的。

cordova run android

wamp上安装cordova

安装jdk
安装wamp
安装nodejs
cordova create hello com.example.hello HelloWorld
安装cordova
C:\>npm install -g cordova //安装
在www目录下建立hello文件夹
$ cordova create hello com.example.hello HelloWorld //创建APP
进入hello
$ cd hello //进入APP
platform 创建android
cordova platform add android  //添加android平台

cordova命令：

cordova platforms ls //查看当前的平台
cordova platform rm android //删除平台
cordova build //生成apk,apk目录在C:\hellocordova\platforms\android\ant-build
cordova emulate android //在SDK模拟器上运行
cordova run android //直接上手机上进行安装运行。（手机连接到电脑上，设置手机上的开发者模式）
cordova plugin add org.apache.cordova.device //添加插件
cordova plugin ls //查看插件
cordova plugin rm org.apache.cordova.console //删除插件
cordova plugin add org.apache.cordova.console org.apache.cordova.device //添加多个插件
cordova help //帮助命令
cordova info//app信息
cordova platform update android //更新android

cordova build命令或cordova run android命令不成功，提示：
ADB server didn’t ACK 的解决方法
C:>netstat -ano 查看所有进程，查看进程对应的pid
C:>tasklist /fi “pid eq pid值” 或者进入任务管理器，干掉pid的进程
干掉这个进程就OK了。

扩展阅读：

https://github.com/yeoman/generator-mobile
http://www.portlandwebworks.com/blog/combining-yeoman-angularjs-and-cordova-mobile-development
https://gauntface.com/blog/2014/02/05/cordova-web-best-practices-v2-0
https://gauntface.com/blog/2013/07/18/cordova-web-best-practices/
http://damien.antipa.at/blog/2014/01/05/build-a-cordova-app-with-angularjs/

http://blog.csdn.net/offbye/article/details/38223769
http://ionicframework.com/getting-started/

Cordova + Yeoman
http://damien.antipa.at/blog/2014/01/05/build-a-cordova-app-with-angularjs/
http://tiantian-yuqing.iteye.com/blog/2104097
http://www.numediaweb.com/web-app-with-dream-team/
http://rockyj.in/2013/05/11/yeoman_and_backbone.html
https://gauntface.com/blog/2013/07/18/cordova-web-best-practices
https://gauntface.com/blog/2014/02/05/cordova-web-best-practices-v2-0
http://blog.mncc.fr/2014/02/10/quickly-start-app-with-yeoman-ionic-angular-and-phonegap/