`
男人50
  • 浏览: 237384 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

ionic3 创建项目至apk打包全过程教程

 
阅读更多
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

分享到:
评论

相关推荐

    ionic3从创建项目到打包apk.docx

    Ionic 3从创建项目到打包APK的完整过程 Ionic 3是目前最流行的混合App开发框架之一,本文档将指导您从创建Ionic 3项目到打包APK的完整过程。 一、安装 Node.js Node.js是Ionic 3的必须组件,需要安装Node.js来...

    ionic打包app视频教程3小讲

    通过观看"ionic打包app视频教程3小讲",你可以学习到整个打包流程的详细步骤。 首先,让我们了解 Ionic 应用的基本结构。一个基本的Ionic项目通常包含`src`目录,其中存放着应用的源代码,包括HTML、CSS和...

    基于ionic3的项目基础模板

    在本文中,我们将深入探讨基于Ionic 3的项目基础模板,这是一个用于快速搭建移动应用的框架,特别适合构建跨平台的原生应用。Ionic 3是Ionic框架的一个版本,它利用Angular作为其核心,提供了丰富的UI组件和工具,...

    windows 下 ionic3 创建ionic1 项目 并添加android 平台 附添加插件的方法

    "Ionic 1 项目在 Windows 下的创建、Android 平台添加和插件安装方法" Ionic 1 是一个功能强大的 HTML5 应用程序开发框架,能够帮助开发者使用 Web 技术,如 HTML、CSS 和 Javascript,构建接近原生体验的移动应用...

    ionic开源项目教程

    总结来说,"Ionic开源项目教程"涵盖了从搭建开发环境、创建项目、使用组件、获取和展示数据、优化性能到打包发布等多个环节。通过这个教程,你将具备开发新闻阅读应用的能力,并能进一步探索Ionic和Angular在移动...

    ionic3详细使用教程.zip

    ionic3详细使用教程.zip ionic3插件 ionic3遇到的问题 安装解压gradle的问题最后就报错 白屏 成功打出了第一个debug包后,竟然发现run不成功 打包一直报错 真机调试 ionic3环境变量 prod时间过长 生成发布apk 优化...

    基于vue3+ionic6+capacitor的图书借阅app

    本资源包包含:图书借阅app的vue源码、图书管理系统springboot后台server源码(该后台基于springboot+mysql+jpa+mybatis技术)、nvm(nodejs管理工具)、nodejs、jdk1.8、打包后的apk(可以直接装在手机上)以及...

    Ionic安装打包调试.pdf

    ### Ionic安装打包调试知识点 ...以上步骤详细介绍了Ionic项目的环境搭建、编译打包、APK签名以及调试过程中的关键操作和技术细节。遵循这些指南可以帮助开发者顺利完成Ionic项目的开发和测试工作。

    Ionic3项目总结

    "Ionic3项目总结" Ionic3项目是一种使用Angular2框架和Ionic框架开发的移动应用程序。 Ionic3项目开发需要注意一些问题和解决方法,下面是其中的一些知识点: 1. 页面跳转 在Ionic3项目中,页面跳转可以通过...

    ionic3仿京东商城源码

    在这个项目中,我们可以看到Ionic3的依赖以及可能的其他插件和工具,例如Angular、RxJS等。`tsconfig.json`是TypeScript的配置文件,定义了编译选项,如目标语言版本、模块系统等。`tslint.json`则用于TypeScript...

    ionic3官网demo-tutorial

    "tutorial" 文件夹可能包含了 Ionic 3 的官方教程示例,这些示例通常涵盖从创建新项目到实现特定功能的完整过程。通过学习和实践这些教程,开发者可以逐步掌握 Ionic 3 的核心概念和最佳实践。 **调试和测试** ...

    ionic3官网demo-super

    为了帮助这部分用户顺利进行学习和开发,这个压缩包提供了一个名为“super”的项目,它包含了 Ionic3 官方Demo的所有代码和配置,用户可以直接下载并运行,无需担心因网络问题而中断学习过程。 【知识点】: 1. **...

    完整的Ionic项目实例

    当Ionic项目与Cordova结合时,可以将Web应用打包为原生的iOS、Android或Windows应用。 **3. Ionic与Cordova的结合** 在“ddcanzuo”项目中,我们看到这两个技术的结合。通过Cordova,开发者可以利用Ionic构建的...

    ionic3 打包真机启动白屏问题修复方法

    在开发基于Ionic 3的应用程序时,遇到真机启动白屏的问题是常见的困扰。这个问题通常是由于多种原因导致的,如JavaScript加载延迟、Webview不兼容、配置错误等。本篇文章将深入探讨这个问题,并提供一系列解决方案,...

    ionic3项目

    **Ionic 3 项目详解** 本文将深入探讨 Ionic 3 框架,以及如何在自己的项目中使用和运行一个基于 Ionic 3 的代码库。Ionic 是一款流行的开源框架,用于构建跨平台的移动应用程序,它基于 AngularJS 和 Apache ...

    IONIC+PhoneGap项目源码

    通过分析这些源码,开发者可以学习到如何将IONIC的UI组件和交互与PhoneGap的本地功能结合,创建一个功能完备的混合移动应用。 【文件名称列表】 1. "深入浅出 phonegap 代码.zip" - 这个文件可能是关于PhoneGap的...

    ionic3自定义cordova插件

    标题"ionic3自定义cordova插件"意味着我们将探讨如何为`Ionic 3`项目创建和集成自定义的`Cordova`插件。自定义插件是为了扩展`Cordova`的内置功能,满足特定项目需求,如访问硬件特性或与操作系统更深入交互。 **...

    2018 ionic start创建工程失败解决方案

    这个问题通常出现在Ionic 3到Ionic 4的升级过程中,由于官方API和工具的调整,导致旧有的命令行创建项目的方式不再适用。本文将深入探讨这个问题的原因,并提供一套详尽的解决方案。 首先,理解问题的根源至关重要...

Global site tag (gtag.js) - Google Analytics