Ionic环境配置文档
- 安装java jdk 环境
下载地址:
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
说明:
记住安装地址,随后配置环境变量:右键我的电脑—属性—高级系统变量—环境变量
- 新建系统变量
变量名:Java_Home
变量值:C:\java\JDK1.7 (JDK的实际安装路径)
2)编辑原有的系统环境变量Path,在该变量值的头部加上以下路径值:
;%Java_Home%\bin
- 安装 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
- 安装node.js
参考网址:http://www.runoob.com/nodejs/nodejs-install-setup.html
说明:傻瓜式安装, 接着进入cmd控制台,在哪个路径下都可以,输入以下命令检测是否安装成功:
node -v
- 安装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
- 安装gradle
参考网址:https://gradle.org/install
安装方法:
- 选择安装包下载
- 在随意一个盘创建文件夹,解压刚才下载的包
- 在系统环境变量path变量中加入刚刚解压的gradle的路径,到bin这一层
- 打开cmd控制台输入以下命令检查是否安装成功,成功会提示版本号
gradle -v
- 使用ionic(负责页面实现)
参考网址:http://ionicframework.com/docs/intro/installation/
说明:
- 安装ionic 和 cordova (-g表示全局安装,在哪个路径下使用该命令都可以)
cnpm install -g ionic cordova
- 启动一个ionic项目
打开cmd控制台,进入到需要创建项目的根路径 如输入f: 进入到f盘
然后执行以下命令创建并启动一个ionic项目,myApp为项目名称 ,之后提示有四种模板选择,随便选一种都可以,就是不同的页面模板
ionic start myApp
- 上一步历时较久,创建完成后进入到myApp文件夹的路径
cd myApp
然后启动ionic服务,此时系统便会自动启动浏览器运行此项目
ionic serve
- 使用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的暂时忽略
- Build the App
cordova build android
- Run app
上述已经完成了构建一个app所需要的条件 ,我们使用真机去启动和调试这个app
- 将手机与电脑进行了连接。并且使手机处于usb的调试状态
- 执行以下命令运行app:
cordova run android
- Add Plugins
可以选择添加一些原生的应用插件,如摄像机
cordova plugin add cordova-plugin-camera