--- 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] ```