探索移動端可能性：Capacitor5.5.1和vue2在Android studio中精細融合

介紹：

移動應用開發是日益復雜的任務，本文將帶領您深入探索如何無縫集成Capacitor5.5.1、Vue2和Android Studio，以加速您的開發流程

Capacitor 是一個用于構建跨平臺移動應用程序的開源框架。
Vue 是一個流行的 JavaScript 框架，用于構建用戶界面。
Android Studio 是用于開發 Android 應用程序的官方集成開發環境（IDE）。

環境設置：

Capacitor 官方支持三個應用目標：Android、iOS 和 Web
（vue、recat…capacitor并不限制你使用特定的框架，根據偏好）

1、Android需要在Android studio 、Android SDK 環境下運行

Capacitor 5 至少需要 Android Studio 2022.2.1

2、IOS 需要在Xcode或者MacOS環境下運行
3、web是以下環境
3.1.首先你得有vue的開發環境

在這里插入圖片描述

3.2.確保您已經正確安裝并配置了Vue Cli、Capacitor和Android Studio，如果尚未安裝，請按照以下步驟進行設置。

項目創建：

使用 Vue CLI 創建一個新的 Vue 2 項目，并通過 Capacitor 初始化您的項目

使用 npm 或 yarn 在命令行中安裝 Vue CLI：npm install -g @vue/cli 或 yarn global add @vue/clivue create my-vue-app
cd my-vue-app
npm install @capacitor/core @capacitor/cli
npx cap init

平臺版本：

capacitor使用5.5.1的話，安卓和IOS 的版本都需要5.5.1、不然會報一堆奇怪的錯誤，導致耽誤開發進度
在這里插入圖片描述

Android平臺集成：

添加 Android 平臺，以便在 Android Studio 中進行原生開發。導入 Android Studio 并配置您的開發環境。

npx cap add android

打開 Android Studio，導入 Capacitor 項目的 Android 文件夾。

配置 Android Studio：

在 Android Studio 中，打開 settings.gradle 文件，確保項目正確配置。
在 build.gradle 文件中，添加 Capacitor 插件和依賴項。
在 MainActivity.java 文件中，添加 Capacitor 相關的初始化代碼。

構建和運行應用程序：

在命令行中運行 npm run build 命令，構建 Vue 項目。
在命令行中運行 npx cap copy 命令，將構建后的文件復制到 Android 項目中，確保兩者保持同步
在 Android Studio 中，點擊 “Sync Project with Gradle Files” 按鈕，確保項目正確同步。
在 Android Studio 中，點擊 “Run” 按鈕，運行應用程序。

IOS平臺集成:

npx cap add

可以自己安裝一個蘋果環境測試

原生開發：

在 Android Studio 中進行原生開發，編輯原生代碼，與 Vue 2 項目集成。

WebView 集成：

在 Vue 中使用 WebView 組件，可以按照以下步驟進行：
1.安裝 vue-webview 插件：
在 Vue 項目的根目錄下，使用 npm 或 yarn 安裝 vue-webview 插件：

npm install vue-webview

或

yarn add vue-webview

2.在 Vue 組件中引入 WebView 組件：
在需要使用 WebView 的 Vue 組件中，引入 vue-webview 插件，并注冊 WebView 組件：

import VueWebView from 'vue-webview';export default {components: {VueWebView,},// ...
}

3.在模板中使用 WebView 組件：
在 Vue 組件的模板中，使用標簽來包裹 WebView 組件，并設置相應的屬性：

<template><div><vue-webview:src="webViewUrl":options="webViewOptions"@loadstart="handleLoadStart"@loadend="handleLoadEnd"></vue-webview></div>
</template>

在這個示例中，webViewUrl 是 WebView 加載的 URL，webViewOptions 是 WebView 的配置選項。你可以根據需要設置其他屬性，如 WebView 的寬度、高度、樣式等。
4.在 Vue 組件中處理 WebView 事件和方法：
在 Vue 組件的方法中，處理 WebView 的事件和方法。例如，你可以在 handleLoadStart 和 handleLoadEnd 方法中處理 WebView 的加載開始和加載結束事件。

export default {// ...methods: {handleLoadStart() {// WebView 加載開始時的處理邏輯},handleLoadEnd() {// WebView 加載結束時的處理邏輯},},
}

通過以上步驟，你就可以在 Vue 項目中使用 WebView 組件來呈現 Vue 2 項目的內容。可以根據需要設置 WebView 的屬性和處理 WebView 的事件，以實現更豐富的交互和功能。

插件和功能：

在這里插入圖片描述

插件：分為官方插件、社區插件

其實你使用了vue框架開發的也可以自己寫所需要的插件，以下給大家看看如何使用官方插件
**官方插件使用：**地理位置、相機、本地通知
地理位置：

注：需要在項目的根目錄下的AndroidManifest.xml文件中添加獲取位置權限（在獲取地理位置插件的xml中添加或者在主目錄下的xml）

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

