襄阳网站建设开发,办公空间设计网站,中国企业500强排行榜,wordpress菜单联动Capacitor是什么#xff1f;
Capacitor是由ionic团队开发的一款跨平台移动应用构建工具#xff0c;可轻让我们轻松的构建Android、iOS、Electron和Web应用程序。 Capacitor是Apache Cordova和Adobe PhoneGap的继承者#xff0c;不仅可以把我们用html css js写的代码打包成原…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 capacitor2.新版本的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 android4.编译我们的vue项目
ionic build5.将静态资源与capacitor同步
npx cap copy6.打开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: 5A 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
