Ionic2 cordova angular2 打包到Android apk环境搭建
一、前言
前段时间,公司有个APP项目需要支持不同平台,于是采用了Ionic2 + cordova + angular2,在搭建环境过程中遇到了不少问题,刚好最近有时间整理出来。
二、开发环境搭建
参考这个网站步骤搭建:https://github.com/DonaldTdz/Ionic2QuickStart
注意:nodejs 要装6.0 +LTS最新版,不要装8.X的最新版本(https://nodejs.org/en/)

Cordova版本要安装6.X版本,目前cordova-android版本最高只能支持到6.X.X
cmd: cnpm install –g ionic cordova@6.x
cmd: ionic –v Cordova –v 查看显示版本号,安装成功


三、运行一个ionic种子项目
下载地址:https://github.com/DonaldTdz/ionic-seed
用vs code打开终端输入命令:cnpm install

Ionic serve 运行项目

Web端运行项目成功,开发环境搭建完成

下面我们开始打包到Android APP
四、Cordova打包Android平台环境搭建
参考官方说明:
(中文)http://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html
(英文)http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
注:中文网址信息不是最新,访问速度比较快,英文更新到最新,但访问速度较慢
1、安装Java SDK
Java开发工具包(JDK)
安装Java Development Kit (JDK) 7或者最新的。
当在Windows上安装的时候需要根据JDK路径设置JAVA_HOME环境变量(参见设置环境变量)

cmd:Java –version 显示版本号安装成功

Java SDK环境变量配置
JAVA_HOME 配置安装目录

Path配置:%JAVA_HOME%\bin

添加CLASSPATH : .;%JAVA_HOME%\lib; (注:如存在这个环境变量,需要检查)

2、安装Android SDK Tools
(注:如果需要添加cordova插件,建议安装Android Studio)
Android SDK
安装Android Stand-alone SDK或者Android Studio。如果你计划开发一个新的Cordova Android插件或者使用Android平台原生的工具去运行和调试,那么就使用Android Studio吧。否则,Android Stand-alone SDK Tools就足够构建和部署Android应用程序了。
详细的安装说明可以点击上面的安装链接查看。


3、添加Android SDK包
添加SDK包
在安装完Android SDK后,你需要安装任何你希望的目标API级别的SDK包。建议你安装cordova-android(参见上面)支持的最高级别的SDK包。
打开Android SDK Manager (例如,在终端上运行`android),并确保下面已经安装:
- 目标Android版本的Android Platform SDK
- Android SDK build-tools,版本19.1.0或者之上
- Android Support Repository (在"Extras"查找)
参见 Android文档安装SDK包获得详细内容。
先打开刚下载的项目终端运行:cordova platform ls 查看cordova android依赖的android SDK版本

对应下面列表依赖android API级别是16-25(http://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html)

然后下载对应的依赖包



安装成功后配置环境变量
ANDROID_HOME:
D:\Program Files\Android\android-sdk

Path:
D:\Program Files\Android\android-sdk\platform-tools
D:\Program Files\Android\android-sdk\tools

cmd:android –h 查看如下面表示安装成功

五、打包Android APP
1、 添加Android平台
Ionic cordova platform add android


2、依赖gradle修改到本地
原因是国外网站打包运行时很慢或导致失败,你懂的
下载地址:https://services.gradle.org/distributions/
(注:如下载慢用下载工具如迅雷)
下载版本选择,先搜索distributions/gradle

如下我们需要版本:gradle-2.14.1-all.zip,避免下错版本

下载完成不用解压,直接拷贝到你项目的下面这个路径:
\app\platforms\android\gradle(注:如不存在需要建一个,注意拼写错误)

打开刚搜索到的文件:\platforms\android\cordova\lib\builders\GradleBuilder.js
将原来的注释掉并修改为本地包../gradle-2.14.1-all.zip

3、 打包应用
ionic cordova build android

打包完成后会输出一个apk手机安装包文件

安装到手机运行成功!!

六、应用签名和启动优化
1、生成签名秘钥
签名一个应用
首先你应该阅读Android应用签名所需。
使用标志
签名一个应用,你需要下面参数:
| 参数 | 标志 | 描述 |
|---|---|---|
| Keystore | --keystore |
用来存储一组key的二进制文件路径 |
| Keystore Password | --storePassword |
keystore存储密钥 |
| Alias | --alias |
用来指定私有key用来签名 |
| Password | --password |
私有key的密码 |
| Keystore的类型 | --keystoreType |
默认: 自动检测基于文件扩展名 pkcs12或者jks |
这些参数可以通过上面的Cordova CLI build 或者 run命令来指定命令行参数。
注意: 你应该使用两个中划线 -- 来表示这些平台特定参数,例如:
cordova run android --release -- --keystore=../my-release-key.keystore --storePassword=password --alias=alias_name --password=password.
cmd 到目录:D:\projects\dev\tz\saas\app\platforms\android(android平台根目录)
cmd:keytool -genkey -alias tzky.keystore -keyalg RSA -validity 40000 -keystore tzky.keystore
根据输入提示完成输入,生成成功后刷新android平台根目录

2、签名应用并打包
cordova build android --release -- --keystore="..\tzky.keystore" --storePassword=xxxxx --alias=tzky.keystore
(注:自动生成打包配置文件release-signing.properties需要注意tzky.keystore的放置路径要匹配)
手动添加release-signing.properties文件并修改:

添加完成后直接运行:cordova build android –release


3、优化启动速度
ionic cordova build android --prod –release
(注意:需要代码优化,如果有错误,根据错误提示修改)
启动优化参考:http://blog.csdn.net/u010564430/article/details/61201769
在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" />
Ionic2 cordova angular2 打包到Android apk环境搭建的更多相关文章
- android 开发环境搭建 (转)
最近由于工作中要负责开发一款Android的App,之前都是做JavaWeb的开发,Android开发虽然有所了解,但是一直没有搭建开发环 境去学习,Android的更新速度比较快了,Android1 ...
- windows下cocos2dx3.0开发环境及Android编译环境搭建
cocos2dx更新到了3.x版本号,自己一直没有换,如今开发组要求统一换版本号,我就把搭建好开发环境的过程记录下来. 一.Windowns下开发环境搭建 1. 所需工具 1)coc ...
- Android #Android开发环境搭建
Android #Android开发环境搭建 1.下载:Google在国服的官网 https://developer.android.google.cn/index.html 1.点击首页 “ 获取 ...
- Qt for Android开发环境搭建及测试过程记录
最近学习了Qt的QML编程技术,感觉相较于以前的QtGUI来说更方便一些,使用QML可以将界面与业务逻辑解耦,便于开发. QML支持跨平台,包括支持Android平台,因此可以使用Qt的QML进行An ...
- 【转】Windows环境下Android NDK环境搭建
原文网址:http://www.metsky.com/archives/525.html 前面介绍Windows下Android 开发环境配置,主要是面向JAVA开发环境,对只做APK上层应用开发人员 ...
- Windows环境下Android NDK环境搭建
前面介绍Windows下Android 开发环境配置,主要是面向JAVA开发环境,对只做APK上层应用开发人员来讲,基本够用了,由于Linux系统的权限限制和Android封装架构限制,很多涉及底层设 ...
- QT 5.4.1 for Android Windows环境搭建
QT 5.4.1 for Android Windows环境搭建 2015-5-13 目录 一.参考文章: 二.准备软件: 三.安装准备好的软件: 四.配置Qt 5.4.1 for Android 五 ...
- 转---详细的Android开发环境搭建教程
五步搞定Android开发环境部署——非常详细的Android开发环境搭建教程 引言 在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立A ...
- 使用Kotlin开发Android应用 - 环境搭建 (1)
一. 在Android Studio上安装Kotlin插件 按快捷键Command+, -> 在Preferences界面找到Plugins -> 点击Browse repositorie ...
随机推荐
- SharePoint 路在何方?
听着老版<西游记>熟悉的片头曲,想着九寨沟取景的地点现在已然不在了,看着自己的现状,真是五味杂陈.从2010年至今,接触SharePoint已经是第七个年头了,不知不觉都已经成为习惯.从2 ...
- PHP命令空间namespace及use的用法实践总结
以下皆为本人自我理解内容,如有失误之处,请多多包涵. 文章大纲: 使用namespace的目的 namespace的使用方法 使用use的目的 use的使用方法 使用namespace的目的: 团队合 ...
- [特斯拉组件]ios高性能PageController
本文来自于腾讯Bugly公众号(weixinBugly),作者:sparrowchen,未经作者同意,请勿转载,原文地址: http://mp.weixin.qq.com/s/hBgvPBP12IQ1 ...
- jQuery操作input改变value属性值
今天写了一个表单元素,在用户点击的时候会清空input中的内容,当鼠标点击其他地方的时候会把输入的值保存为input的value值 类似于这样的效果 当用户点击的时候文字消失. html代码 < ...
- zanphp 初探----安装篇
安装 zanphp 的安装详细步骤具体在 http://zanphpdoc.zanphp.io/,但是安装的时候,还是踩了一些坑,Mac 和 Ubuntu 我都安装过, 分享大家注意一下. PHP 版 ...
- 找出共同好友 - 数据挖掘 - Scala版
大家好,关于“找出共同好友”的算法,网上有不少语言的实现,今天有空之余,自己研究了下Scala算法的写法 完整代码可以参考Git地址:https://github.com/benben7466/Spa ...
- Django contrib Comments 评论模块详解
老版本的Django中自带一个评论框架.但是从1.6版本后,该框架独立出去了,也就是本文的评论插件. 这个插件可给models附加评论,因此常被用于为博客文章.图片.书籍章节或其它任何东西添加评论. ...
- POJ-1273-Drainage Ditches 朴素增广路
Drainage Ditches Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 70588 Accepted: 2743 ...
- 深入理解javascript函数进阶系列第三篇——函数节流和函数防抖
前面的话 javascript中的函数大多数情况下都是由用户主动调用触发的,除非是函数本身的实现不合理,否则一般不会遇到跟性能相关的问题.但在一些少数情况下,函数的触发不是由用户直接控制的.在这些场景 ...
- Python函数篇(5)-装饰器及实例讲解
1.装饰器的概念 装饰器本质上就是一个函数,主要是为其他的函数添加附加的功能,装饰器的原则有以下两个: 装饰器不能修改被修饰函数的源代码 装饰器不能修改被修改函数的调用方式 装饰器可以简单的理 ...