引入依賴
npm install @capacitor/geolocation
在需要的頁面注入
import { Geolocation } from '@capacitor/geolocation';
Ex:// 獲取地理位置（得到經緯度，需要墻,由于這里調用的是google map）async getCurrentPosition() {// 在這里編寫按鈕點擊后的處理邏輯console.log('Button clicked!');// 在需要獲取地理位置的地方調用以下代碼const coordinates = await Geolocation.getCurrentPosition();this.latitude = coordinates.coords.latitude;this.longitude = coordinates.coords.longitude;console.log('Current position:', coordinates);},

相機（支持拍照和相冊上傳）：

引入依賴
npm install @capacitor/camera
在需要的頁面注入
import { Camera, CameraResultType } from '@capacitor/camera';
Ex：// 在需要拍照的地方調用該方法async takePicture() {const image = await Camera.getPhoto({quality: 90,allowEditing: false,resultType: CameraResultType.Uri});console.log("Current image", image.webPath);// 處理拍攝的照片，例如顯示在頁面上this.photo = image.webPath;},//在windows 中的web打開之后會報錯，在項目的main.js中添加// 某些 Capacitor 插件（例如Camera或Toast）在未本機運行時具有基于 Web 的 UI。
// 例如，Camera.getPhoto()在網絡上運行時，調用將加載響應式拍照體驗：import { defineCustomElements } from '@ionic/pwa-elements/loader';
// Call the element loader before the render calldefineCustomElements(window);

本地通知：

引入依賴
npm install @capacitor/local-notifications
在需要的頁面注入
import { LocalNotifications } from '@capacitor/local-notifications';
Ex：getMsg() {LocalNotifications.schedule({notifications: [{title: '新消息',body: '測試消息',id: 1,schedule: { at: new Date(Date.now() + 1000 * 5) }}]});},

調試和測試：

這是一個繁瑣的過程
需要安裝Android SDK 在官網下載完之后千萬不要放在C盤，安裝一個模擬器需要10多個G

在這里插入圖片描述

這里可以看到Gradle版本，可以去Gradle下載生成后需要的版本，會花費好長時間

在這里插入圖片描述

發布和部署：

參考

常見問題和解決方案：

常見問題：

i.Capacitor版本為5.5.1，Android、IOS 版本都應該為5.5.1否則不兼容見 ”平臺版本“

ii:權限報錯：

 E  Error send stats: {"error":"response_error","message":"Error send stats: com.android.volley.NoConnectionError: java.net.UnknownHostException:Unable to resolve host \"api.capgo.app\": No address associated with hostname"}

解決方案：

The error message indicates that there is an issue with connecting to the host "api.capgo.app" due to a "java.net.UnknownHostException," suggesting that the hostname cannot be resolved to an IP address. This issue is commonly related to network connectivity problems. Here are some steps you can take to troubleshoot and resolve this issue:1. **Check Internet Connection:**Ensure that your device or emulator has a stable internet connection. If you are using a physical device, check if it is connected to a network, and if you are using an emulator, make sure your computer has an active internet connection.2. **DNS Resolution:**The error suggests a problem resolving the hostname to an IP address. Ensure that the DNS (Domain Name System) configuration on your device or network is functioning correctly. You can try accessing "api.capgo.app" from a web browser to see if the domain resolves correctly.3. **Hosts File:**Check if there are any entries related to "api.capgo.app" in your device's hosts file. If there are, ensure that they are correctly configured, and if necessary, remove or correct any incorrect entries.4. **Firewall and Proxy Settings:**If you are behind a firewall or using a proxy, ensure that it is configured correctly to allow connections to "api.capgo.app." Check if there are any network restrictions that might be preventing your application from reaching the server.5. **Server Status:**Check the status of the "api.capgo.app" server. It's possible that the server is temporarily down or experiencing issues. You can try accessing the API from a browser or using a tool like cURL to see if there are any issues with the server.6. **Network Permissions:**Ensure that your application has the necessary network permissions in its AndroidManifest.xml file. You should have the `<uses-permission android:name="android.permission.INTERNET" />` permission declared.7. **Retry Mechanism:**Implement a retry mechanism in your code to handle temporary network issues. If the error persists, your application can retry the network request after a short delay.8. **Logs and Debugging:**Utilize logging statements in your code to trace the flow and identify where the error occurs. Check if there are additional details in the logs that might provide more information about the issue.By going through these steps, you should be able to identify and address the underlying cause of the "UnknownHostException" and resolve the issue with connecting to the host "api.capgo.app."

iii.Capacitor5 需要Gradle8和java17 ：是由我用的 Capacitor 5.5.1、Gradle 4.10.1、JDK 1.8

iv.Android Studio運行空白，沒有顯示任何控件我的問題是由于使用vue Router 的index.js的默認的base沒有指定，導致在Android Studio中報錯從而顯示空白

