androidAndroid开发学习--Ionic+Cordova 环境搭建
我们看 Ionic 能给我们提供什么? 一个样式库,你可以使用它 来 装饰你的 HTML 网页 ,看起来 想 移动程序的 界面,什么 header 、content、footer、grid、list。这貌似没什么 实质性的东西, sencha touch ,jq 都能提供 。一个用 AngularJS 写的 工具库,姑且叫它 组件库吧。Ionic的 grid 设计的比较合理,比 bootstrap的 更强大。当然它 还包含 了angular-animate、angular-resource、angular-sanitize、angular-ui-router,适应移动平台的模块库。
Apache Cordova 提供用 javascript 访问 移动平台 的 API 。
其内部是用每个 平台下的 web view 组件,运行 程序,然后实现了 每个平台下的 一套 CordovaLib 供你写的程序调用,然后你就可以 调用 摄像头、磁盘等的api。
1. 安装node环境
nodeJs环境的安装很简单,去官网下载最新版的NodeJs直接安装即可。
Node官网: https://nodejs.org/
安装完成后配置环境变量,计算机->属性->高级系统设置->环境变量->用户变量->(选中PATH变量)->编辑->在变量值后加入node路径,与其他变量值用;隔开
配置完成后在cmd中输入 npm -v 回车。如果出现版本号说明安装成功。
(未成功自行百度配置node环境)
![](https://images2015.cnblogs.com/blog/1104283/201707/1104283-20170720102945833-1150750750.png)
2. 安装jdk并且配置环境变量
jdk下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
安装完成以后配置环境变量:
JAVA_HOME(安装路径有空格会无效)(系统变量):
JDK的安装路径,这个环境变量本身不存在,需要创建,其值为:jdk在你电脑上的安装路径。
PATH(系统变量):
PATH属性已存在,可直接编辑。作用是用于配置路径,简化命令的输入,其值为:%JAVA_HOME%\bin。
CLASSPATH(系统变量):
用于编译时JAVA类的路径,注意这里设置的是两个值,(.;)表示的是JVM先搜索当前目录。其值为:.;%JAVA_HOME%\lib\tools.jar。
配置完毕后,通过cmd运行以下命令:java -version, 如果出现返回信息,则设置成功。
3. 安装Android SDK.
下载地址1: http://developer.android.com/sdk/index.html 这个地址被墙了。需要FQ使用。
下载地址2:http://www.android-studio.org/ 这是Android studio中文社区地址
这里可以只下载Android SDK 不需要一并下载 Android Studio。下载完成并安装然后向用户变量Path中添加两个值。分别是 Android SDK中tools目录的路径和platform-tools的路径。例如:
C:\Program Files (x86)\Android\android-sdk\tools;
C:\Program Files (x86)\Android\android-sdk\platform-tools;
如果发现Android SDK安装目录中并没有 “ platform-tools”这个文件夹,应该运行tools目录下的android.bat文件,然后出现如下界面,勾选Android SDK Platform-tools 然后安装。
环境变量配置完成以后在cmd中输入 android并且回车。如果出现android sdk manager则说明安装成功。
C:\Users\lemon\lemon>android -h
Usage:
android [global options] action [action options]
Global options:
-s --silent : Silent mode, shows errors only.
-v --verbose : Verbose mode, shows errors, warnings and all messages.
--clear-cache: Clear the SDK Manager repository manifest cache.
-h --help : Help on a specific command.
Valid
actions
are
composed
of a verb
and an
optional
direct
object:
- sdk : Displays the SDK Manager window.
- avd : Displays the AVD Manager window.
- list : Lists existing targets or virtual devices.
- list avd : Lists existing Android Virtual Devices.
- list target : Lists existing targets.
- list device : Lists existing devices.
- list sdk : Lists remote SDK repository.
- create avd : Creates a new Android Virtual Device.
- move avd : Moves or renames an Android Virtual Device.
- delete avd : Deletes an Android Virtual Device.
- update avd : Updates an Android Virtual Device to match the folders
of a new SDK.
- create project : Creates a new Android project.
- update project : Updates an Android project (must already have an
AndroidManifest.xml).
- create test-project : Creates a new Android project for a test package.
- update test-project : Updates the Android project for a test package (must
already have an AndroidManifest.xml).
- create lib-project : Creates a new Android library project.
- update lib-project : Updates an Android library project (must already have
an AndroidManifest.xml).
- create uitest-project: Creates a new UI test project.
- update adb : Updates adb to support the USB devices declared in the
SDK add-ons.
- update sdk : Updates the SDK by suggesting new platforms to install
if available.
C:\Users\lemon\lemon>
4. 安装 Apache ant.
ant下载地址: http://ant.apache.org/bindownload.cgi
环境变量:
Windows下ANT用到的环境变量主要有2个: ANT_HOME 和 PATH。
eg:
1. 设置ANT_HOME指向ant的安装目录(系统变量)。
设置方法:ANT_HOME = D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6
2. 设置bin和lib目录到PATH变量中(用户变量)。将%ANT_HOME%\bin; %ANT_HOME%\lib添加到x变量的path中。
设置方法:PATH = %ANT_HOME%\bin; %ANT_HOME%\lib
安装如果不成功可以把%ANT_HOME%换成真实的路径。
如: D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\bin;D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\lib
安装完成以后在cmd中输入 ant -version 验证是否安装成功。
![](https://images2015.cnblogs.com/blog/1104283/201707/1104283-20170720103036208-889324834.png)
5.使用npm下载ionic
C:\Users\lemon>npm install -g ionic
C:\Users\lemon\AppData\Roaming\npm\ionic -> C:\Users\lemon\AppData\Roaming\npm\node_modules\ionic\bin\ionic
C:\Users\lemon\AppData\Roaming\npm
`-- ionic@3.5.0
6.用npm命令安装cordova
C:\Users\lemon>npm install -g cordova
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
C:\Users\lemon\AppData\Roaming\npm\cordova -> C:\Users\lemon\AppData\Roaming\npm\node_modules\cordova\bin\cordova
C:\Users\lemon\AppData\Roaming\npm
`-- cordova@7.0.1
7.创建项目
C:\Users\lemon>ionic start todo blank
[WARN] Git CLI not found on your PATH. You may wish to install it to version control your app.
See installation docs for git: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
Use --no-git to disable this warning.
√ Creating directory .\todo - done!
[INFO] Fetching app base (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)
√ Downloading - done!
[INFO] Fetching starter template blank (https://github.com/ionic-team/ionic2-starter-blank/archive/master.tar.gz)
√ Downloading - done!
√ Updating package.json with app details - done!
√ Creating configuration file ionic.config.json - done!
[INFO] Installing dependencies may take several minutes!
> npm install
√ Running command - done!
> npm install --save-dev --save-exact @ionic/cli-plugin-ionic-angular@latest
√ Running command - done!
♬ ♫ ♬ ♫ Your Ionic app is ready to go! ♬ ♫ ♬ ♫
Run your app in the browser (great for initial development):
ionic serve
Run on a device or simulator:
Test and share your app on a device with the Ionic View app:
http://view.ionic.io
8.配置平台
C:\Users\lemon\todo>ionic cordova platform add android
? The plugin @ionic/cli-plugin-cordova is not installed. Would you like to install it and continue? Yes
> npm install --save-dev --save-exact @ionic/cli-plugin-cordova@latest
√ Running command - done!
> cordova platform add android --save
√ Running command - done!
Using cordova-fetch for cordova-android@~6.2.2
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms\android
Package: io.ionic.starter
Name: MyApp
Activity: MainActivity
Android target: android-25
Subproject Path: CordovaLib
Android project created with cordova-android@6.2.3
Discovered plugin "cordova-plugin-console" in config.xml. Adding it to the project
Installing "cordova-plugin-console" for android
Adding cordova-plugin-console to package.json
Saved plugin info for "cordova-plugin-console" to config.xml
Discovered plugin "cordova-plugin-device" in config.xml. Adding it to the project
Installing "cordova-plugin-device" for android
Adding cordova-plugin-device to package.json
Saved plugin info for "cordova-plugin-device" to config.xml
Discovered plugin "cordova-plugin-splashscreen" in config.xml. Adding it to the project
Installing "cordova-plugin-splashscreen" for android
Adding cordova-plugin-splashscreen to package.json
Saved plugin info for "cordova-plugin-splashscreen" to config.xml
Discovered plugin "cordova-plugin-statusbar" in config.xml. Adding it to the project
Installing "cordova-plugin-statusbar" for android
Adding cordova-plugin-statusbar to package.json
Saved plugin info for "cordova-plugin-statusbar" to config.xml
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for android
This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
Discovered plugin "ionic-plugin-keyboard" in config.xml. Adding it to the project
Installing "ionic-plugin-keyboard" for android
Adding ionic-plugin-keyboard to package.json
Saved plugin info for "ionic-plugin-keyboard" to config.xml
--save flag or autosave detected
Saving android@~6.2.3 into config.xml file ...
√ Copying default image resources into ./resources/android - done!
![](https://images2015.cnblogs.com/blog/1104283/201707/1104283-20170720103326318-334808914.png)