1 开发环境搭建

1.1 任务描述

1.1.1 任务介绍

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

1.1.2 任务要求

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开发环境搭建

1. jdk安装
2. android sdk安装
3. 启动模拟器

1.2.1.2 Ionic开发环境搭建s

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

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

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

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

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

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

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

cnpm -v
 

3. cordova安装

cnpm install -g cordova
 

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

cordova -v
 

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

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

cnpm install -g ionic@latest
 

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

ionic -v
 

5. git安装
6. github客户端安装
7. webstorem安装和破解
   1. webstorm的破解请参考链接
   2. 将WebStorm 2017.2.4lib目录下的resources_en.jar文件复制出来，并更名为resources_cn.jar。
   3. 双击打开resources_cn.jar（注意是打开而不是解压出来），将下载的汉化包zh_CN目录下的所有文件拖到刚才打开的resources_cn.jar文件内的messages目录中，并保存。
   4. 将resources_cn.jar文件复制回.Webstormlib目录。或是直接讲汉化包里面的resources_cn.jar复制到.Webstormlib目录即可.
   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 在模拟器或手机运行

1. 添加android平台

ionic cordova platform add android
 

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

2.安装gradle

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

3. 编译

ionic cordova build android
 

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

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

4. 运行

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

#显示时间
 #禁止自动隐藏
 #禁止自动隐藏
 #禁用淡出效果
 #图像cover屏幕
 #隐藏加载灰圈
 #每次重新启动都显示
 

1.3 产品工作要求

无

1.4 产品检查要求

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