ionic3 创建项目至apk打包全过程教程
主要流程:
安装node.js --> 安装jdk --> 安装AndroidSDK --> 安装cordova --> 安装ionic --> 创建项目 --> 编译项目apk
一、安装nodejs
不要安装最新版。
不建议更改安装路径。
网盘地址:
链接: https://pan.baidu.com/s/1Q5_nAhaJq6Ahw5DqSIzxXA 密码: 2sy7
查看nodejs版本:
node -v
查看npm版本:
npm -v
安装淘宝镜像 :
npm install -g cnpm --registry=https://registry.npm.taobao.org
查看cnpm版本:
cnpm -v
二、安装jdk(无需配置环境变量)
不建议更改安装路径。
网盘地址:
链接: https://pan.baidu.com/s/1Q5_nAhaJq6Ahw5DqSIzxXA 密码: 2sy7
查看版本:
java -version
三、安装sdk(需要配置环境变量)
网盘地址:
链接: https://pan.baidu.com/s/1Q5_nAhaJq6Ahw5DqSIzxXA 密码: 2sy7
右键X解压
重命名为sdk
跟jdk放在一个父目录,便于查找。C:\Program Files\sdk
配置环境变量
计算机——右键属性——-高级系统设置——-环境变量
在系统变量中新建:
变量名:ANDROID_HOME
变量值:C:\Program Files\sdk
在Path变量中将
;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools
添加到变量值最后(注意前面有分号)
检查配置是否正确:
android -h
执行命令就代表安装无误。

SDK Manager.exe工具
打开界面上的Tools,选择options,先配置国内镜像:
域名千万不要输入http或者https协议前缀
mirrors.neusoft.edu.cn

回到主界面,点packages再点reload
按照下面图片进行勾选:


点右下角 install packages 来安装,耐心等待即可。
四、安装cordova
cmd执行:
cnpm install -g cordova@6
查看版本:
cordova -v
五、安装ionic
cmd执行:
cnpm install -g ionic@3.12.0
查看版本:
ionic -v
六、创建ionic项目
创建
cd到要放置app的目录下,执行:
ionic start myapp tabs --skip-npm
解释:
myapp:项目名称(自定义)
tabs:ionic模板,还有blank
--skip-npm:跳过npm安装

cd到app目录补全文件
执行:
cnpm i

cd到app目录运行项目
执行:
ionic serve
如果出现 localhost,有几个localhost就输入几

七、添加平台
cd 到app目录下,执行
ionic cordova platform add android

添加完平台后app目录下会多了一个 platforms 文件夹

八、下载gradle插件
打开:http://services.gradle.org/distributions/
选择 gradle-2.14.1-all.zip
或者
网盘地址:
链接: https://pan.baidu.com/s/1Q5_nAhaJq6Ahw5DqSIzxXA 密码: 2sy7
下载完不用解压,直接拷贝到项目文件下的这个文件下:

注意:新项目没有gradle这个文件夹,需要新建一个,文件名不要写错。
修改配置:
找到下面路径下的 GradleBuilder.js文件

用代码编辑器打开 GradleBuilder.js:
将:
'https\\://services.gradle.org/distributions/gradle-2.14.1-all.zip'
改为:
'../gradle-2.14.1-all.zip'
如下图:
将:

改为:

保存关闭。
九、打包
cd到app目录下,执行:
ionic cordova build android


打的apk包在画红线那个路径下面。将apk文件发送到手机就可以安装了。
十、APK签名
此时你已经有了debug的包,这个包是用来进行本地开发测试使用的,这个apk包是有签名的,所以他能被安装到手机上,但是这个包不能用来上架。所以我们要执行下面的命令,用来生成一个没有签名的apk包。
ionic cordova build android –release


签名步骤:
1、生成签名(.keystore)文件
打开cmd,cd到jdk的bin目录,执行:
keytool -genkey -v -keystore cl.keystore -alias cl.keystore -keyalg RSA -validity 20000
说明:
-genkey 产生密钥
-keystore cl.keystore 证书的文件名
-alias cl.keystore证书的别名
-keyalg RSA 使用RSA算法对签名加密
-validity 20000该数字证书的有效期

2、签名apk
把将要签名的apk放在jdk文件bin目录下,cmd执行:
jarsigner -verbose -digestalg SHA1 -sigalg MD5withRSA -tsa http://sha256timestamp.ws.symantec.com/sha256/timestamp -keystore cl.keystore -signedjar icl.apk android-release-unsigned.apk cl.keystore
说明:
jarsigne 是工具名称
-verbose 表示将签名过程中的详细信息打印出来
-digestalg SHA1 -sigalg MD5withRSA -tsa http://sha256timestamp.ws.symantec.com/sha256/timestamp 时间戳
-keystore cl.keystore 之前生成的证书
-signedjar icl.apk 签名后的apk
android-release-unsigned.apk 需要签名的apk
cl.keystore 证书的别名


