ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目

Capacitor是什么?

Capacitor是由ionic团队开发的一款跨平台移动应用构建工具,可轻让我们轻松的构建Android、iOS、Electron和Web应用程序。
Capacitor是Apache Cordova和Adobe PhoneGap的继承者,不仅可以把我们用html css js写的代码打包成原生app,还可以让我们使用js调用手机上面原生的Api。目前Capacitor已经成为Ionic应用程序的默认打包工具,你可以继续选择使用cordova或者尝试使用Capacitor。Capacitor官方不仅给我们提供了常见的Api插件,还提供了Cordova兼容层,允许我在Capacitor项目中使用现有的Cordova插件。

1.在我们的Ionic项目中(vue angular react都可以)集成Capacitor

ionic integrations enable capacitor

ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目_第1张图片
ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目_第2张图片

2.新版本的ionic(“@ionic/vue”: “^6.0.0”)此步骤可跳过----配置应用名称 应用包名

npx cap init [appName] [appId]
例如:
npx cap init hybirdApp com.hybrid.pwc
appName应用程序的名称,appId应用程序域标识符(例如:com.hybrid.pwc)

ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目_第3张图片

3.添加平台

npm install @capacitor/android
npm install @capacitor/ios
npx cap add ios
npx cap add android

ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目_第4张图片
ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目_第5张图片

4.编译我们的vue项目

ionic build

ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目_第6张图片

5.将静态资源与capacitor同步

npx cap copy

ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目_第7张图片

6.打开IDE运行,部署,iOS和Android项目分别会在Xcode和Android Studio中打开

npx cap open ios
npx cap open android

ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目_第8张图片

注意:每次修改代码先ionic build 然后npx cap copy同步代码,再去android studio中运行

7.初次使用,需要用这个命令来同步项目

ionic capacitor sync android

ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目_第9张图片

否则你的项目会报错Could not read script ‘\android\capacitor.settings.gradle’ as it does not exist.

Settings file 'C:\jin_files\code\ionic-demo\mobile-framework\android\settings.gradle' line: 5

A problem occurred evaluating settings 'android'.
> Could not read script 'C:\jin_files\code\ionic-demo\mobile-framework\android\capacitor.settings.gradle' as it does not exist.

* Try:
Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Exception is:
org.gradle.api.GradleScriptException: A problem occurred evaluating settings 'android'.
	at org.gradle.groovy.scripts.internal.DefaultScriptRunnerFactory$ScriptRunnerImpl.run(DefaultScriptRunnerFactory.java:93)
	at org.gradle.configuration.DefaultScriptPluginFactory$ScriptPluginImpl.lambda$apply$0(DefaultScriptPluginFactory.java:133)
	at org.gradle.configuration.DefaultScriptTarget.addConfiguration(DefaultScriptTarget.java:74)
	at org.gradle.configuration.DefaultScriptPluginFactory$ScriptPluginImpl.apply(DefaultScriptPluginFactory.java:136)
	at org.gradle.configuration.BuildOperationScriptPlugin$1.run(BuildOperationScriptPlugin.java:65)
	at org.gradle.internal.operations.DefaultBuildOperationRunner$1.execute(DefaultBuildOperationRunner.java:29)
	at org.gradle.internal.operations.DefaultBuildOperationRunner$1.execute(DefaultBuildOperationRunner.java:26)
	at org.gradle.internal.operations.DefaultBuildOperationRunner$3.execute(DefaultBuildOperationRunner.java:75)
	at org.gradle.internal.operations.DefaultBuildOperationRunner$3.execute(DefaultBuildOperationRunner.java:68)
	at org.gradle.internal.operations.DefaultBuildOperationRunner.execute(DefaultBuildOperationRunner.java:153)
	at org.gradle.internal.operations.DefaultBuildOperationRunner.execute(DefaultBuildOperationRunner.java:68)
	at org.gradle.internal.operations.DefaultBuildOperationRunner.run(DefaultBuildOperationRunner.java:56)
	at org.gradle.internal.operations.DefaultBuildOperationExecutor.lambda$run$1(DefaultBuildOperationExecutor.java:71)
	at org.gradle.internal.operations.UnmanagedBuildOperationWrapper.runWithUnmanagedSupport(UnmanagedBuildOperationWrapper.java:45)
	at org.gradle.internal.operations.DefaultBuildOperationExecutor.run(DefaultBuildOperationExecutor.java:71)
	at org.gradle.configuration.BuildOperationScriptPlugin.lambda$apply$0(BuildOperationScriptPlugin.java:62)
	at org.gradle.configuration.internal.DefaultUserCodeApplicationContext.apply(DefaultUserCodeApplicationContext.java:43)
	at org.gradle.configuration.BuildOperationScriptPlugin.apply(BuildOperationScriptPlugin.java:62)
	at org.gradle.initialization.ScriptEvaluatingSettingsProcessor.applySettingsScript(ScriptEvaluatingSettingsProcessor.java:74)
	at org.gradle.initialization.ScriptEvaluatingSettingsProcessor.process(ScriptEvaluatingSettingsProcessor.java:67)


8.使用IDE下载依赖sync项目,通常安卓会自动下载

ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目_第10张图片
ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目_第11张图片

9.真机运行项目

ionic+vue+capacitor系列笔记--02项目中集成Capacitor,添加android,ios平台,真机运行项目_第12张图片

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

参考资料:
https://capacitorjs.com/docs/v2/apis/browser
https://ionicframework.com/docs/cli/commands/capacitor-sync#inputs
https://blog.csdn.net/weixin_39652658/article/details/117740937
https://www.itying.com/goods-1150.html

你可能感兴趣的:(移动端开发,前端,移动端)