ionic2新手入门整理，搭建环境，建立demo，打包apk，热更新，优化启动慢等避坑详解

onic官方文档连接：http://ionicframework.com/docs/ 

若是是新的环境会有不少坑，主要是有墙，请仔细阅读每一个步骤

 

文档包含如下内容：

l  环境搭建

l  建立demo并调试运行

l  打包APK

l  添加支持热更新

l  优化启动慢问题

l  经常使用命令

 

 1.      环境搭建

须要安装如下软件和插件（Android）：

l  安装Node

l  配置cnpm  （使用淘宝镜像取代npm）

l  安装cordova和ionic2

l  安装JAVA JDK

l  安装Android SDK(在项目打包安卓app的时候会用到，前期在浏览器环境测试开发暂时用不到)

一、         安装node.js

登陆node.js官网 https://nodejs.org/en/download/，下载对应系统版本，注意一点ionic2的开发需求Node版本要大于v6，通常下载最新正式版。安装完成后，检测是否成功配置了Node，打开命令提示符：按下Win+R -> 输入"cmd" -> 输入命令 node -v，有显示版本号即表示安装成功。输入npm –v顺便查看npm是否安装成功以及版本号。Node 的环境会自动配置，安装完成就OK，无需手工配置。

 

二、         安装cnpm并配置npm国内镜像

经过淘宝镜像安装cnpm：

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

        须要注意一点就是cnpm 不支持 publish 命令。

 

配置npm国内镜像：

由于国内的网络环境缘由，在用npm下载安装各类包的时候常常会遇到没法正常下载的状况。因此咱们须要将npm指向淘宝镜像 。cmd中分步输入如下内容：

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

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

三、清空缓存：npm cache clean

最后查看一下npm配置列表是否已经指向淘宝镜像：npm config list

 

 

三、         用cnpm安装cordova和ionic2

先安装cordova：cnpm install –g cordova@6 （安装6.x版本，我用7.x版本给项目添加Android平台会报错，不知道是否是个例，没有作其余测试）。安装完成输入cordova –v查看版本号以及是否安装成功（第一次使用cordova命令时会跳出个选择问你是否打小报告，自行选择y或n，通常选y以协助官方对产品进行改进）。

而后安装ionic2：cnpm install –g ionic@2（安装2.x版本，目前官方已经升级到3.x）。这两个安装完成会显示All packages installed…字样。输入ionic –v查看版本号以及是否安装成功。

 

四、         安装JAVA JDK（无需配置环境）

官网下载最新版JDK：

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

下载完成，一路下一步就能够了，安装完成输入java –version看一下是否安装成功以及版本号。

 

 

五、         安装Android SDK并配置环境

官网下载SDK（下载连接，可复制到迅雷直接下载）：

https://dl.google.com/android/installer_r24.3.4-windows.exe

安装的时候复制一下安装路径，等下配置环境变量要用，或者能够自定义路径，个人装在 C:\Android\SDK  不要有中文目录，而后一路下一步。

 

 

最后点击Finish的时候会打开Android SDK Manager，这是下载相关工具用的，在刚才安装的SDK目录下也可直接打开SDK Manager.exe，若是遇到打不开的状况请用管理员运行。

如今开始选择下载须要用到的工具：

因为国内没法访问google服务器，因此这里也须要配置国内镜像： 

选择Tools - Options 打开设置界面

 

以下图分别填入mirrors.neusoft.edu.cn 端口80，并勾选 “Force https://... sources to be fetched using http://... ”，单击Close关闭

 

而后点击Packages –> Reload 从新加载一下：

 

下一步开始选择下载工具包：这里千万注意只勾选须要的，若是全选会下载二十几G的东西… ，注意ionic2.3.0已要求API25，因此选Android版本为Android 7.1.1（API25）这里面的SDK Platform。

先把全部的勾选去掉，而后按以下标红步骤操做便可 

 

 

 

静等安装完成…… 

附加：项目集成Crosswalk须要勾选Extras下的Android Support Repository和Google Repository不然会报错 
 

 

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

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

新建变量名：ANDROID_HOME         

变量值 ：C:\Android\SDK  （你刚才复制的sdk路径）

而后在path里添加(前面注意加一个分号)   
;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

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

配置完成点击肯定便可。

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

 

 2.      建立demo并调试运行

建立ionic2项目：

打开cmd，先cd到你须要存放项目的目录，因为墙的问题，这里咱们仍是要分步执行，否则会卡在下载的地方或者会报错

 

