1 开发环境搭建

1.1 任务描述

1.1.1 任务介绍

搭建ionic开发环境，创建ionic项目，能够使用浏览器启动项目，在Android模拟器或者真机中运行应用程序。

1.1.2 任务要求

搭建开发环境
创建ionic工程
运行app应用程序
生成apk文件

1.2 工作指导说明

1.2.1 开发环境搭建

所需软件	下载链接
Node.js	官网下载
jdk	官网下载
android sdk tool	百度云下载
webstorm2017.2.4	官网下载
webstorm汉化补丁	下载
webstorm破解补丁	下载
git	官网下载
.net framework	百度云下载
github客户端	官网下载

jdk版本最好是1.8.0版本。nodejs我使用的是8.12.0。git、github、.net framework可以先不装。另外网络要求挺高的，如果网线、无线不行的话（工程创建部分一直卡主），可以换手机热点（建议移动、电信的）试试。

建议用管理员运行命令提示符（cmd）

1.2.1.1 Android开发环境搭建

jdk安装
android sdk安装
启动模拟器

1.2.1.2 Ionic开发环境搭建s

node.js安装（会自动配置系统路径）

要了解Node.js更多的知识，请参考官网
这个博客写的很好，可以玩一下。
https://www.cnblogs.com/yominhi/p/7039795.html

cnpm安装（安装包管理器）：
进入命令提示符（cmd），执行下面的命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后，添加系统环境变量。

//在系统环境变量path中添加，I:\Program Files\nodejs\node_global
//nodejs是我安装的目录。node_global是npm install ...执行创建的。

检查有没有安装成功可以执行命令

cnpm -v

在这里插入图片描述
3. cordova安装

cnpm install -g cordova

检查有没有安装成功可以执行命令：

cordova -v

要了解cordova更多的知识，请参考

ionic安装(ionic是一个用来开发混合手机应用的，开源的，免费的代码库)

cnpm install -g ionic@latest

检查有没有安装成功可以执行命令：

ionic -v

git安装
github客户端安装
webstorem安装和破解
1. webstorm的破解请参考链接
2. 将\WebStorm 2017.2.4\lib目录下的resources_en.jar文件复制出来，并更名为resources_cn.jar。
3. 双击打开resources_cn.jar（注意是打开而不是解压出来），将下载的汉化包zh_CN目录下的所有文件拖到刚才打开的resources_cn.jar文件内的messages目录中，并保存。
4. 将resources_cn.jar文件复制回.\Webstorm\lib目录。或是直接讲汉化包里面的resources_cn.jar复制到.\Webstorm\lib目录即可.
5. 汉化完毕，重新打开Webstorm就可以显示中文。

创建、运行ionic工程

学习ionic cli

1.2.1.3 创建工程

ionic start shengyizhuanjia sidemenu --type=angular
//使用ionic start 项目名称
//会出现选项，选择blank类型会快点

创建工程的过程中需要下载依赖的包，由于npm的服务器在国外，因此经常安装失败。可以使用下面两个命令来创建工程

ionic start shengyizhuanjia sidemenu --type=angular --no-deps

工程创建经常失败，原因有可能是sass没安装，安装就好。或者网络问题。
这个是网络不好的报错。

如果是什么sass相关的问题，可以试着以下命令进行解决。

npm i node-sass
或者
npm i node-sass -D

别的问题表示无奈。。。
命令执行成功后，进入项目的根目录，执行命令

cnpm install

分成两个步骤创建的工程用webstorm打开，会出现智能感知失效。

如果人品不够好一直失败，可以使用我创建的工程百度云下载

要了解ionic start更多的知识，请参考官网

1.2.1.4 工程的结构

要了解ionic 工程结构更多的知识，请参考官网

1.2.1.5 在浏览器运行

在命令提示符中（cmd）进入项目的根目录，执行下面的命令

ionic serve

如果这一步有问题，就往前面找吧，别往下了。
命令执行成功后，会自动打开默认的浏览器（建议使用谷歌浏览器），默认网址：http://localhost:8100/
按F12打开开发者工具，模拟手机设备。

要了解ionic serve更多的知识，请参考官网

1.2.1.6 在模拟器或手机运行

添加android平台

ionic cordova platform add android

要了解ionic cordova platform更多的知识，请参考官网

2.安装gradle

自己去官网下载，http://services.gradle.org/distributions/。如果没安的话，在下一步就会报相应的错误。

编译

ionic cordova build android

最终结果会生成一个debug.apk文件，这就是编译的结果，可以直接发到手机或者用模拟器进行安装，用模拟器的话比较方便，直接将apk拖进去即可安装。如果使用手机的话，就用继续在项目根目录下输入，ionic cordova run 命令。

要了解ionic cordova build更多的知识，请参考官网

运行

ionic cordova emulate android

或者

ionic cordova run

最好不要用SDK Tools工具创建模拟机，不然ionic cordova run命令直接就调用。SDK Tools工具创建的模拟机太慢太卡，看不懂。逍遥模拟器可以用直接将apk拖进去即可安装，还不错。使用手机的时候，打开开发者模式，然后在命令窗口输入adb devices，如果有显示如下，就是有设备了。

在这里插入图片描述
如果是unknown command device这样的报错，检查一下命令有没有错之外就是SDK的环境有问题了。
另外再列举出一个常见的问题，地址在另外一个博客。https://blog.csdn.net/pan_xi_yi/article/details/83188481

要了解ionic cordova emulate 更多的知识，请参考官网

要了解ionic cordova run 更多的知识，请参考官网

1.2.2 制作App的图标和启动屏幕

在项目的目录找到resources文件夹。在文件夹中都放入icon.png（应用图标，最小192x192px，不带圆角），splash.png（启动屏幕，最小2208x2208px，中间区域1200x1200px）(可以是png、psd、ai)
在cmd中进入项目所在文件夹执行：

ionic cordova resources

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

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

注意：执行以上命令时需连接到互联网

要了解更多ionic cordova resources的知识，请参考官网

启动界面配置config.xml

<preference name="SplashScreenDelay" value="2000"/>#显示时间
<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" />#每次重新启动都显示

1.3 产品工作要求

无

1.4 产品检查要求

创建ionic项目，能够使用浏览器启动项目，也能够在Android手机或者Android模拟器中运行。

Android 关于ionic环境的开发环境搭建