---
layout: post
title: ionic笔记(环境搭建与命令)
description: ionic笔记(环境搭建与命令)
category: tech
thumb: ARTICLEPICTURES_PATH/ionic.jpg
tags: [ionic, 前端]
---
昨天下午项目经理让我学习 ionic,我就折腾了一下,经过一番折腾我挺喜欢 ionic 和 node.js,不过我也是在折腾的道路上越走越远,别看这偏博客上就那么点东西,可我这小白操作,真的非常难受...中途遇到各种问题...哎...
## 在项目中用到的环境依赖:
- Node.js
- Android SDK
- Java JDK
- Gradle
- ionic
## 下载安装Node.js
- 微云链接:[https://share.weiyun.com/5afO4Pd?achuan.io](https://share.weiyun.com/5afO4Pd?achuan.io '阿川的 Node.js 微云下载链接')
- 密码:`achuan`
安装的时候把环境变量默认勾选所以不用我们手动配置
```bash
# 查看的当前的Node版本
$ node -v
v10.15.3
```
### 更换源
```bash
# 临时
$ npm --registry https://registry.npm.taobao.org install express
# 永久
$ npm config set registry https://registry.npm.taobao.org
# 验证是否更换成功
$ npm config get registry
https://registry.npm.taobao.org/
```
## 第一个Node.js程序!
```bash
achuan@DESKTOP-CL4MMTQ MINGW64 /h/Node.js
$ vi HiNodeJs.js
console.log("Hello World!");
achuan@DESKTOP-CL4MMTQ MINGW64 /h/Node.js
$ node HiNodeJs.js
Hello World!
```
### 交互模式
用终端 `node` 进入交互模式,可以直接执行遇见并显示结果
```bash
achuan@DESKTOP-CL4MMTQ MINGW64 /h/Node.js
$ node
> console.log("Hello World!");
Hello World!
undefined
```
## 下载安装 Android SDK
- 微云链接:[https://share.weiyun.com/5ybFh0k?achuan.io](https://share.weiyun.com/5ybFh0k?achuan.io '阿川的 Android SDK 微云下载链接')
- 密码:`achuan`
### 配置环境变量
```bash
ANDROID_HOME
ANDROID_SDK_ROOT
H:\environment\Android\android-sdk
我也不是很理解,明明一样还要声明俩?但是少一个就报错,说 ANDROID_HOME 已经弃用......
# 在用户变量找"PATH"并新建环境变量
%ANDROID_HOME%\tools
# android 命令帮助,出现内容即环境配置成功
$ android -h
```
### 配置 Android SDK Manager
在`Android SDK Manager`找到下面这些勾选上,然后点击`Install packages`按钮进行下载
```
Tools
# 工具包自带的Tools
Aondroid SDK Tools
# Android公用平台工具
Aondroid SDK Plaform-tools
# Android构建工具
Aondroid SDK BUild-tools
# 必须安装,至少需要安装一个版本的API工具包!
Android 9 (API 28)
# 开发app平台依赖和调试工具
SDK Platform
# 模拟器镜像
Intel x86 Atom_64 System Image
# API源码
Sources for Android SDK
Extras
# 安卓兼容库
Android Support Repository
# 加速 Intel 体系的安卓模拟器
Intel x86 Emulator Accelerator (HAXM install)
```
### 创建、配置并运行 avd 模拟器
```bash
# 创建 avd 模拟器,执行后会有个对话框,右侧有创建按钮根据需要去配置模拟器配置
$ android avd
# 运行 avd 模拟器
$ emulator -avd [avdName]
```
## 下载安装 Java JDK
在官网下载真是死慢,我下载后放在微云了
- 微云链接:[https://share.weiyun.com/54nkkob?achuan.io](https://share.weiyun.com/54nkkob?achuan.io '阿川的 Java JDK 微云下载链接')
- 密码:`achuan`
### 配置环境变量
在安装 Java JDK 点被环境变量出现问题,需要自己手动配置一下
```
JAVA_HOME
H:\environment\Java\jdk1.8.0_211
# 在用户变量找"PATH"并新建环境变量
%JAVA_HOME%\bin
```
在系统环境变量"Path"里找下面这条删掉它
`C:\Program Files (x86)\Common Files\Oracle\Java\javapath`
## 下载安装 Gradle
- 微云链接:[https://share.weiyun.com/5AuD53j?achuan.io](https://share.weiyun.com/5AuD53j?achuan.io '阿川的 Gradle 微云下载链接')
- 密码:`achuan`
安装完毕后查看一下版本,成功忽略下一步,我点背。
```bash
$ gradle -v
```
### 配置环境变量
```
GRADLE_HOME
H:\environment\gradle-4.10.3
# 在用户变量找"PATH"并新建环境变量
%GRADLE_HOME%\bin
```
## 安装ionic
这下轮到我们的猪脚"ionic"登场!`npm install -g cordova ionic`
```bash
achuan@DESKTOP-CL4MMTQ MINGW64 /h/Node.js
$ npm install -g cordova ionic
C:\Users\achuan\AppData\Roaming\npm\cordova -> C:\Users\achuan\AppData\Roaming\npm\node_modules\cordov
a\bin\cordova
C:\Users\achuan\AppData\Roaming\npm\ionic -> C:\Users\achuan\AppData\Roaming\npm\node_modules\ionic\bi
n\ionic
+ ionic@4.12.0
+ cordova@9.0.0
added 718 packages from 390 contributors in 658.274s
```
## 第一个ionic应用!
```bash
# 创建一个空应用 myApp
$ ionic start myApp tabs
# 添加对 android 平台的支持
$ ionic cordova platform add android
# 参数可选
[android] or [ios]
# 编译项目 apk
$ ionic cordova build android [可填选参数]
# 压缩编译项目 apk
--prod
# 编译发行版 apk
--release
# 编译压缩发行版 apk
--release --prod
生成的 apk 文件在 `[项目名]\platforms\android\app\build\outputs\apk\debug\`
```
## 运行项目进行调试
```bash
# 用默认浏览器运行调试,默认端口`8100`,`127.0.0.1:8100`。
$ ionic serve
# 在 AVD 模拟器中运行调试 [android] or [ios]
$ ionic cordova emulate android
```
### 遇到的问题
看着终端依赖疯狂报错......心好累......忽然觉得我这辈子最让我难受的不是电脑卡、网速慢这都是死问题能搞好。而这软件框架在win运行真是各种奇葩环境依赖Bug......它能把我逼疯......
- **缺少 Android SDK**
```
You have been opted out of telemetry. To change this, run: cordova telemetry on.
Failed to find 'ANDROID_HOME' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.
[ERROR] An error occurred while running subprocess cordova.
cordova build android exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
```
- **Java JDK 版本过低**
这玩意有个对 Java JDK 版本要求,`不能低于1.7`正好被我踩个准正好1.7.....
```
Checking Java JDK and Android SDK versions
Requirements check failed for JDK 8 ('1.8.*')! Detected version: 1.7.0
Check your ANDROID_SDK_ROOT / JAVA_HOME / PATH environment variables.
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=H:\environment\Android\android-sdk (DEPRECATED)
[ERROR] An error occurred while running subprocess cordova.
cordova build android exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
```
- **Gradle 版本过高导致不兼容**
这玩意跟 Java JDK "搞双簧?"版本过高导致不兼容。
以前是我单独装的`Gradle 5.4.1 all`报错后不知道怎么了,自动修复给下载了`Gradle 4.10.3 all`
```
Using cordova-fetch for andrid
Failed to fetch platform andrid
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: npm: Command failed with exit code 1 Error output:
npm ERR! code E404
npm ERR! 404 Not Found: andrid@latest
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\achuan\AppData\Roaming\npm-cache\_logs\2019-05-07T05_31_11_192Z-debug.log
[ERROR] An error occurred while running subprocess cordova.
cordova platform add andrid --save exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
```
## 常用命令
```bash
# 查看 Node.js 版本
$ npm -v
# 安装 ionic
$ nmp install -g ionic
# 安装 Cordova
$ nmp install -g cordova
# 更新 ionic cordova
$ nmp update -g ionic cordova
# 查看 ionic 版本
$ ionic -v
# 查看 ionic 环境信息
$ ionic info
# 查看 ionic 信息
$ ionic -info
# 移除 [android] or [ios] 平台的支持
$ ionic cordova platform remove android
# 用浏览器进行本地调试
$ ionic serve
# 在模拟器中运行调试 [android] or [ios]
$ ionic cordova emulate android
# 显示系统中全部 android 平台
$ android list targets
# 显示系统中全部 avd 模拟器
$ android list avd
# 删除 avd 模拟器
$ android delete avd -n [avdName]
```