ionic7 从安装 到 项目启动最后打包成 apk

报错处理

在打包的时候遇到过几个问题,这里记录下来两个
Visual Studio Code运行ionic build出错显示ionic : 无法加载文件
ionic 项目通过 android studio 打开报错 capacitor.settings.gradle 文件不存在

说明

由于之前使用的是 ionic 3,当时打包的方式使用的是 cordova 打包,虽然现在也还是可以使用 cordova 打包,但是官方已经不推荐。不推荐就有可能到时候在那个版本去掉。就像我们使用 java 的时候一样,新版会毙掉好多不推荐用法。

这里我们就使用最新的 Capacitor 来打包。

ionic 安装

好了,废话说了那么多了,现在开始干活了,由于我在操作的时候,很多都是直接看的官方的文档,下面会附带官方链接。

这里我使用的是 node: v18.20.0 这个版本,用 nvm 管理器安装的,npm 的版本为:10.5.0,使用下面的命令全局安装就好, 点击查看官方链接

# 安装
npm install -g @ionic/cli# 查看版本
ionic --version

查看ionic 版本

初始化 ionic 项目

我这边是建立了一个 ionicProjects 的文件夹,在这个文件夹里面,就放我所有的 ionic 的工程项目。
官方创建一个项目的链接地址:https://ionicframework.com/docs/developing/starting

# 进入工程项目
cd D:\workspace\IonicProjects# 创建一个工程,这里使用 tabs 模板,具体的可以看下官方的文档
ionic start ioinc-demo tabs

创建项目
后面的根据自己熟悉的语言来选择就好了,我是熟悉 angular 和 vue,这里我选择了 angular,并且这里我没选择 standalone 的模式,这个我也测试过,正常开发应用还是这个 NgModules 好点。接来下就等安装完就好了

安装 vs code 插件

这个是官方推荐的插件,下载这个,可以方便于我们操作,https://ionicframework.com/docs/intro/vscode-extension

安装插件

启动测试

我们安装完了之后,通过浏览器来访问下:

ionic serve

执行完上面的命令之后,会自动通过浏览器打开下面的页面,到这里我们就算项目搞完了
浏览器访问
另外,插件也可以启动
插件启动方式

添加 android 的插件 capacitor

在 ionic 中增加 Android 的平台插件,官方的链接地址:https://ionicframework.com/docs/developing/android,由于之前的 cordova 不再推荐了(这里我好想说,真的学不动了),所以我们看下 Capacitor。

官方截图

添加 android 平台

这里是需要在工程的路劲下面哈,不要瞎操作,会报错的,我是直接在 vs code 上面点击的安装
对可以对照官网看下:https://ionicframework.com/docs/developing/android

# 安装 
npm install @capacitor/android# 增加平台
npx cap add android# 使用 android studio 打开
npx cap open android

通过 vs code 中的插件操作

添加 android 项目,这里其实就是执行了上面的两块代码 :

  • npm install @capacitor/android
  • npx cap add android
    添加android 项目
    添加完了之后,显示为下面这样子:
    添加完成

项目编译

命令操作

需要打包成 apk 的话,需要先编译下,然后再通过 android studio 打开

// 先执行
ionic build// 需要执行npx cap sync android来同步Web资源到Capacitor的Android原生项目中。
// 这将确保Web更改被复制到Android项目的正确位置。
npx cap sync 
或者
npx cap sync android

在vs code 插件上面操作

当我们修改代码之后,需要重新打包的时候就按照顺序点一遍就好了,执行的命令和上面一样
插件操作

通过 android studio 打包

这里是讲怎么通过 android studio 打包,并没有涉及到如何安装 android studio。按照上面的操作 点击 “open in Android Studio” 之后,可以自动打开 Android Studio,这个时候会下载一堆的东西,耐心等待下 ,这里我不记得我等了多久,是需要一段时间的。
通过android 打开

开始打包

第一步:选择图中的操作

生成Apk

第二步:选择 apk

第二步

第三步:创建一个新的

第三步

第四步:选择key store path 的文件路劲

第四步

第五步:设置密码,注意:Certificate内必填一项,点击确认

第五步

第六步:

第六步

第七步:导出

在右下角可以看到这个提示,点击 locate
导出

这样子就可以看到 apk 了
apk

测试

这个时候,可以将导出来的 apk 传入到手机上面去,这样子就可以看到效果了。也可以通过 android 模拟器打开。
模拟器打开

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/31862.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

驾考小技巧:老北京布鞋!距离高考出分还剩3天,我却看到有些孩子已经拿了“满分”——早读(逆天打工人爬取热门微信文章解读)

我20年驾校4000多块钱,你呢? 引言Python 代码第一篇 洞见 距离高考出分还剩3天,我却看到有些孩子已经拿了“满分”第二篇 视频新闻结尾 引言 昨天的文章顺利发出 看来“梅西” 这两个字在我们这边 不是敏感词 只是很多个罗粉搞得有点过头了 …

Android设置页面Activity全屏(隐藏导航栏、状态栏)

3、代码中设置:在setContentView 之前调用 requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); 注意: 当有全面屏手机可以显示虚拟…

2769. 找出最大的可达成数字

2769. 找出最大的可达成数字 题目链接:2769. 找出最大的可达成数字 代码如下: class Solution { public:int theMaximumAchievableX(int num, int t) {return num2*t; } };

公司名称含有关商标名称可能涉及侵权!

有个朋友找到普推商标知产老杨,说有个人给他打电话,说他的公司名称侵权另一家的商标名称,让他要改下公司名称,不改就要告侵权,此前看到过许多,在一些省市注册公司时,如果公司名称与已注册商标相…

