主要流程:

安装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打包全过程教程的更多相关文章

  1. ionic学习笔记—创建项目

    环境搭建: 安装node.js  --> npm或cnpm   -->  安装jdk  -->  安装AndroidSDK  -->  安装cordova  -->  安 ...

  2. Cordova打包vue项目生成Apk (解决cordova build android抛出的zip问题)

    最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...

  3. (转)Ratchet教程:创建项目

    原文:http://www.w3cplus.com/mobile/how-to-create-mobile-project-width-ratchet.html Ratchet教程:创建项目      ...

  4. 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 ...

  5. 第一步 使用sencha touch cmd 4.0 创建项目、打包(加入全局变量、公用类、自定义扩展、资源文件)

    参考资料: http://www.cnblogs.com/qqloving/archive/2013/04/25/3043606.html http://www.admin10000.com/docu ...

  6. 原创:MVC 5 实例教程(MvcMovieStore 新概念版:mvc5.0,EF6.01) - 3、创建项目

    说明:MvcMovieStore项目已经发布上线,想了解最新版本功能请登录 MVC 影视(MvcMovie.cn) 进行查阅.如需转载,请注明出处:http://www.cnblogs.com/Dod ...

  7. Ionic3,安装,创建项目(一)

    Ionic3 简介:是一款html5的轻量级手机开发框架,基于angularjs.scss语法,ionic是一个轻量的手机UI库.并直接放弃了IOS 6和Android 4.1一下的版本支持. 安装: ...

  8. Vue-cli创建项目从单页面到多页面3-关于将打包后的项目文件不放在根目录下

    关于将打包后的项目文件不放在根目录下 有时候,我们总是需要这样的设置:希望将打包后的文件放在a.b.com/somepath/这样一个路径下. 然而在vue-cli创建的项目中,默认的打包路径中的静态 ...

  9. VUE:项目的创建、编写、打包及规范检查

    VUE:项目的创建.编写及打包 项目的创建 使用 vue-cli 创建模板项目(官方提供的脚手架工具) https://github.com/vuejs/vue-cli npm install -g ...

随机推荐

  1. js 将图片文件转换成base64

      1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...

  2. .NET 同步与异步 之 EventWaitHandle(Event通知) (十三)

    本随笔续接:.NET 同步与异步 之 Mutex (十二) 在前一篇我们已经提到过Mutex和本篇的主角们直接或间接继承自 WaitHandle: Mutex类,这个我们在上一篇已经讲过. Event ...

  3. mybatis插入一个对象后获取表中自增的主键Id并且传入到插入的的对象中,方便将对象中其他属性赋值给其他以前表主键Id作为非空字段的表

    原本的sql语句为: <insert id="xx" parameterType="com.hrt.partner.model.ShopInsert"&g ...

  4. 巧用Openlayers4的Style

    原文:https://blog.csdn.net/gisshixisheng/article/details/80149087 概述 非常细化Openlayers4中的StyleFunction,因为 ...

  5. 算法课笔记系列(七)—— 平摊分析Amortized Analysis

    本周的内容是Amortized Analysis,是对算法复杂度的另一种分析.它的基本概念是,给定一连串操作,大部分的操作是非常廉价的,有极少的操作可能非常昂贵,因此一个标准的最坏分析可能过于消极了. ...

  6. VNC Viewer 设置屏幕分辨率

    1.第一种方法:使用geometry参数进行调整 vncserver -geometry 1280x1024即可,之后通过window下vnc连接后的ubuntu分辨率即为1280x1024了,注意这 ...

  7. Effective Java 第三版笔记(目录)

    <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将近8年的时 ...

  8. c groups

    https://www.kernel.org/doc/Documentation/cgroup-v1/cgroups.txt https://developer.ibm.com/hadoop/2017 ...

  9. c++中的var_dump

    var_dump 在PHP中可以使用var_dump来输出变量,而且输出的内容很详细 用习惯后,再回来用c++的cout,各种不习惯,于是在github上找了一下,果然有类似的,而且是重载了 < ...

  10. textarea 分割

    var orderNo = $("#orderNo").val();var orderNo = orderNo.toString().split(/\r?\n/);