计算机工程训练作业_01_开发环境搭建

1 开发环境搭建

1.1 任务描述

1.1.1 任务介绍

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

1.1.2 任务要求

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

1.2 工作指导说明

1.2.1 开发环境搭建

所需软件	下载链接
node.js	v8.9.0以上版本
jdk
android sdk tool
webstorm2017.2.4
webstorm破解
git
.net framework	百度云下载
github客户端

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

1.2.1.1 android开发环境搭建

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

1.2.1.2 ionic开发环境搭建

1. node.js安装

要了解node.js更多的知识，请参考

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

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

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

cnpm -v

3. cordova安装

cnpm install -g cordova

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

cordova -v

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

4. ionic安装

cnpm install -g ionic@latest

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

ionic -v

5. git安装
6. github客户端安装
7. 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工程

1.2.2 创建工程

ionic start shengyizhuanjia sidemenu --type=angular

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

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

命令执行成功后，进入项目的根目录，执行命令

cnpm install

分成两个步骤创建的工程用webstorm打开，会出现智能感知失效的问题。 npm install出现"unexpected end of json input while parsing near"错误解决方法 npm cache clean --force

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

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

1.2.2.1 工程的结构

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

1.2.2.2 在浏览器运行

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

ionic serve

命令执行成功后，会自动打开默认的浏览器（建议使用谷歌浏览器），默认网址： 按f12打开开发者工具，模拟手机设备。 

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

1.2.3 构建android应用程序

1. 添加android平台

ionic cordova platform add android

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

2. 编译

ionic cordova build android

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

3. 运行

ionic cordova emulate android

或者

ionic cordova run

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

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

1.2.4 制作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模拟器中运行。