【项目问题】Ionic开发移动端app，手把手教你如何打包生成apk

@Dai

墨衍会员 · AI 创作全网分发码龄7年

关注

原创最新推荐文章于 2026-08-04 12:52:03 发布 4.9k 阅读 AI 写同款· GEO 优化 ›

双11提前购！买周边/年卡，一键领4重福利！送200元神券包+10%红包返利+最高10年VIP！还能抽iPhone18Pro！仅限1次，速抢>> 阅读详情

ionic 开发移动端app

Ionic 介绍
创建项目
移动端适配的方式
Ionicons 的使用方法
打包项目
其他知识点
- 设置apk名称
- 设置网络权限

Ionic 介绍

Ionic 是移动端开发框架，以下罗列几个官方链接助力开发：
一键创建项目
 官方文档
 Ionic 图标库

创建项目

进入 https://ionicframework.com/start#basics 进行创建项目。
它支持React、Angular、Vue三大框架，大家可以根据需要进行个性化选择。
在这里插入图片描述
点击 Create App进行创建项目.

创建完成后选择存放项目的位置
在这里插入图片描述
我这边选择Github，登录后点击Choose，等待创建即可...

最后将项目拉到本地，用编辑器打开，输入npm install && ionic serve 将项目跑起来

项目运行成功

移动端适配的方式

第一步：在app文件夹下创建app.scss文件

/*app.scss*/
$vm_design: 375;

@function rem($px) {
    @return (100vw / $vm_design) * $px;
}

第二步：在tab1.page.html 的ion-content中写入<span class="font">Dai</span>
第三步：在tab1.page.scss引入并使用

@import "../app.scss";
.font{
    font-size: rem(120);
}

在这里插入图片描述

手机屏幕不论是宽还是窄，都会进行类似于同比例的放大或缩小

Ionicons 的使用方法

进入官网 https://ionic.io/ionicons ，点击相应图标，复制相应代码粘贴到项目中即可。
<ion-icon name="airplane-outline"></ion-icon>

<!--tab1.page.html-->
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Tab 1</ion-title>
    </ion-toolbar>
  </ion-header>

  <app-explore-container name="Tab 1 page"></app-explore-container>
  <span class="font">Dai<ion-icon name="airplane-outline"></ion-icon></span>
</ion-content>

在这里插入图片描述

打包项目

网页

使用命令：ionic build

注意点：根据项目的需求，打包路径需要修改的话，请在 angular.json 文件中设置 baseHref，然后再进行ionic build。

在这里插入图片描述

最终打包生成了 www 的打包文件，这个就可以用来部署到网页上。

Android

【需要先安装Android Studio 以及JAVA和sdk】
打包命令（注意删除打包网页时设置的baseHref）：
ionic capacitor add android （生成Android包）
ionic capacitor build android（生成Android包并且用模拟器打开）

在这里插入图片描述
在Android中运行成功！

生成apk

第一步

在这里插入图片描述
第二步：选择APK，NEXT

第三步:Create new...

第四步：选择jks文件路径，也可以新建jks文件

第五步：设置密码，注意：Certificate内必填一项

第六步：NEXT

第七步：选择debug或者release进行导出，FINISH
在这里插入图片描述
最后导出完毕后，会在app/release中会生成app-release.apk，这个文件发送到手机即可安装app

在这里插入图片描述

其他知识点

设置apk名称

//build.gradle
android.applicationVariants.all(variant ->{
      variant.outputs.all{
        outputFileName = "IonicAppAPK.apk"
      }
    })

在这里插入图片描述
这样子每次导出的包名称都是IonicAppAPK.apk!

设置网络权限

如果不进行网络权限的设置，该项目是不能进行网络请求的。

第一步：新建network_security_config.xml文件
在这里插入图片描述

//network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>

<network-security-config>

  <base-config cleartextTrafficPermitted="true" />

</network-security-config>

在AndroidMainifest.xml中设置
在这里插入图片描述

android:networkSecurityConfig="@xml/network_security_config"

这样子就可以进行网络请求了！！！

收录于

项目问题

标签

#javascript #angular.js #前端 #java #html

ionic7 从安装到项目启动最后打包成 apk 由于之前使用的是 ionic 3，当时打包的方式使用的是 cordova 打包，虽然现在也还是可以使用 cordova 打包，[但是官方已经不推荐](https://ionicframework.com/docs/developing/android)。不推荐就有可能到时候在那个版本去掉。就像我们使用 java 的时候一样，新版会毙掉好多不推荐用法。这里我们就使用最新的 Capacitor 来打包。阅读详情