可参考链接（仅参考）：

• ionic官方文档链接：http://ionicframework.com/docs/
• ionic2打包详解：https://segmentfault.com/a/1190000010194942
• ionic3打包详解：https://www.cnblogs.com/chenglu/p/8608121.html
• ionic3打包：https://blog.csdn.net/qq_20264891/article/details/79319408
• node.js安装教程：https://www.jianshu.com/p/03a76b2e7e00
• ionic博客：点我了解一下

我的环境版本：

• node.js: 8.12.0
• jdk: 1.8.0_181
• cordova:6.5.0
• ionic:2.0.0

相关软件：

连接：百度云连接

密钥：8083

主要流程:

安装node.js --> 安装jdk --> 安装AndroidSDK --> 安装cordova --> 安装ionic --> 创建项目 --> 编译项目apk

一、 软件安装

• 安装nodeJS（自带npm）
• 配置cnpm （使用淘宝镜像取代npm）
• 安装cordova和ionic2
• 安装JAVA JDK
• 安装Android SDK(在项目打包安卓app的时候会用到，前期在浏览器环境测试开发暂时用不到)

1、安装node.js

• 相关软件都在上面给的百度云链接中。如果要自己下载，可以去node.js官网 下载对应系统版本，注意一点ionic2的开发需求Node版本要大于v6，一般下载最新正式版。
• 安装完成后，检测是否成功配置了Node，打开命令提示符：按下Win+R -> 输入"cmd" -> 输入命令 node -v，有显示版本号即表示安装成功。输入npm –v检查安装版本。
• 在安装的node.js文件夹下新建node_cache和node_global文件夹。
• 创建完成后打开cmd，输入：

  npm config set prefix "你的node_global路径"
  npm config set cache "你的node_cache路径"

• 设置环境变量：在系统变量中，新建 --> 变量名为：NODE_PATH,变量值为：node_global下面的node_modules的绝对路径。在用户变量的path中添加node_global的绝对路径，主要前后的英文分号。

2、安装淘宝镜像cnpm

  npm install -g cnpm --registry=https://registry.npm.taobao.org
  
  需要注意一点就是cnpm 不支持 publish 命令。
  

配置npm国内镜像：

因为国内的网络环境原因，在用npm下载安装各种包的时候经常会遇到无法正常下载的情况。所以我们需要将npm指向淘宝镜像 。cmd中分步输入以下内容：

(1)、注册模块镜像：npm set registry https://registry.npm.taobao.org/

(2)、编译依赖的node的源码镜像：npm set distury https://npm.taobao.org/dist

(3)、清空缓存： npm
最后查看一下npm配置列表是否已经指向淘宝镜像：npm config list

3、用cnpm安装cordova和ionic2

    先安装 cordova：cnpm install -g cordova@6.5.0
    再安装 ionic: cnpm install -g ionic@2.0.0

注意：安装6.x版本，我用7.x版本给项目添加Android平台会报错，不知道是不是个例，没有做其他测试）。安装完成输入cordova –v查看版本号以及是否安装成功（第一次使用cordova命令时会跳出个选择问你是否打小报告，自行选择y或n，一般选y以协助官方对产品进行改进）。
这两个安装完成会显示All packages installed…字样。输入ionic –v查看版本号以及是否安装成功。

4、 安装JAVA JDK

同样的百度云网盘中有或JDK官网下载。下载完成，一路下一步就可以了，安装完成输入java –version看一下是否安装成功以及版本号。安装路径最好建一个文件夹，和等会的sdk放在一起，方便找。注意，路径中不能有中文。

这里也是需要配环境变量的，想知道配成功没有，可以在cmd命令窗口输入 javac -v，如果说命令不存在，则没有配置成功

• 系统变量下
• JAVA_HOME 你的jdk安装的位置（D:\Work\Develop\java\jdk1.8.0_181）
• classpath .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar 2 ----千万别少了前面那个点
• path的后面添加上面jdk路径加上的/bin，前面记得没有分号的加一个分号（D:\Work\Develop\java\jdk1.8.0_181\bin）

5、安装SDK（需要配环境变量）

• 同样的百度云网盘中有或SDK官网下载。最后点击Finish的时候会打开Android SDK Manager，这是下载相关工具用的，在刚才安装的SDK目录下也可直接打开SDK Manager.exe，如果遇到打不开的情况请用管理员运行。
• 翻墙安装插件
  打开界面上的Tools,选择options，先配置国内镜像：
  域名千万不要输入http或者https协议前缀，
  mirrors.neusoft.edu.cn

1.png

回到主界面，点packages再点reload
按照下面的勾选（Android SDK Tools,Android SDK platform-tools,Android SDK Build-tools）：

