如何搭建Ionic环境以及打包成安卓apk

关注

原创最新推荐文章于 2026-09-05 15:14:53 发布 1.3w 阅读 AI 写同款· GEO 优化 ›

ionic4如何打包成Andriod平台下的apk文件目录（大致分为6个步骤） 1.搭建环境 2.安装AndroidStudio 3.构建安卓平台 4.构建项目 5.解决cordova问题 6.安装生成的apk文件 7.注意事项前言发布需要用到的AndroidSdk和Gradle的确存在版本匹配的问题，但是执行下面的步骤程序会自适应版本 1.搭建环境 1.1安装nodejs。 1.2安装npm/... 阅读详情

经过几天的钻研，终于把Ionic的一份demo成功打包成apk，心里还是有点小激动。写篇文章分享一下。
1.Ionic是什么？Ionic的生态系统基于Angular和Cordova，前者是web应用框架，后者是构建和打包原生应用的工具。Ionic是将HTML,CSS,JS,Angular，Cordova等技术进行整合，成为一个非常强大的移动端应用开发平台。

2.如何搭建环境？
    如果你现在要使用Ionic来架构应用，你应用要有以下几个步骤。
  1>安装node.js。可以访问[nodejs官网](http://nodejs.org)下载对应平台的安装包。如果你已经安装了node，请把它升级为最新版本。安装完成后，可以在OS X的终端后者windows的命令提示符中运行下面的代码来验证是否安装成功。

$ node -v

如果出现版本号说明安装成功。(忽略$符号，以下同理)
  2>安装Ionic和Cordova。使用一条命令就能安装Ionic和Cordova。执行之前请确保你已经安装了git：

$ npm install -g cordova ionic

这条命令需要一点时间，请耐心等待。安装完成后，运行下面的命令来确认已经安装成功：

$ cordova -v 
$ ionic -v

同样，这里出现版本号说明安装成功。注意：这里需要配置node的环境变量，如果你不清楚环境变量如何配置，百度一下啦！

3.是时候创建一个应用了。
Ionic提供了一个简单的start命令，几秒就可以创建一个新项目，在你想要创建项目的文件夹下运行如下代码就可以轻松创建：

$ ionic start demo
$ cd demo

程序可能会问你是否创建一个Ionic账户，暂时可以无视它。ok创建成功后，你可以在你的文件下面看到demo文件夹，进入文件夹，你可以看到一串目录。这是Ionic的默认模板。
重点介绍以下www目录，这里进去我们可以看到css，js，lib，image，index，template等文件或者文件夹，这里前端人士应该很熟悉啦，这里就是你这个应用所有的前端代码，在这里面编写你的代码吧！
Ionic有个很牛叉的地方，当你输入如下代码后，你可以在浏览器中预览应用，当你在编写代码的时候，只需要保存，页面就好自动刷新，而不需要你手动刷新页面，这个angular又更进一步啦！很神奇有木有...

$ ionic serve

执行的时候会提醒你选择地址，多数情况下选择localhost即可。程序会自动打开电脑中的默认浏览器并访问8100端口。你也可以直接在浏览器中输入localhost:8100。这里建议使用Chrome或者Safari。IOS的WebView使用的是Safari，Android使用的是Android浏览器（跟Chrome的相似度极高）。所以很明显看到用这两个浏览器模拟的好处，嘿嘿！

4.如何编译并发布应用？当你已经顺利完成你的应用代码部分的时候，你现在所需要的就是将你的应用打包并且发布了。
第一步：创建一个独一无二的图标。图标的设计无非有以下几点：简单，让人印象深刻，不受尺寸限制，颜色不要太复杂。创建好你的图标之后，请以png/psd/AI格式保存在resource/android/icon.png和resource/android/icon.png。然后使用如下命令，就可以生成不同尺寸的图标：

$ ionic resources -icon

第二步：创建启动页面图片。启动画面的源文件至少需要2208px×2208px，创建完成后，保存为
resource/android/splash.png和resource/android/splash.png。
然后使用如下命令就可以生成不同尺寸的启动画面图片：

$ ionic resources --splash

第三步：编译Android应用（这里以安卓应用为例）。
    1>配置应用的签名。使用如下命令来配置你的签名（keystore）：

$ keytool -genkey -v -keystore know_your_brew.keystore -alias know_your_brew -keyalg RSA -keysize 2048 -validity 10000

注意：请使用你应用的名字来替代know_your_brew.这个命令可以生成一个新文件，在本示例中为know_your_brew.keystore。
在应用的整个生命周期中将重复使用同一个keystore，请保存好它。
    2>使用Cordova编译应用。使用build命令编译一个应用的发布版本：

$ cordova build --release android

这个命令会生成一个新的apk文件。此时还未签名。
    3>签名应用文件。现在我们要用之前创建的keystore文件来签名生成的未签名版本的应用。使用如下命令来签名：

$ jarsigner -verbose -sigalg SHALwithRSA -digestalg SHAL -keystore know_your_brew.keystore unsigned_name.apk know_your_brew

注意：这里请使用keystore生成文件名来替换know_your_brew示例名称，同时用真实的应用文件名替换掉unsigned_name.apk。
这个过程需要一点时间，期间会提示输入keystore的密码。命令会修改apk文件并对其进行签名。

5.好了，你的apk已经生成，将它发到你的手机上就可以下载安装了，如果要将它发布到应用商店，那就去应用商店注册开发者账户吧！这里就不再讲述了。

总结，成功的使用Ionic创建了一个移动应用，成就感满满的！作为一个前端工程师，以前都没想过前端也能做移动应用，现在实现起来才深深的体会到前端的曼妙。期待不久的将来，能制作一款Ionic app上线，让那群搞安卓的惊掉下巴！同时，这几天也遇到了很多问题，发现了很多自身需要提高的地方，在以后的工作中，还是不能掉以轻心，要持续学习前沿知识，扩充自己！提高自己！

收录于