ionic笔记(环境搭建与命令) |
|
這些年來
L0
• 2020-03-15 • 回复 0 • 只看楼主
• 举报
|
昨天下午项目经理让我学习 ionic,我就折腾了一下,经过一番折腾我挺喜欢 ionic 和 node.js,不过我也是在折腾的道路上越走越远,别看这偏博客上就那么点东西,可我这小白操作,真的非常难受…中途遇到各种问题…哎…
在项目中用到的环境依赖:
- Node.js
- Android SDK
- Java JDK
- Gradle
- ionic
下载安装Node.js
- 微云链接:https://share.weiyun.com/5afO4Pd?achuan.io
- 密码:
achuan
安装的时候把环境变量默认勾选所以不用我们手动配置
# 查看的当前的Node版本$ node -v v10.15.3
更换源
# 临时$ npm --registry https://registry.npm.taobao.org install express# 永久$ npm config set registry https://registry.npm.taobao.org# 验证是否更换成功$ npm config get registryhttps://registry.npm.taobao.org/
第一个Node.js程序!
achuan@DESKTOP-CL4MMTQ MINGW64 /h/Node.js$ vi HiNodeJs.js console.log("Hello World!");achuan@DESKTOP-CL4MMTQ MINGW64 /h/Node.js$ node HiNodeJs.jsHello World!
交互模式
用终端 node
进入交互模式,可以直接执行遇见并显示结果
achuan@DESKTOP-CL4MMTQ MINGW64 /h/Node.js $ node > console.log("Hello World!"); Hello World! undefined
下载安装 Android SDK
- 微云链接:https://share.weiyun.com/5ybFh0k?achuan.io
- 密码:
achuan
配置环境变量
ANDROID_HOMEANDROID_SDK_ROOTH:\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 SDKExtras # 安卓兼容库 Android Support Repository # 加速 Intel 体系的安卓模拟器 Intel x86 Emulator Accelerator (HAXM install)
创建、配置并运行 avd 模拟器
# 创建 avd 模拟器,执行后会有个对话框,右侧有创建按钮根据需要去配置模拟器配置$ android avd# 运行 avd 模拟器$ emulator -avd [avdName]
下载安装 Java JDK
在官网下载真是死慢,我下载后放在微云了
- 微云链接:https://share.weiyun.com/54nkkob?achuan.io
- 密码:
achuan
配置环境变量
在安装 Java JDK 点被环境变量出现问题,需要自己手动配置一下
JAVA_HOMEH:\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
- 密码:
achuan
安装完毕后查看一下版本,成功忽略下一步,我点背。
$ gradle -v
配置环境变量
GRADLE_HOMEH:\environment\gradle-4.10.3# 在用户变量找"PATH"并新建环境变量%GRADLE_HOME%\bin
安装ionic
这下轮到我们的猪脚”ionic”登场!npm install -g cordova ionic
achuan@DESKTOP-CL4MMTQ MINGW64 /h/Node.js$ npm install -g cordova ionicC:\Users\achuan\AppData\Roaming\npm\cordova -> C:\Users\achuan\AppData\Roaming\npm\node_modules\cordova\bin\cordovaC:\Users\achuan\AppData\Roaming\npm\ionic -> C:\Users\achuan\AppData\Roaming\npm\node_modules\ionic\bin\ionic+ ionic@4.12.0+ cordova@9.0.0added 718 packages from 390 contributors in 658.274s
第一个ionic应用!
# 创建一个空应用 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\`
运行项目进行调试
# 用默认浏览器运行调试,默认端口`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 versionsRequirements check failed for JDK 8 ('1.8.*')! Detected version: 1.7.0Check 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 andridFailed to fetch platform andridProbably 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 E404npm ERR! 404 Not Found: andrid@latestnpm 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.
常用命令
# 查看 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]