Ionic3+Angular5+Cordova搭建移动App详细教程（安卓）

发表于 | 分类于

安装

*操作系统：Windows10 64位
*IDE：WebStorm，Android Studio，由于没有mac设备，ios仅提供思路，具体请自行实践

安装node.js

去node.js官网下载安装，或者npm官网下载安装

打开控制台或者git bash

以下npm可换成cnpm，或者或使用淘宝镜像（临时使用）

1
npm --registry https://registry.npm.taobao.org install express

Angular5

1
2
安装：npm install -g @angular/cli
验证：ng -v

安装完成后输入ng -v验证

ionic和cordova

1
2
3
安装：npm install -g cordova ionic
验证ionic：ionic -v
验证cordova：cordova -v

JDK

去oracle官网下载所需jdk（Java SE）并安装

安装完成后将记得配置环境变量（这个教程应该不需要说了）
可将jdk下bin目录和jre下lib目录同时配置进去
配置完成后验证

1
验证：java -version 或 javac

Ant

去Ant官网下载解压包，
并将解压出的文件夹下bin目录和lib目录同时配置到环境变量

1
验证：ant -v

WebStorm，Android Studio

去IDEA官网下载WebStormWebStorm免费试用30天，
经济允许请购买正版，否则自己想办法或者找某宝

或者使用visual studio code

再去Android Studio中文社区下载安装Android Studio
安装好AS之后记得一定要打开Sdk Manager下载sdk，截止发这篇博客cordova最高支持到android 7.0.0
如果不知道要下载哪一个版本的sdk，可以先不急着下载，继续往下看

ios端由于我没有Mac无法测试，可以google或百度搜索ios的构建教程

创建ionic项目

找个位置新建一个文件夹并cd进入

控制台输入

1
ionic start HelloWorld tutorial

其中HelloWorld为项目名称

tutorial代表一套项目模板，包含侧滑菜单，列表等
可以替换为其他模板

比如 blank 空模板， tabs 带有三个底部tab的模板，sidemenu 包含侧滑菜单以及无限子目录的列表

创建过程会提示 Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N)，
意思是是否需要将项目整合到ios和android，输入y确认即可

之后还会提示 Install the free Ionic Pro SDK and connect your app? (Y/n)，
意思是是否安装Ionic pro SDK（ionic自家的类似git的项目管理套件） 来连接你的app，
这个根据需求自己随意选择，如果选择y的话，之后还会提示输入ionic的用户名密码，建议先注册一个，
之后还需要创建SHH密码，倒也不是很麻烦，只需要选择就行

项目创建完成后

可以用WebStorm或者visual studio code来打开项目，就是一个基于angular5框架的项目

可以从控制台进入项目根目录输入以下命令在浏览器预览

1
ionic serve

生成app（Android）

在项目根目录，控制台输入

1
cordova platform ls

可以查看可用的平台和已安装的平台

1
2
3
4
5
6
7
8
9
Installed platforms:
  
Available platforms:
  android 7.0.0
  browser ~5.0.1
  ios ~4.5.4
  osx ~4.0.1
  windows ~5.0.0
  www ^3.12.0

从以上信息中看出支持的android的支持版本是7.0.0，并且还未安装，
此时就应该回到Android Studio的Sdk Manager下载对应版本的Sdk
下载完成后再次查看

1
2
3
4
5
6
7
8
Installed platforms:
  android 7.0.0
Available platforms:
  browser ~5.0.1
  ios ~4.5.4
  osx ~4.0.1
  windows ~5.0.0
  www ^3.12.0

此时就已经安装了sdk，可以编译成android项目了

在项目根目录，控制台输入

1
2
ionic cordova platform add android
或者 cordova platform add android

执行完成后，根目录会多出一个platforms文件夹，里面有一个android文件夹，
里面已经生成了build.gradle文件，然后就可以通过Android Studio打开这个生成的项目了，
之后通过AS的来运行或者打包app即可

当更新了H5代码需要刷新app的代码时，在根目录下控制台执行

1
ionic build

之后platforms中的代码也会更新，AS中即可运行最新的app

另一种方式

直接在控制台输入

1
ionic cordova build android --prod

ionic cordova build android这一部分是打包app，–prod表示混淆，
可以有效减少安装包体积，提高运行效率

这种方式下打包签名apk

先打包一个未签名apk

1
ionic build --release android

然后生成签名文件

1
keytool -genkey -v -keystore my-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

之后控制台会提示输入签名信息，密码，和android studio上创建签名一样，

my-key.keystore这是签名文件名

alias_name这是别名

如果有签名文件可以省去这一步

然后对之前生成的未签名apk进行签名

1
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-key.keystore my-unsigned-app.apk alias_name

这里的签名文件和apk文件尽量使用绝对路径

最后，优化apk

进入sdk文件夹下build-tools文件夹内，选择对应版本文件夹进入，
例如 D:\Android\Sdk\build-tools\27.0.3
里面有一个zipalign.exe的可执行文件

执行命令

1
zipalign -v 4 my-unsigned-app.apk my-app.apk

my-unsigned-app.apk优化前的名称，注意该apk的路径

my-app.apk优化后的名称

完