2.png

3.png

注意：ionic2.3.0已要求API25，所以选Android版本为Android 7.1.1（API25）这里面的SDK Platform。

附加：项目集成Crosswalk需要勾选Extras下的Android Support Repository和Google Repository否则会报错

点右下角 install packages 来安装，耐心等待即可。

• 安装完成后开始配置安卓环境变量：

我的电脑 –> 右键属性 -> 高级系统设置 -> 环境变量 -> 系统环境变量

新建变量名：ANDROID_HOME

变量值 ：你的sdk安装的路径

然后在系统变量path里添加(前面注意加一个分号)
;%ANDROID_HOME%platform-tools;%ANDROID_HOME%tools

Win10的话就分两条新建，不需要分号。

配置完成点击确定即可。

最后在cmd里输入android -h看到正常显示安卓的命令就表示已经安装配置成功

二、创建demo

<1>、

cd到要放置app的目录下，执行：

ionic start yourAppName tutorial --v2 --skip-npm

这里yourAppName就是你的项目名；tutorial为ionic预定义的一个模板，这个是侧边滑出列表的模板，还有一个就是tabs模板（默认），这个是页面底部有一个tab可以切换的模板，还有一个空白模板blank；--v2为ionic2，不写默认为ionic1；--skip-npm表示跳过npm安装。过程会让你选择是否创建帐号来分享和测试项目，选择n然后回车。

<2>、

然后cd到你的app目录下，执行

cnpm install

看到All packages installed 就表示项目已经创建完成。

<3>、

执行 ionic serve ，此时编译服务器打开，把原代码编译成网页代码保存在www目录下，并用浏览器打开该目录中的index。一般会自动打开网页，并显示相关页面内容

• 打包APK，cd到项目的目录下，首先要执行的是给项目添加对应的打包平台（Android或IOS）

  ionic platform add android
  添加完平台后项目目录下会有platforms文件夹

4.png

可通过命令 cordova platform ls 显示已经安装的平台项目以及可安装的平台

要注意如果项目添加了安卓平台，要打包成苹果平台的时候需要先把安卓平台删掉，在项目目录下执行命令：
cordova platform rm android或者ionic platform rm android

<4>、

下方高能高能警戒：由于国内网络环境原因，在执行打包命令前需要做一些处理，打包需要用到gradle 插件，直接执行打包命令比较大几率会下载不了或者下载超级慢或者各种报错，所以我们要先下载好这个插件，做一些配置，然后再执行打包命令。
Gradle下载地址,我的百度云链接里已经有了。下载的话要下载2.14.1版本的。
下载完不用解压，直接放到下图的文件夹里：

5.png

注意：新项目没有gradle这个文件夹，需要新建一个，文件名不要写错。

<5>、

修改配置
找到下面路径下的 GradleBuilder.js文件

6.png

用代码编辑器打开 GradleBuilder.js：

将：

https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

改为：

../gradle-2.14.1-all.zip

如下图：

将：

7.png

改为：

8.png

保存，关闭。

<6>、Build

如果之前有过安卓工程的,然后复制一份代码出来的,需要执行如下几个操作:
首先删除项目目录下的node_modules
再执行:npm cache clean
最后执行:npm install

如果出现缺少module什么的,只需在安装sdk的位置找到SDK Manager,安装加载报错中提到缺少的sdk即可.

回到项目目录下，执行 ionic build android

现在没有设置签名文件，所以打包出来的是不带签名的，调试可以用这个方式打包。首次打包会下载一大堆东西，大概需要一到两个小时（运气好网络通畅会快些），所以耐心等待，尽量不要中途关闭重来，容易出错。

打包完成后在项目的platformsandroidbuildoutputsapk路径下就可以找到一个打包好的apk了。此时www目录下的文件也已经被压缩好了。

9.png

IOS平台的打包类似，但是需要在苹果系统下用xcode来打包，需要安装到苹果手机还要申请签名什么的，稍微麻烦些。

关于app的启动页面，需要注意如下几点

• 1、把项目下的一个叫resources的文件夹中的内容删除，替换成自己的图片
• 2、图片分为两个，icon是显示在桌面的图标,splash是启动app时的启动页面
• 3、这里的一个巨坑是这两个图片的大小一定是按照规格来的，不仅尺寸大小，占容量大小也要注意。
  • icon.png:最小尺寸为192192 （最好是10241024的)
    不带圆角
    格式为 png、psd、ai
  • splash:最小尺寸为22082208
    中间尺寸（因为涉及到缩放和裁剪，边缘可能需要留白，不要放置内容） 12001200
    格式为 png、psd、ai
