ionic + cordova 开发App环境配置

1.jdk安装与配置

1.1 jdk下载地址：

jdk下载地址

jdk下载

下载完毕安装即可

1.2 环境变量配置

a-系统变量增加：JAVA_HOME

把jdk的安装路径复制即可

JAVA_HOME

b-系统变量增加：CLASSPATH

值为 ------

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

注意开头的一个点

CLASSPATH

c-在Path系统变量的后面增加

------ ;%JAVA_HOME%\bin;

image.png

d-命令javac正常运行即可

image.png

---

2.android环境变量配置

2.1 下载SDK Tools----

http://developer.android.com/sdk/index.html#Other

image.png

2.2 下载完毕，安装或者解压后，在相应目录下找到并打开SDK Manager.exe

image.png

SDK Manager默认勾选了一些选项，直接点击Install packages安装即可

image.png

image.png

如果安装过慢，可以用国内的镜像，或者分包下载

http://www.androiddevtools.cn/

image.png

找到相应的包下载即可：

http://mirrors.opencas.cn/android/repository/

image.png

2.3 Android环境变量配置

a-找到SDK Manager所在的目录

上面下载的包都在同一目录下

image.png

b-新建系统变量：Android

把platform-tools和tools这两个文件夹的路径添加到变量值里面，中间用分号隔开

image.png

c-在Path系统变量的后面增加------ ;%Android%

image.png

d-命令adb正常运行即可

image.png

---

3 安装ionic和cordova

a-通过npm全局安装

image.png

b-测试是否成功安装

image.png

c-如果npm安装过慢或不成功，可以试试国内淘宝的npm镜像

---

4.创建项目、打包、发布

4.1 创建项目：ionic start appName

image.png

创建过程会问是否创建ionic.io账号，n即可

image.png

4.2 进入创建好的项目目录下，增加android平台

成功增加后会在项目下增加一个platforms的文件夹

image.png

4.3 打包：在项目下用命令：ionic build android 打包

下载的过程会比较久

image.png

网络不好的时候会直接报错误

image.png

所以直接拷贝一份成功打过包的.gradle文件夹到本机用户名下就好：

image.png

成功打包后，会在platforms/android下增加一个build文件夹

打包好的apk在platforms/android/build/outputs/下，可以拷贝到手机上安装了

image.png

4-4 直接通过usb数据线在手机上安装

a-用数据线连上手机，输入adb devices命令，测试手机是否成功连接

image.png

b-运行ionic run android直接安装打过包的apk到手机上

image.png

c-真机演示效果

image.png

但是在chrome浏览器的虚拟手机中和IOS手机中，tabs是在下面的

image.png

解决方案如下：

在www/js/app.js中，对配置config的匿名函数增加一个参数，并在函数内增加一段代码即可

参考网址：http://bbs.phonegap100.com/thread-1495-1-1.html

image.png

重新打包安装后的真机效果：

image.png