Ionic 编译 Helloworld 踩坑记录

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

创建项目

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

  1. 安装 Ionic:

    npm install -g ionic
  2. 创建 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
  3. 运行 web 服务

    cd hello-world
    npm install
    ionic serve

    会自动创建 www 目录,开启浏览器浏览默认的 8100 端口。

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

编译 APK

参考 Deploy Guide:

  1. 下载并安装 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 环境变量。
  2. 下载并安装 Android Studio. 没有 VPN 的同学可以去安卓中文社区下载。
  3. 编译 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 ,直接用它在手机上安装会报错,必须对其签名。

  4. 生成秘钥

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

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

  5. 对 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
  6. 压缩 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"
  7. 验证 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"
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值