第一個 Capacitorjs 程式

Capacitorjs android - 2022-06-29

What

capacitorjs: capacitorjs 一個可跨平台在 iOS、Android 和 Web 上運行的 Web 應用程序的框架。類似 cordova 在桌機平台上。

下載 Android Studio 後，雙擊安裝。

開啟 Android Studio 後，點選 Tools › SDK Manager 在頁籤 tab:[SDK Platforms] 確認 Android API 至少要大於 21。目前為止最新支持的版本是 SDK 31 ，如果妳安裝的版本過高妳需要安裝一個降低的版本。

頁籤 tab:[SDK Tools] 安裝下列套件

先在 nodejs 環境中安裝 capacitor。nodejs 的版本必須高或等於 12。

注意， capacitor 獨立運作在每個開發環境中，所以不要將他安裝到全域。

> npm install @capacitor/core
> npm install @capacitor/cli --save-dev

安裝完 capacitor 的命令列工具後，便能使用 npx cap 去進行各種不同的操作，參見 capacitor cli。

切換到工作目錄，使用 cap init 建立一個設定檔 capacitor.config.json。

> npx cap init

cap init 根據你提供的訊息，大致會生成下列的設定檔。

capacitor.config.json

{
  "appId": "info.hokang.first",  // (1)
  "appName": "first", // (2)
  "webDir": "www", // (3)
  "bundledWebRuntime": false
}

有了設定檔，現在，先將 android platform 加入專案。

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

然後，建立 webDir 目錄，並放置一個 index.html 檔。

現在，可以試試啟動你的程式

> npx cap run android

如果出現錯誤 ERR_UNSUPPORTED_API_LEVEL 則可能目前的 SDK Platforms 版本不支援，請移除後安裝一個支援的版本。

若出現 ERR_UNSUITABLE_API_INSTALLATION 則使用 npx native-run android --sdk-info 檢查缺失的套件，並安裝他。

開啟 Android Studio 後，點選 Tools › SDK Manager 在頁籤 SDK Platforms 記得開啟右下方的

選擇缺失套件，並安裝。

完成後移除目錄 android 再安裝一次。

> npx cap add android
> npx cap run android

這時應該會啟動一個模擬器，且其上會呈現 index.html 中的內容。