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环境)

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 验证是否安装成功。

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!