ionic和cordova初探--从安装到运行首个app

好多人说ionic好用，一直要推荐我用，我就不信了，来安装玩一下试试效果。实践出真知！安装过程各种坑，工具太多了，太麻烦了，差点放弃（还好坚持下来呢）。

本文示例代码请查看Github: https://github.com/AweiLoveAndroid/Hybrid-sample

1.安装node

许多前端工具的安装都依赖于node的包管理器npm，Node官网： https://nodejs.org/
安装完成后在cmd中输入 npm -v 回车。
查看版本号如图：

查看版本号

2.安卓环境

JDK下载地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
JDK需要配置两个环境变量：（如果已配置就无需再配置）

PATH：%JAVA_HOME%\bin
CLASSPATH：.;%JAVA_HOME%\lib\tools.jar （一定不要忘了前面的点）

配置完成后，cmd中输入java -version 查看版本号。

3.安装安卓的SDK

打开Android Studio，File --> Settings --> 搜索sdk,找到对应的sdk进行安装即可。
需要在Path环境变量中添加两个值。分别是 Android SDK中tools目录的路径和platform-tools的路径。
例如：

D:\android-sdk\tools;
D:\android-sdk\platform-tools;

4. 安装ionic和cordova

安装命令

命令行输入 `npm install -g cordova ionic`

安装示意图：

安装示意图

如果安装不了，可以试试国内镜像安装，首先安装cnpm，执行npm install -g cnpm --registry=https://registry.npm.taobao.org命令安装。然后执行命令cnpm install -g cordova ionic安装ionic和cordova

查看是否安装成功：

查看ionic版本 `ionic -v`
查看cordova版本 `cordova -v`

查看ionic版本

查看cordova版本

ionic 和 cordova默认安装在 C:\Users\Administrator（此目录为本机名）\AppData\Roaming\npm\目录。
注意AppData是隐藏文件，需要在文件夹选项里面把隐藏文件显示才可以看到（具体的怎么显示隐藏文件夹百度）。

本地安装路径如图所示：

ionic 和 cordova默认安装路径

修改PATH环境变量，在末尾加上 C:\Users\Administrator（此目录为本机名）\AppData\Roaming\npm\;

5. 使用ionic命令行创建新项目

打开cmd执行ionic start

然后输入一个项目名，回车

然后按下tab键选择一个默认的模板，按回车。比如我这里选择的是blank模板。

然后看到有一行提示 ? Integrate your new app with Cordova to target native iOS and Android? (y/N) 意思是是否要把 iOS 和Android集成到刚刚用Cordova 创建的app中，我这里选择y 表示确定。然后就会自动安装缺失的或者更新某些工具版本。
然后就会看到一个提示? Install the free Ionic Pro SDK and connect your app? 我这里选择的y，表示确认。
然后需要输入邮箱登陆。

然后是输入密码

后面还有步骤，太麻烦了，我这里就不列举了，我已经放弃使用ionic创建安卓项目了，可以直接看下文。

6. 使用cordova创建安卓项目（建议直接跳过第5步，使用第6步）

（1）打开一个存放项目的目录，打开命令行，输入`cordova create 目录报名 App名称`，然后回车。例如`cordova create first_sample com.lzw.sample SampleApp`

（2）打开刚创建的first_sample目录，打开命令行，输入命令`cordova platforms add android`，表示添加安卓支持。

如果是要支持ios平台，可以输入cordova platforms add ios。

如果是要支持web网页，可以输入cordova platforms add browser。

如果不知道有哪些平台可以选择，可以使用命令 cordova platforms list 查看已经安装的平台和可以支持的平台。

（3）在特定平台执行程序

1.在浏览器打开，进入工程根目录，输入cordova run browser，然后浏览器自动访问http://localhost:8000/
2.在安卓上编译Cordova APP

1.输入`cordova requirements`命令检查是否满足构建平台的要求。如有报错请按错误提示去安装相应的工具。
2.执行`cordova build android`命令， 编译安卓项目
3.执行`cordova run android`命令，就会自动打开模拟器，在模拟器运行安卓项目了，如果执行`cordova run`,默认是在浏览器运行。
默认是debug版本，打包出来的apk在 你创建的项目根目录\platforms\android\app\build\outputs\apk\debug目录下。
默认启动页是`www/index.html`这个页面。逻辑编写在`www/js这个目录里。`

示意图如下：

运行在浏览器

运行在安卓模拟器