Capacitor是什么？

Capacitor是由ionic團(tuán)隊開發(fā)的一款跨平臺移動應(yīng)用構(gòu)建工具，可輕讓我們輕松的構(gòu)建Android、iOS、Electron和Web應(yīng)用程序。
Capacitor是Apache Cordova和Adobe PhoneGap的繼承者，不僅可以把我們用html css js寫的代碼打包成原生app，還可以讓我們使用js調(diào)用手機上面原生的Api。目前Capacitor已經(jīng)成為Ionic應(yīng)用程序的默認(rèn)打包工具，你可以繼續(xù)選擇使用cordova或者嘗試使用Capacitor。Capacitor官方不僅給我們提供了常見的Api插件，還提供了Cordova兼容層，允許我在Capacitor項目中使用現(xiàn)有的Cordova插件。

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

ionic integrations enable capacitor

2.新版本的ionic（“@ionic/vue”: “^6.0.0”）此步驟可跳過----配置應(yīng)用名稱 應(yīng)用包名

npx cap init [appName] [appId]
例如：
npx cap init hybirdApp com.hybrid.pwc
appName應(yīng)用程序的名稱，appId應(yīng)用程序域標(biāo)識符(例如：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.將靜態(tài)資源與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: 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