https://www.cnblogs.com/chenglu/p/8608121.html
主要流程:
安装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
分享到:
相关推荐
Ionic 3从创建项目到打包APK的完整过程 Ionic 3是目前最流行的混合App开发框架之一,本文档将指导您从创建Ionic 3项目到打包APK的完整过程。 一、安装 Node.js Node.js是Ionic 3的必须组件,需要安装Node.js来...
通过观看"ionic打包app视频教程3小讲",你可以学习到整个打包流程的详细步骤。 首先,让我们了解 Ionic 应用的基本结构。一个基本的Ionic项目通常包含`src`目录,其中存放着应用的源代码,包括HTML、CSS和...
在本文中,我们将深入探讨基于Ionic 3的项目基础模板,这是一个用于快速搭建移动应用的框架,特别适合构建跨平台的原生应用。Ionic 3是Ionic框架的一个版本,它利用Angular作为其核心,提供了丰富的UI组件和工具,...
"Ionic 1 项目在 Windows 下的创建、Android 平台添加和插件安装方法" Ionic 1 是一个功能强大的 HTML5 应用程序开发框架,能够帮助开发者使用 Web 技术,如 HTML、CSS 和 Javascript,构建接近原生体验的移动应用...
总结来说,"Ionic开源项目教程"涵盖了从搭建开发环境、创建项目、使用组件、获取和展示数据、优化性能到打包发布等多个环节。通过这个教程,你将具备开发新闻阅读应用的能力,并能进一步探索Ionic和Angular在移动...
ionic3详细使用教程.zip ionic3插件 ionic3遇到的问题 安装解压gradle的问题最后就报错 白屏 成功打出了第一个debug包后,竟然发现run不成功 打包一直报错 真机调试 ionic3环境变量 prod时间过长 生成发布apk 优化...
本资源包包含:图书借阅app的vue源码、图书管理系统springboot后台server源码(该后台基于springboot+mysql+jpa+mybatis技术)、nvm(nodejs管理工具)、nodejs、jdk1.8、打包后的apk(可以直接装在手机上)以及...
### Ionic安装打包调试知识点 ...以上步骤详细介绍了Ionic项目的环境搭建、编译打包、APK签名以及调试过程中的关键操作和技术细节。遵循这些指南可以帮助开发者顺利完成Ionic项目的开发和测试工作。
"Ionic3项目总结" Ionic3项目是一种使用Angular2框架和Ionic框架开发的移动应用程序。 Ionic3项目开发需要注意一些问题和解决方法,下面是其中的一些知识点: 1. 页面跳转 在Ionic3项目中,页面跳转可以通过...
在这个项目中,我们可以看到Ionic3的依赖以及可能的其他插件和工具,例如Angular、RxJS等。`tsconfig.json`是TypeScript的配置文件,定义了编译选项,如目标语言版本、模块系统等。`tslint.json`则用于TypeScript...
"tutorial" 文件夹可能包含了 Ionic 3 的官方教程示例,这些示例通常涵盖从创建新项目到实现特定功能的完整过程。通过学习和实践这些教程,开发者可以逐步掌握 Ionic 3 的核心概念和最佳实践。 **调试和测试** ...
为了帮助这部分用户顺利进行学习和开发,这个压缩包提供了一个名为“super”的项目,它包含了 Ionic3 官方Demo的所有代码和配置,用户可以直接下载并运行,无需担心因网络问题而中断学习过程。 【知识点】: 1. **...
当Ionic项目与Cordova结合时,可以将Web应用打包为原生的iOS、Android或Windows应用。 **3. Ionic与Cordova的结合** 在“ddcanzuo”项目中,我们看到这两个技术的结合。通过Cordova,开发者可以利用Ionic构建的...
在开发基于Ionic 3的应用程序时,遇到真机启动白屏的问题是常见的困扰。这个问题通常是由于多种原因导致的,如JavaScript加载延迟、Webview不兼容、配置错误等。本篇文章将深入探讨这个问题,并提供一系列解决方案,...
**Ionic 3 项目详解** 本文将深入探讨 Ionic 3 框架,以及如何在自己的项目中使用和运行一个基于 Ionic 3 的代码库。Ionic 是一款流行的开源框架,用于构建跨平台的移动应用程序,它基于 AngularJS 和 Apache ...
通过分析这些源码,开发者可以学习到如何将IONIC的UI组件和交互与PhoneGap的本地功能结合,创建一个功能完备的混合移动应用。 【文件名称列表】 1. "深入浅出 phonegap 代码.zip" - 这个文件可能是关于PhoneGap的...
标题"ionic3自定义cordova插件"意味着我们将探讨如何为`Ionic 3`项目创建和集成自定义的`Cordova`插件。自定义插件是为了扩展`Cordova`的内置功能,满足特定项目需求,如访问硬件特性或与操作系统更深入交互。 **...
这个问题通常出现在Ionic 3到Ionic 4的升级过程中,由于官方API和工具的调整,导致旧有的命令行创建项目的方式不再适用。本文将深入探讨这个问题的原因,并提供一套详尽的解决方案。 首先,理解问题的根源至关重要...