01工程训练——开发环境搭建

工程训练——开发环境搭建

---

1.搭建ionic4.0开发环境

1.1所需软件

• Node.js(V8.9.0以上版本)
• VSCode
• git
• github客户端
• jdk

1.1.1 Android开发环境搭建

• jdk安装
• android sdk 安装
• 启动模拟器(用genymotion创建)

1.1.2 Ionic开发环境搭建

• node.js安装（下载安装包安装）
  检测：node -v（v10.16.3）
• cnpm安装 （npm install -g cnpm --registry=https://registry.npm.taobao.org）
  检测：cnpm -v（6.1.0）
• cordova安装（cnpm install -g cordova）
  检测：cordova -v（9.0.0）
• ionic安装（cnpm install -g ionic@latest）
  安装时报错了，如下图所示：
  
  解决办法：https://cloud.tencent.com/developer/ask/40770
  检测：ionic -v（5.2.8）
• git安装
• github客户端安装
• VSCode安装
  [注意]-g表示全局

---

2.创建ionic工程

2.1创建工程

• 创建工程

ionic start shengyizhuanjia sidemenu --type=angular
或(1)ionic start shengyizhuanjia sidemenu --type=angular --no-deps ,(2) install cnpm(下载依赖，在项目的根目录下运行命令，接下来的命令都在根目录下)

• 在浏览器运行

ionic serve

！！！！这里网页弹出来后一直是空白页面，调试了一个下午都没用，最后升级了下谷歌浏览器，就可以了！！！

2.2 构建Android应用程序

• 添加android平台

ionic cordova platform add android

• 编译

ionic cordova build android

编译成功会生成apk文件
编译过程中出错了：licenses Error: Unknown argument --licenses
解决方法：https://blog.csdn.net/u010165147/article/details/82496617

3.制作App图标

在项目的目录找到resources文件夹。在文件夹中替换icon.png，splash.png， 在cmd中进入项目所在文件夹执行：

ionic cordova resources

执行该命令后，会自动在resources文件夹下创建已添加的平台名称的文件夹，如：android，其中会自动将图片进行缩放、裁剪，生成不同分辨率的图片，并在config.xml中添加相应内容。 也可分开执行：

ionic cordova resources --icon
ionic cordova resources --splash

启动界面配置config.xml

<preference name="AutoHideSplashScreen" value="false"/>#禁止自动隐藏
<preference name="auto-hide-splash-screen" value="false"/>#禁止自动隐藏
<preference name="FadeSplashScreen" value="false"/>#禁用淡出效果
<preference name="SplashMaintainAspectRatio" value="true" />#图像cover屏幕
<preference name="ShowSplashScreenSpinner" value="false" />#隐藏加载灰圈
<preference name="SplashShowOnlyFirstTime" value="false" />#每次重新启动都显示

4.运行App应用程序

• 在浏览器中运行

ionic cordova run browser

• 在模拟器中运行
  1.用genymotion创建android模拟器[http://jingyan.baidu.com/article/3ea51489e7d8bd52e61bba36.html] (http://jingyan.baidu.com/article/3ea51489e7d8bd52e61bba36.html)
  2.配置模拟器的sdk属性genymotion---->settings----->ADB
  

3.运行命令

ionic cordova emulate android
或ionic cordova run

• 在真机中运行
  1.用Usb连接电脑
  2.打开开发者模式
  3.运行命令

ionic cordova emulate android
或ionic cordova run