Ionic 编译 Helloworld 踩坑记录

malonely

2019-06-27

Ionic 是一个可以使用 Angular 开发混合模式手机 App 的框架。目前已经具有非常接近原生 App 的流畅度。唯一让人担心的是它对手机原生功能的支持程度，所以想逐步实际体验一下。但是，只编译一个 Helloworld 就让我吃了不少苦头。

创建项目

跟 Angular 一样，Ionic 的 CLI 让创建新项目变得非常简单。参照入门指引几分钟就可以创建一个 Helloworld 项目并启动 WebServer 进行测试了。

安装 Ionic：
```
npm install -g ionic
```
创建 Helloworld App
```
ionic start hello-world tabs
```
会问你：
Would you like to integrate your new app with Cordova to target native iOS and Android?
回答 y 后会执行
ionic integrations enable cordova --quiet
有的时候会很慢，可以中断执行，进入 hello-world 目录，执行 npm install 之后再执行 ionic integrations enable cordova
如果在公司内网需要配置代理服务器，可以执行：
```
ionic config set -g proxy http://<你的用户名>:<你的密码>@proxy.xxx.com:8080
```
查看代理服务器配置：
```
ionic config get -g proxy
```
运行 web 服务
```
cd hello-world
npm install
ionic serve
```
会自动创建 www 目录，开启浏览器浏览默认的 8100 端口。

以上几步很简单。不过我们最终是想要在手机上使用 app，还要继续编译 apk。

编译 APK

参考 Deploy Guide:

下载并安装 JDK. 注意必须安装 1.8 版本的 JDK！装最新版的 JDK 将导致其后编译的时候报错！添加环节变量“JAVA_HOME”指向“C:\Program Files\Java\jdk1.8.0_161”，并将“C:\Program Files\Java\jdk1.8.0_161\bin” 加入 PATH 环境变量。
下载并安装 Android Studio. 没有 VPN 的同学可以去安卓中文社区下载。
编译 apk
```
ionic cordova build android --prod --release
```
进行到下载 gradle-4.1-all.zip 这一步时会非常慢。解决方法是先将这个文件下载到本地，放置到本地的某个站点中，例如“http://localhost:18002/assets/gradle-4.1-all.zip”，然后添加名为“CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL”的环节变量，指向“http://localhost:18002/assets/gradle-4.1-all.zip”。编译成功后的 apk 在 hello-world\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk。这是未签名的 apk ，直接用它在手机上安装会报错，必须对其签名。

生成秘钥

keytool -genkey -v -keystore jing22-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias jing22

会询问秘钥库口令和秘钥口令，输入后记下别忘了。

对 apk 签名

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore "C:\projects\ionic\jing22-release-key.jks" "C:\projects\ionic\hello-world\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk" jing22

压缩 apk（可选）

"C:\Users\jcl\AppData\Local\Android\Sdk\build-tools\27.0.3\zipalign.exe" -v 4 "C:\projects\ionic\hello-world\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk" "C:\projects\ionic\hello-world\platforms\android\app\build\outputs\apk\release\hello-world.apk"

验证 apk（可选）

C:\Users\jcl\AppData\Local\Android\Sdk\build-tools\27.0.3\apksigner verify "C:\projects\ionic\hello-world\platforms\android\app\build\outputs\apk\release\hello-world.apk"

ionic localhost apk cordova