共计 2866 个字符，预计需要花费 8 分钟才能阅读完成。
1. 环境依赖关系叙述
移动端混合开发的一个明显优势就是，一套代码两套部署，开发一套项目代码，可分别打成 Android 的包和 ios 的包。无论是混合开发还是原生开发，都是会需要原生的平台。我们先以 Android 平台为例，首先肯定需要 AndroidSDK,Android 环境缘起于 java，所以必须先安装 JDk, 这是平台的环境. 混合开发顾名思义需要前端和原生两块环境内容。混合开发平台，我们选择的是 cordova, 那么它依赖于 node.js 环境，并且需要 node.js 的 npm 模块来帮它下载插件。创建项目还需调试运行，那么就会需要 Android 模拟器。由于原生的 Android 模拟器启动过于慢，而且由于网络限制，google 的 cpu 渲染加速器环境也难以下载。我们这里使用的是一个国外的好用且免费的第三方模拟器 Genymotion。东西是免费的，但是需要注册和登陆。一共需要搭建的环境也就这么几个 JDK，AndroidSDK,node.js,cordova, Genymotion。
开发环境：
node.js
cordova6.0.0
ionic
测试运行环境：
JDK
AndroidSDK
Genymotion
2. 安装说明
2.1 JDK
安装教程很多，记住安装时下载 1.8 版本菜鸟教程：http://www.runoob.com/java/ja…
2.2 AndroidSDK
androidSDK 由于国内限网，推荐一个国内的一个下载网站：http://www.androiddevtools.cn/ 下载后根据提示安装，推荐下载的包就不要取消。系统一般会帮你默认勾选安卓最新版本 Android9.0，但是 Android9.0 会出现模拟器启动不了的问题，坑很多，建议安装 9.0 以下的，我选的 Android6.0，勾选下图的选项即可。
下载完配置 Android 环境变量打开安卓的安卓目录如图，我画圈的两个目录，需要加入到 path 里面 D:Program Filesandroidplatform-tools; D:Program Filesandroidtools;
2.3Genymotion 安装
官网下载官方只需注册即可免费使用，使用下面链接注册即可。
注册：https://www.genymotion.com/
下载：https://www.genymotion.com/do…
下载后按照提示安装即可，打开软件时登录选择个人登录即可。
下载安卓镜像打开后如图，点击 add。
找自己需要的版本下载即可
2.4 安装 nodejs
官网下载 nodejs 免安装版 https://nodejs.org/en/download/
选择 windows 免安装版 64 位
解压到要安装的目录
添加环境变量计算机 (右键)–> 属性 (左键)–> 高级系统设置 (左键)–> 环境变量 (左键)
检查是否配置成功
node -v
npm -v
正常显示出版本号则说明安装成功
更换 npm 镜像源
首先来说为什么要更换镜像源，由于 npm 的镜像源是国外的，我们使用 npm 工具安装软件环境时，由于网速问题会导致很多难以解决的问题，而且下载巨慢，故将镜像源更换为淘宝的镜像源。
执行下面命令更换软件源
npm install -g cnpm –registry=https://registry.npm.taobao.org
查看是否更换成功
cnpm -v
不报错且出来一段信息则说明更换成功。
参考学习菜鸟教程：http://www.runoob.com/nodejs/…
w3school:https://www.w3cschool.cn/node…
npm 基本使用：https://www.w3cschool.cn/node…
2.5 安装 cordova 平台
官网 https://cordova.apache.org/
使用 npm 安装平台
cnpm install -g cordova@6.0.0
上面安装指定版本的 cordova，我们这里安装 cordova6.0.0, 建议不要安装 7 版本和 8 版本，后面创建项目时会出现很多问题。
cordova -v
检查是否安装成功，正确显示出版本号则说明安装成功。
项目相关命令
#1. 创建项目
cordova create MyApp
cd ./MyApp
#2. 添加平台
cordova platform add browser #添加浏览器平台
cordova platform add android #安卓平台
cordova platform add ios #ios 平台
#注意添加相关平台需要拥有相关平台的环境
#3. 编译打包
cordova build android #打成 android 平台的包 .apk
cordova build ios #打成 ios 平台的包
#4. 运行到 androidSDK 自带的模拟器
cordova emulate android
#5. 运行到第三方模拟器或真机
cordova run android
参考学习 w3school:https://www.w3cschool.cn/cord…
2.6angularjs 环境搭建
官网 https://www.angular.cn/guide/…
安装项目脚手架
npm install -g @angular/cli
这里只是为了给 ionic 创建项目提供环境，但是要使用 ionic 开发就必须学会 angularjs。
2.7ionic 安装配置
官网 https://ionicframework.com/do…
安装
- g 是全局的意思，latest 是最新版的意思。
cnpm install -g ionic@latest
项目相关命令
#1 创建项目
ionic start myNewProject tabs #tabs 是项目模板的一种，ionic 平台自身会提供几种项目模板
#进入到项目
cd ./myNewProject
#2. 添加平台
ionic cordova platform add android #平台同上一样可选
#3. 打包
ionic cordova build android
#4. 运行
ionic serve #运行在浏览器
ionic cordova run android #运行到 android,ios
可能会出现的问题创建项目时，会问你是否使用 ionic4 创建项目，选择 n 即可，也可创建尝试下，但运行性项目到 android 模拟器显示空白。
参考学习菜鸟教程：http://www.runoob.com/ionic/i…
中文文档：http://www.ionic.wang/js_doc-…
参考学习 w3school:https://www.w3cschool.cn/cuhk…
3. 可能会遇到的问题
node.js 使用免安装版能避免许多未知错误。
cordova 安装 6.0.0 不要安装 7.0 或 8.0 的，后面出现的错误会很多。
cordova 添加 android 平台，会多次失败，由于资源在国外会失败多次，插件下载完成就可以成功。
安卓模拟器需要 cpu 加速器，不然会一直黑屏，所以选用了第三方模拟器。
谷歌真机调试 chrome://inspect。
android9.0 不能用使用。