这样签名完成的apk就可以上架了。
至此,一个app项目从创建到打包已经完成。
十一、可能发生的错误
1、打包时出现的问题:

解决方法:
进入SDK Manager.exe,安装SDK Platform API25
再执行一次打包命令:
ionic cordova build android
欢迎交流~http://www.cnblogs.com/chenglu/
ionic3 创建项目至apk打包全过程教程的更多相关文章
- ionic学习笔记—创建项目
环境搭建: 安装node.js --> npm或cnpm --> 安装jdk --> 安装AndroidSDK --> 安装cordova --> 安 ...
- Cordova打包vue项目生成Apk (解决cordova build android抛出的zip问题)
最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...
- (转)Ratchet教程:创建项目
原文:http://www.w3cplus.com/mobile/how-to-create-mobile-project-width-ratchet.html Ratchet教程:创建项目 ...
- cocos2d-x 2.1.4 使用create_project.py脚本创建项目+ant打包项目
1.创建项目:执行create_project.py脚本,进入Doc界面输入下面的命令: cd D:\cocos2d-x-2.1.4\cocos2d-x-2.1.4\tools\project-cre ...
- 第一步 使用sencha touch cmd 4.0 创建项目、打包(加入全局变量、公用类、自定义扩展、资源文件)
参考资料: http://www.cnblogs.com/qqloving/archive/2013/04/25/3043606.html http://www.admin10000.com/docu ...
- 原创:MVC 5 实例教程(MvcMovieStore 新概念版:mvc5.0,EF6.01) - 3、创建项目
说明:MvcMovieStore项目已经发布上线,想了解最新版本功能请登录 MVC 影视(MvcMovie.cn) 进行查阅.如需转载,请注明出处:http://www.cnblogs.com/Dod ...
- Ionic3,安装,创建项目(一)
Ionic3 简介:是一款html5的轻量级手机开发框架,基于angularjs.scss语法,ionic是一个轻量的手机UI库.并直接放弃了IOS 6和Android 4.1一下的版本支持. 安装: ...
- Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下
关于将打包后的项目文件不放在根目录下 有时候,我们总是需要这样的设置:希望将打包后的文件放在a.b.com/somepath/这样一个路径下. 然而在vue-cli创建的项目中,默认的打包路径中的静态 ...
- VUE:项目的创建、编写、打包及规范检查
VUE:项目的创建.编写及打包 项目的创建 使用 vue-cli 创建模板项目(官方提供的脚手架工具) https://github.com/vuejs/vue-cli npm install -g ...
随机推荐
- Docker Mongo数据库开启用户认证
一.启动mongo容器的几种方式 #简化版 docker run --name mongo1 -p 21117:27017 -d mongo --noprealloc --smallfiles #自定 ...
- 关于现在互联网是否还有机会类的价值文章,为什么有人掉进互联网创业的坑里,可能因为ta不懂这些
--也是带着问题看这篇文章的,面临BAT时代的互联网创业者如何带领自己的公司存活成长,本文有些理念很有意思,前辈企业家是抓住机会干企业,现代化是发现问题最先解决干企业,最难的.同仁意愿不强的大问题才 ...
- 20151224今天发现到的两篇关于CSS架构、可复用可维护CSS和CSS学习提升能有改变思想观念意识的文章 分别是CSS架构目标和说说CSS学习中的瓶颈
多讲一个,CSS全称是什么?CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术 ...
- java 定时任务之一 @Scheduled注解(第一种方法)
使用spring @Scheduled注解执行定时任务: 运行!!! 关于Cron表达式(转载) 表达式网站生成: http://cron.qqe2.com/ 直接点击 作者:http://blog ...
- c#中@标志的作用 C#通过序列化实现深表复制 细说并发编程-TPL 大数据量下DataTable To List效率对比 【转载】C#工具类:实现文件操作File的工具类 异步多线程 Async .net 多线程 Thread ThreadPool Task .Net 反射学习
c#中@标志的作用 参考微软官方文档-特殊字符@,地址 https://docs.microsoft.com/zh-cn/dotnet/csharp/language-reference/toke ...
- Control group namespaces
https://www.toptal.com/linux/separation-anxiety-isolating-your-system-with-linux-namespaces https:// ...
- maven私服不能重复部署解决
1.报错 Return code is: 400, ReasonPhrase: Repository does not allow updating assets: maven-releases. 2 ...
- Golang学习教程
字节跳动已经全线从Python转Golang了,可能开始学习Golang这门语言会觉得无所适从,和Java,C++,Python等都不大一样,但是用多了会发现这门语言设计的还是很优雅的,下面总结Gol ...
- php curl post josn + header
<meta charset="utf8"> <?php ini_set("max_execution_time",1800000); $arr ...
- IIS 配置详解 请求长度限制调整
当上传一个超过30M的文件时,服务器会重定向至404.13页面,报错如下: HTTP Error 404.13 - Not Found The request filtering module is ...