• 4、项目目录下执行ionic resources，即可自动生成
• 5、在config.xml中的 SplashScreenDelay 的 value 值是启动时页面的时间，2000表示2秒

<7>、生成签名，并给app添加签名

如遇到问题,请移步签名详细文章

生成签名需要用到两个工具：keytool和jarsigner，这两个工具分别在在前面安装的Javajdk1.8.0_131jre\bin和Javajdk1.8.0_131bin。把上两个软件所在的目录添加到环境变量path后，打开cmd输入，cd到你需要保存这个key的目录下（jdk的bin目录），执行：

   keytool -genkey -alias demo.keystore -keyalg RSA -validity 40000 -keystore demo.keystore
   

说明：
demo是所取的名称，自定义。

-genkey 产生密钥

-keystore demo.keystore 证书的文件名

-alias demo.keystore证书的别名

-keyalg RSA 使用RSA算法对签名加密

-validity 20000该数字证书的有效期

10.png

执行命令后会要求你输入一堆东西，根据自己情况输入，注意两点：1、输入密码口令的时候是看不见的，尽管写就行，写完就回车，不过要记住这个密码，后面要用；2、最后让你确认信息的时候要输入“是”。

完成后看一下相应目录下有没有签名文件。然后把该文件复制到你的项目中的platforms/android目录下，并且新建一个文件release-signing.properties。用记事本打开，写入以下内容：

 storeFile=签名文件包括路径（这里用相对路径即可）

 key.store.password=签名文件密码

 key.alias=签名文件的别名

 key.alias.password=别名密码

把密码写在文件里可以方便操作，但是会暴露了你的密码！正式开发尽量不要把两个密码写在文件里！

做完之后就可以打包正式签名的Android apk了：

在项目目录下执行 ionic build android --prod --release

说明：--prod 为ionic提供的一种打包方式，可以加快app开启速度，--release为打包签名

至此，一个app就打包好了。

下面的内容可先了解一下：

• 添加支持热更新

先安装热更新插件：cnpm install -g cordova-hot-code-push-cli

cd到项目目录下给项目添加插件：ionic plugin add cordova-hot-code-push-plugin

执行：cordova-hcp server

会在www文件夹中生成 两个文件：chcp.json和chcp.manifest，chcp.json文件主要是插件的配置信息，chcp.manifest文件则是www目录下各文件的hash值参照表。

在App根目录下面新建文件cordova-hcp.json，内容如下：

  {
  
  "autogenerated": true,
  
  "content_url": "http://www.yourserver.com/hotcodepush/www",
  
  "update": "start"
  
  }
  

注意：这里的http://www.yourserver.com...均指你的存放热更新文件的服务器地址！

将www目录下的.chcpenv文件修改为你的服务器：

  {
  
  "content_url": "http://www.yoursever.com/hotcodepush/www",
  
  "config_url": "http://www.yourserve.com/hotcodepush/www/chcp.json"
  
  }

在config.xml文件<widget>标签中添加：

    <chcp>
    
    <local-development enabled="true"/>
    
    <config-file url="http://www.yourserve.com/hotc...
    
    </chcp>
    

查看是否实现热更新：

修改src里的内容，然后重新编译；编译后打包apk或者执行ionic run android把www里面的代码压缩之后，再执行cordova-hcp build，然后把www目录复制到你的服务器上，退出APK再打开，看看后台做的修改是否在apk里跟着改变了。（也可以直接修改www目录下的文件内容，主要是修改main.js里的东西然后执行cordova-hcp build，再把www复制到服务器看看修改效果。

三、ionic一些常用命令：

install -g cnpm --registry=https://registry.npm.taobao.org（npm镜像源指向淘宝）

cnpm install -g cordova@6 ionic@2（安装cordova 6.x和 ionic 2.x）

cnpm install -g cordova ionic（安装最新版cordova ionic）

cnpm update -g cordova ionic（更新cordova ionic）

ionic -help（查看帮助）

ionic -v（查看版本）

cordova -v （查看版本）

ionic start yourAppName tutorial --v2 --skip-npm（创建项目并跳过npm安装使用cnpm安装步骤1）

cnpm install（创建项目并跳过npm安装使用cnpm安装步骤2）

ionic start myApp blank –-v2（空项目）

ionic start myApp tabs –-v2（带导航条）

ionic start myApp tutorial –-v2（带侧滑菜单）

ionic platform add android（添加android平台）

ionic platform rm android（移除android平台）

cordova platform ls（查看项目已安装平台）

ionic build android（编译项目apk）

ionic build android -–prod –-release （用--prod编译项目apk并签名）

ionic emulate android（运行项目apk 手机连接在手机运行 模拟器连接在模拟器运行）

ionic run android （相当于build + emulate）

ionic serve（开启服务调试）