Ionic环境配置文档

Ionic环境配置文档

1. 安装java jdk 环境

下载地址：
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

说明：

记住安装地址，随后配置环境变量：右键我的电脑—属性—高级系统变量—环境变量

1. 新建系统变量 

变量名：Java_Home

变量值：C:\java\JDK1.7 （JDK的实际安装路径）

2)编辑原有的系统环境变量Path，在该变量值的头部加上以下路径值：

  ;%Java_Home%\bin

1. 安装 android sdk 环境（或者选择安装android studio）

下载地址：https://android-sdk.en.softonic.com/

说明：随后进入系统环境变量（与1.一致）

1)新建系统变量

变量名：ANDROID_SDK_HOME

变量值：C:\Users\Lenovo\AppData\Local\Android\Sdk（SDK的实际安装路径）

2)编辑原有的系统环境变量Path，在该变量值的头部以下路径值：

  ；%ANDROID_SDK_HOME%\platforms;%ANDROID_SDK_HOME%\tools;%ANDROID_SDK_HOME%\platform-tools

1. 安装node.js

参考网址：http://www.runoob.com/nodejs/nodejs-install-setup.html

说明：傻瓜式安装， 接着进入cmd控制台，在哪个路径下都可以，输入以下命令检测是否安装成功：

node -v

1. 安装cnpm

参考网址：http://www.runoob.com/nodejs/nodejs-npm.html

说明：上一步安装node.js时已经默认安装了npm，但是国内直接使用 npm 的官方镜像是非常慢，推荐使用淘宝 NPM 镜像，进入cmd控制台输入以下命令即可安装cnpm

npm install -g cnpm--registry=https://registry.npm.taobao.org

1. 安装gradle

参考网址：https://gradle.org/install

安装方法：

1. 选择安装包下载

 

1. 在随意一个盘创建文件夹，解压刚才下载的包

 

1. 在系统环境变量path变量中加入刚刚解压的gradle的路径，到bin这一层

 

1. 打开cmd控制台输入以下命令检查是否安装成功，成功会提示版本号

gradle -v

1. 使用ionic（负责页面实现）

参考网址：http://ionicframework.com/docs/intro/installation/

说明：

1. 安装ionic 和 cordova (-g表示全局安装，在哪个路径下使用该命令都可以)

cnpm install -g ionic cordova 

1. 启动一个ionic项目

打开cmd控制台，进入到需要创建项目的根路径 如输入f: 进入到f盘

然后执行以下命令创建并启动一个ionic项目，myApp为项目名称 ，之后提示有四种模板选择，随便选一种都可以，就是不同的页面模板

ionic start myApp 

1. 上一步历时较久，创建完成后进入到myApp文件夹的路径

cd myApp

然后启动ionic服务，此时系统便会自动启动浏览器运行此项目

ionic serve

1. 使用cordova（负责将页面包装成原生应用的工具）

参考网址：https://cordova.apache.org/docs/en/latest/guide/cli/index.html

说明：

1) 打开cmd控制台进入到项目根目录中，如上述的 myApp (6.的第一步已经安装了cordova)

Cd myApp

2) Add Platforms

执行以下命令创建android和ios原型和浏览器原型

cordova platform add android

Cordova platform add ios

Cordova platform add browser

安装成功后使用如下命令是否载入成功

cordova platform ls

3)Install pre-requisites for building

执行以下命令查看构建原型所需要的条件

cordova requirements

如果所需包都已经安装了 正确的提示是下图这样的，ios的暂时忽略

 

1. Build the App

cordova build android

1. Run app

上述已经完成了构建一个app所需要的条件 ，我们使用真机去启动和调试这个app

1. 将手机与电脑进行了连接。并且使手机处于usb的调试状态
2. 执行以下命令运行app：

cordova run android

1. Add Plugins

可以选择添加一些原生的应用插件，如摄像机

cordova plugin add cordova-plugin-camera