新乡市做网站的公司,微信公众号平台登陆,淘宝接单做网站,企业手机网站建设精英报错处理
在打包的时候遇到过几个问题#xff0c;这里记录下来两个 Visual Studio Code运行ionic build出错显示ionic : 无法加载文件 ionic 项目通过 android studio 打开报错 capacitor.settings.gradle 文件不存在
说明
由于之前使用的是 ionic 3#xff0c;当时打包的…报错处理
在打包的时候遇到过几个问题这里记录下来两个 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 项目
我这边是建立了一个 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/androidnpx cap add 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这个时候会下载一堆的东西耐心等待下 这里我不记得我等了多久是需要一段时间的。
开始打包
第一步选择图中的操作 第二步选择 apk 第三步创建一个新的 第四步选择key store path 的文件路劲 第五步设置密码注意Certificate内必填一项点击确认 第六步 第七步导出
在右下角可以看到这个提示点击 locate
这样子就可以看到 apk 了
测试
这个时候可以将导出来的 apk 传入到手机上面去这样子就可以看到效果了。也可以通过 android 模拟器打开。
