移动开发（有 / 无打包需求）命令及过程、AndroidSDK 环境配置、模拟器（真机）/ 浏览器调试

目录

一. 无打包需求

二. 有打包需求 ※

2.1 下载 AndroidSDK / Android Studio，配置环境变量

2.2 安装依赖工具 cordova、JDK1.8、gradle（负责编译）、安卓模拟器

2.3 .apk 打包

2.3.1 添加打包平台 ionic cordova platform add android

2.3.2 config.xml 中修改项目信息（包名、应用名、版本号）

2.3.3 生成 debug 包 ionic cordova build android

2.3.4 生成签名包 ionic cordova build android --prod --release

三. 模拟器（真机）/ 浏览器 调试

---

一. 无打包需求

• 需要安装的内容：

1. 安装 VSCode，添加插件 Ionic Snippets、Eslint
2. 安装 Node.js
3. 安装移动端脚手架工具：cmd → npm install -g @ionic/cli （检测：cmd → ionic -v） 

• ---

  创建项目：cmd → ionic start dabaopractice tabs，选择  Angular

• ---

  注意：使用 npm / yarn 进行 node_modules 下载
• 原因：cnpm 下载的包，嵌套层级过深，会导致打包时出现很多报错

• ---

  如何解决 npm / yarn 容易下载失败的问题？
• 目前采用公司的 某不可描述软件（懂的都懂ovo）：
• 

二. 有打包需求 ※

2.1 下载 AndroidSDK / Android Studio，配置环境变量

• 
• 
• 注意：ANDROID_HOME 这个变量名其实过时了，不影响项目使用，打包的时候会出现提示
• 解决方案：添加新的变量名 ANDROID_SDK_ROOT
• 
• Path 变量中添加：

---

• 检验环境是否安装成功的方法：
• 在 cmd 中输入 sdkmanager ，会有提示信息（不是报错信息）
• 
• 继续在 cmd 中输入 adb ，会有提示信息（不是报错信息）
• 
• 继续在 cmd 中输入 android ，会有提示信息（不是报错信息）
• 

---

2.2 安装依赖工具 cordova、JDK1.8、gradle（负责编译）、安卓模拟器

• JDK 查看版本的方式： java -version
• 
• 推荐使用夜神、雷电等模拟器

---

2.3 .apk 打包

2.3.1 添加打包平台 ionic cordova platform add android

• 添加打包平台命令：ionic cordova platform add android
• 平台对每个项目只添加一次
• 如需重新添加平台，需先执行 移除平台命令：ionic cordova platform rm android
• 添加打包平台生成的文件：
• 

---

2.3.2 config.xml 中修改项目信息（包名、应用名、版本号）

• 在项目配置文件config.xml中修改应用的包名（确保唯一，一旦确定，不能轻易修改）、应用的名称（只需要修改一次）、版本号（每次发布版本都需要对应更新）
• 

---

2.3.3 生成 debug 包 ionic cordova build android

• 这个时候就可以生成 app，并且安装在手机上啦
• ionic cordova build android
• 最后的输出路径，即为打包后生成的安装包：
• 

• ---

  我遇到的一些报错：
• 

---

2.3.4 生成签名包 ionic cordova build android --prod --release

• ionic cordova build android --prod --release
• 最后的输出路径，即为打包后生成的待签名的安装包（可使用第三方辅助签名工具进行签名）：
• 
• 注意：签名需要用到公司统一签名证书

三. 模拟器（真机）/ 浏览器 调试

• 注意：只有 debug 包才能被调试，签名包不能被调试（上面 2.3.3 就是 debug 包）

• ---

  移动设备上开启 USB 调试模式（开发者选项），可能无法连接，初学者建议模拟器调试

• ---

  将项目安装到真机 /模拟器中：ionic cordova run android

• ---

  调试方法一：Chrome 菜单 – 更多工具 – 检查设备（Chromemenu > More tools > Inspect Devices）

• ---

  调试方法二：在浏览器地址栏输入chrome://inspect 或 about:inspect
• 
• 如果连接成功，就可以看到：移动设备的型号、设备上运行的页面、允许调试的 WebView 列表
• 找到需要调试的目标页面，点击 inspect ，即可打开 DevTools（默认使用 appspot 服务器）
•