而后执行命令建立app目录：

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

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

 

而后cd到你的app目录下，执行 cnpm install

 

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

 

执行 ionic serve ，此时编译服务器打开，把原代码编译成网页代码保存在www目录下，并用浏览器打开该目录中的index。

 

在硬盘中找到yourAppName 目录里的src文件夹，这就是咱们主要的工做目录，用vscode或者webstorm打开这个文件夹就能够开始你的工程了。提示一点：这里的代码通过编译服务器编译后会生成www目录下的前端代码（未压缩），当你执行打包的时候，ionic会自动把www目录里的相关文件进行压缩并打包成对应的平台app。

 

关于更多src，请移步：

https://yanxiaodi.gitbooks.io/ionic2-guide/content/tutorial/%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.html

或者ionic 的官方文档

 

 

1. 3.      打包APK

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

 ionic platform add android

 

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

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

 

要注意若是项目添加了安卓平台，要打包成苹果平台的时候须要先把安卓平台删掉，在项目目录下执行命令：

cordova platform rm android或者ionic platform rm android

 

下方高能高能警惕：因为国内网络环境缘由，在执行打包命令前须要作一些处理，打包须要用到gradle 插件，直接执行打包命令比较大概率会下载不了或者下载超级慢或者各类报错，因此咱们要先下载好这个插件，作一些配置，而后再执行打包命令。

Gradle下载连接：https://services.gradle.org/distributions/

Ionic2项目要求好像都是2.14.1这个版本，下载2.14.1（建议复制到迅雷）：

 

下载完成不用解压，直接拷贝到你项目的下面这个路径：

 

..\yourAppName\platforms\android\gradle （新项目没有gradle文件夹，须要新建一个，名字不要错了）

 

而后修改配置： 在目录.. \yourAppName\platforms\android\cordova\lib\builders下找到下面这个文件，用你的代码编辑器打开：

 

 

找到第189行，把

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

修改成

../gradle-2.14.1-all.zip

 

改成：

 

保存关闭，回到cmd，在项目目录下执行ionic build android

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

打包完成后在项目的\platforms\android\build\outputs\apk路径下就能够找到一个打包好的apk了。此时www目录下的文件也已经被压缩好了

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

 

       生成签名并给app添加签名:

生成签名须要用到两个工具：keytool和jarsigner，这两个工具分别在在前面安装的C:\Program Files\Java\jdk1.8.0_131\jre\bin 和

C:\Program Files\Java\jdk1.8.0_131\bin （根据你安装java jdk的路径找）

把上两个软件所在的目录添加到环境变量path后，打开cmd输入，cd到你须要保存这个key的目录下：

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

说明：-genkey 产生密钥

    -alias demo.keystore 设置别名为demo.keystore（根据本身状况改）

 

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

    -validity 40000 有效期限4000天

   -keystore demo.keystore 设置签名文件名为demo.keystore（根据本身状况改）

执行命令后会要求你输入一堆东西，根据本身状况输入，注意两点：一、输入密码口令的时候是看不见的，尽管写就行，写完就回车，不过要记住这个密码，后面要用；二、最后让你确认信息的时候要输入“是”。完成后看一下相应目录下有没有签名文件。而后把该文件复制到你的项目中的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为打包签名

 

1. 4.      添加支持热更新

先安装热更新插件：

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/hotcodepush/www/chcp.json">

</chcp>

到此打包好APK安装到手机上。

 

查看是否实现热更新：

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

 

1. 5.      优化启动慢问题

手动控制splashscreen的关闭时间

1. 在config.xml文件中添加以下内容：      <preference name="AutoHideSplashScreen" value="false" />  

 <preference name="FadeSplashScreenDuration" value="1000" />  

 <preference name="SplashScreen" value="screen" />  

 <preference name="ShowSplashScreen" value="true" />  

 <preference name="ShowSplashScreenSpinner" value="false" />  

 <preference name="SplashShowOnlyFirstTime" value="false" />  

 <preference name="FadeSplashScreen" value="true" />  

 

1. 在app.component.ts中添加内容：

 platform.ready().then(() => {  

(<any>window).navigator.splashscreen.hide();

}  

注意：要在platform.ready()以后执行

1. 6.      经常使用命令

npm 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（开启服务调试） 

ionic g page yourPageName (快速建立新页面，页面名为yourPageName)