聚类算法(1)---最大最小距离、C-均值算法

本篇文章是博主在人工智能等领域学习时,用于个人学习、研究或者欣赏使用,并基于博主对人工智能等领域的一些理解而记录的学习摘录和笔记,若有不当和侵权之处,指出后将会立即改正,还望谅解。文章分类在AI学习笔记&#…

区块链2024

项目名称:基于区块链的物资管理系统 技术栈:SpringBoot SpringSecurity MyBatis-Plus MySQL Redis CouchDB Hyperledger Fabric RabbitMQ Docker 项目描述:在自然灾害期间,物资管理常面临信息孤立和不透明等问题。为此,我…

象战----第十二届中山市邀请赛正赛

本次的题解一定让大家享受脑细胞碰撞与再生死亡的感受!定然酣畅淋漓!请耐心的读完 简称:让脑袋死机。。。 象战 老规矩先分析在打码: 注意到题目告诉我们:四个角落是不能放的 那么 我们设象在(i,j).(注意&#xff1a…

uniapp实现幻灯功能方法及代码

在 UniApp 中实现幻灯功能&#xff0c;通常可以使用 swiper 组件&#xff0c;该组件用于滑动视图容器&#xff0c;常用于制作轮播图效果。以下是一个简单的幻灯功能实现方法及代码示例&#xff1a; 步骤 1&#xff1a;在页面的模板部分添加 swiper 和 swiper-item 组件 <t…

解决双击bootstrap.bat没有生成b2.exe文件

双击bootstrap.bat但是并没有没有生成b2.exe文件&#xff0c;会报如下错误&#xff1a; "cl" 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。D:\cppsoft\boost_1_85_0\tools\build\src\engine>dir *.exe 驱动器 D 中的卷是 Data 卷的序列号是…

eNSP学习——配置基于全局地址池的DHCP

目录 主要命令 原理概述 实验目的 实验场景 实验拓扑 实验编址 实验步骤 1、基本配置 2、配置基于全局地址池的 DHCP Server 3、配置DHCP Client 主要命令 [R1]dhcp enable //开启 DHCP功能//创建一个全局地址池&#xff0c;地址池名称为huawei1 [R1]ip pool h…

Linux系统开机自启动脚本(案例:Raspberry Pi 4B脚本)

前言&#xff1a;本篇博客为手把手教学的 Linux 系统开机自启动脚本教程&#xff0c;且额外包含有 Raspberry Pi 4B 的开机自启动案例。日常工程项目中往往需要 Linux 系统能够自启动一些代码程序&#xff0c;本篇博客利用虚拟机下的 Ubuntu 自启动脚本来进行教学&#xff0c;且…

力扣240.搜索二维矩阵II

力扣240.搜索二维矩阵II 因为原数组是从上到下从左到右增加的 在左下(和右上角)时有特性&#xff1a;i减小则a[i]减小&#xff0c;j增大则a[j]增大因此从左下角开始遍历 找到结果return即可 class Solution {public:bool searchMatrix(vector<vector<int>>&…

vue canvas学习

说明 在vue里试用一下canvas&#xff0c;记录一下 代码 <template><div><canvas ref"canvas1" height"500" width"500"></canvas><button click"draw">画图</button></div> </templa…

深入解析Transformer:大模型核心技术揭秘

在大模型发展历程中&#xff0c;有两个比较重要点&#xff1a;第一&#xff0c;Transformer 架构。它是模型的底座&#xff0c;但 Transformer 不等于大模型&#xff0c;但大模型的架构可以基于 Transformer&#xff1b;第二&#xff0c;GPT。严格意义上讲&#xff0c;GPT 可能…

【网络安全的神秘世界】docker启动失败?看我如何成功启动

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具 &#x1f64b;‍♂️问题描述 关闭docker后再启动就发现启动失败了 错误信息&#xff1a;Job for docker.service failed b…

2020C++等级考试二级真题题解

202012数组指定部分逆序重放c #include <iostream> using namespace std; int main() {int a[110];int n, k;cin >> n >> k;for (int i 0; i < n; i) {cin >> a[i];}for (int i 0; i < k / 2; i) {swap(a[i], a[k - 1 - i]);}for (int i 0…

Unity定时(延迟)管理器实现

前言 Unity中实现定时功能的方法有很多&#xff0c;比如协程、Update、Invoke、Async等&#xff0c;可以说是五花八门&#xff0c;对于这类实现方法多、需求频繁的功能还是需要一个管理器来统一处理。 功能 下面列出了该管理器支持的功能&#xff0c;可以根据根据所列功能判…

tron-passwd写入提权

troneasy敏感信息收集、Brainfuck解密、替换密码、ssh利用、passwd提权机发现 **后续需要虚拟机的私信我&#xff0c;我会打包进行文章发布链接&#xff0c;请持续关注&#xff01;&#xff01;&#xff01;** 主机发现 netdiscover -i eth0 -r 192.168.44.0/24端口服务 nm…

注解详解系列 - @Profile:基于环境的配置切换

注解简介 在今天的注解详解系列中&#xff0c;我们将探讨Profile注解。Profile是Spring框架中的一个重要注解&#xff0c;用于根据不同的环境配置有选择性地启用或禁用特定的bean。通过Profile注解&#xff0c;可以方便地在开发、测试、生产等不同环境中切换配置。 注解定义 …

速盾:cdn加速什么好?

CDN加速是一种通过使用内容分发网络&#xff08;Content Delivery Network&#xff09;来提高网站速度的技术。在了解CDN加速的好处之前&#xff0c;首先需要明白什么是CDN。CDN是一种分布在全球不同地理位置的服务器网络&#xff0c;用于存储和交付网站的静态和动态内容。当用…