v.以下報錯:大概意思就是：在Android studio 中初始化報錯，這個錯誤是由于在你的項目中同時引入了 androidx.core:core:1.10.0 和 com.android.support:support-v4:23.2.1 這兩個庫，導致了重復的類沖突。解決這個問題的方法是統一使用 androidx 庫或者 com.android.support 庫，避免同時引入兩個版本不同的庫。你可以根據你的項目需要，選擇其中一個庫并將另一個庫的引用移除，然后重新構建你的項目。如果你需要更詳細的解決方法，可以查閱相關文檔或者搜索相關問題的解決方案。

Execution failed for task ':app:checkDebugDuplicateClasses'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.CheckDuplicatesRunnable> Duplicate class android.support.v4.app.INotificationSideChannel found in modules core-1.10.0-runtime (androidx.core:core:1.10.0) and support-v4-23.2.1-runtime (com.android.support:support-v4:23.2.1)Duplicate class android.support.v4.app.INotificationSideChannel$Stub found in modules core-1.10.0-runtime (androidx.core:core:1.10.0) and support-v4-23.2.1-runtime (com.android.support:support-v4:23.2.1)Duplicate class android.support.v4.app.INotificationSideChannel$Stub$Proxy found in modules core-1.10.0-runtime (androidx.core:core:1.10.0) and support-v4-23.2.1-runtime (com.android.support:support-v4:23.2.1)Duplicate class android.support.v4.os.IResultReceiver found in modules core-1.10.0-runtime (androidx.core:core:1.10.0) and support-v4-23.2.1-runtime (com.android.support:support-v4:23.2.1)Duplicate class android.support.v4.os.IResultReceiver$Stub found in modules core-1.10.0-runtime (androidx.core:core:1.10.0) and support-v4-23.2.1-runtime (com.android.support:support-v4:23.2.1)Duplicate class android.support.v4.os.IResultReceiver$Stub$Proxy found in modules core-1.10.0-runtime (androidx.core:core:1.10.0) and support-v4-23.2.1-runtime (com.android.support:support-v4:23.2.1)Duplicate class android.support.v4.os.ResultReceiver found in modules core-1.10.0-runtime (androidx.core:core:1.10.0) and support-v4-23.2.1-runtime (com.android.support:support-v4:23.2.1)Duplicate class android.support.v4.os.ResultReceiver$1 found in modules core-1.10.0-runtime (androidx.core:core:1.10.0) and support-v4-23.2.1-runtime (com.android.support:support-v4:23.2.1)Duplicate class android.support.v4.os.ResultReceiver$MyResultReceiver found in modules core-1.10.0-runtime (androidx.core:core:1.10.0) and support-v4-23.2.1-runtime (com.android.support:support-v4:23.2.1)Duplicate class android.support.v4.os.ResultReceiver$MyRunnable found in modules core-1.10.0-runtime (androidx.core:core:1.10.0) and support-v4-23.2.1-runtime (com.android.support:support-v4:23.2.1)

該錯誤消息表明您的項目中存在重復的類，特別是與android.support.v4庫相關的類。當您的項目中混合使用舊支持庫和 AndroidX 庫時，通常會出現此問題。
要解決此問題，請按照下列步驟操作：
1、更新依賴項：確保您使用的是最新版本的依賴項，尤其是 AndroidX 庫。更新您的build.gradle文件以使用最新版本的庫。
將任何出現的替換com.android.support為相應的 AndroidX 庫。例如，替換com.android.support:support-v4:23.2.1為androidx.core:core:1.10.0.
2、檢查已棄用的庫：
刪除任何已棄用或過時的依賴項，并將其替換為更新版本。
3、使用 AndroidX：將您的項目遷移到 AndroidX（如果您尚未這樣做）。AndroidX是Google提供的新的包結構，它取代了舊的支持庫。確保您的所有依賴項和您自己的代碼都使用 AndroidX 工件。
您可以通過將以下行添加到gradle.properties文件中來遷移到 AndroidX：
android.useAndroidX=true
android.enableJetifier=true （我是以這種方式解決掉）
這會自動將您的依賴項遷移到 AndroidX。
4、檢查傳遞依賴關系：有時，問題可能是由傳遞依賴關系引起的。使用該./gradlew app:dependencies命令檢查依賴關系樹并識別任何沖突的依賴關系。
一旦確定了沖突的依賴項，您就可以排除build.gradle文件中的特定傳遞依賴項。例如：
implementation (‘com.example.library:library:1.0’) {
exclude group: ‘com.android.support’
}
5、清理并重建：
進行這些更改后，清理您的項目并重建它。
在 Android Studio 中，您可以通過選擇“Build”->“Clean Project”，然后選擇“Build”->“Rebuild Project”來完成此操作。
6、使用該–stacktrace選項：
如果問題仍然存在并且您需要有關錯誤的更多詳細信息，請嘗試使用該
–stacktrace
選項運行構建。
這可能會提供有關項目的哪個部分導致沖突的更多見解。
./gradlew clean assembleDebug --stacktrace
7、檢查第三方庫：
如果您在項目中使用第三方庫，請確保它們與 AndroidX 兼容。
檢查每個庫的文檔或發行說明以確認兼容性