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
2.新版本的ionic(“@ionic/vue”: “^6.0.0”)此步骤可跳过----配置应用名称 应用包名
npx cap init [appName] [appId]
例如:
npx cap init hybirdApp com.hybrid.pwc
appName应用程序的名称,appId应用程序域标识符(例如:com.hybrid.pwc)
3.添加平台
npm install @capacitor/android
npm install @capacitor/ios
npx cap add ios
npx cap add android
4.编译我们的vue项目
ionic build
5.将静态资源与capacitor同步
npx cap copy
6.打开IDE运行,部署,iOS和Android项目分别会在Xcode和Android Studio中打开
npx cap open ios
npx cap open android
注意:每次修改代码先ionic build 然后npx cap copy同步代码,再去android studio中运行
7.初次使用,需要用这个命令来同步项目
ionic capacitor sync android
否则你的项目会报错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项目,通常安卓会自动下载
9.真机运行项目
欢迎路过的小哥哥小姐姐们提出更好的意见哇~~
参考资料:
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