Ionic环境搭建

一、配置Java环境

1、安装jdk，并配置相关环境变量，具体操作方法如下：

       右击“计算机”-“属性”，选择“高级系统设置”打开系统属性框，选择环境变量，在“系统变量”框中选择JAVA_HOME，将其设置为jdk的安装目录（例如：C:\Program Files\Java\jdk1.8.0_102），再向Path变量中添加“%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin”即可。

       对于环境变量是否设置成功，我们可以在CMD中，直接键入java或者javac，如果返回一下结果，则说明配置正确。

测试Java环境是否已经正确安装

2、下载Android IDE或者Java IDE，并且配置好环境变量，具体操作方法如下：

       （1）方法：打开环境变量设置窗口，在系统变量中新建Android_Home变量，设置其为Android SDK的安装目录（如：D:\android-sdk-windows），再向Path变量中添加“%Android_Home%tools;%Android_Home %\platform-tools”。
       （2）方法：可以通过CMD命令行设置环境变量，如：set Android_Home=D:\android-sdk-windows，这样既可成功。此时，只要下载合适的Android SDK版本，既可进行ionic本地打包了。

二、下载配置Android SDK

       1、下载Android SDK Manager，直接运行。从里面直接选择需要的package，点击下载。完成之后，如果找寻不到下载的路径，请看程序面板中应该有一个SDK Path，如下图：

SDK配置示意图

       2、设置环境变量，设置完成之后

三、工程化ionic项目

1、安装Cordova和ionic

       Window 和 Linux 上打开命令行工具执行以下命令：

$ npm install -g cordova ionic

       Mac 系统上使用以下命令：

sudo npm install -g cordova ionic

       如果你已有上述环境，可以执行以下命令来执行环境更新：

$ npm update -g cordova ionic

2、创建应用

       使用ionic官方提供的现成的应用程序模板，或一个空白的项目创建一个ionic应用：

$ ionic start myApp tabs
$ cd myApp
$ ionic platform add android/ios
$ ionic build android/ios
$ ionic emulate android/ios

APP在浏览器环境下运行效果图

四、window本地打包

1、准备应用程序图标和程序启动页面，分别命名为iocn.和splash.，尺寸分别是10241024和22082208，大小保持在100K以内。

格式可以是ai、psd、png;
图片尺寸：icon.建议大小是：10241024；splash.建议大小是：22082208；
图片大小：icon.和splash.建议保持在100KB以内，否则容易出现打包不能通过的状况。

icon图标尺寸：3636、4848、7272、9696、144144、192192
splash图片尺寸：200320、320480、480800、7201280、9601600、12801980

2、准备应用程序图标和程序

       如果在项目目录中没有resource文件夹，则执行ioinc build android/ios命令，执行后会自动生成resource文件夹。如果项目中已有该文件夹，则可以忽略这一步；
将步骤1中准备好的2个文件放入resource文件夹中，然后在命令窗口执行ionic resources命令，执行完成之后，便会自动生成各种图标文件和启动图片。
       仔细查看项目目录，可以看到resources文件夹下多出了android或者ios文件夹，而在android或者io文件夹下拥有icon和splash文件夹，则说明这一部执行成功。最终结果如下图所示：

应用程序图标文件夹创建成功示意图

3、执行ionic build android --debug命令就可以体验Windows环境下打包了。