動手使用 Cordova

7 min readDec 23, 2021

其實比較想打成動手踩坑 Cordova…
為啥不是 install 完就可以用啊，還有一堆有的沒的版本套件問題

以下主要流程都參照這位前輩的文章操作，然後遇到問題再去問谷哥
[Apache Cordova]實作第一個Hello Cordova，並且同時build到Web、iOS

第一步：安裝 nvm

下面兩句挑一個執行

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash`wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

接著將下面這段

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

然後去執行 mac 預設的 .zshrc 檔案 source ~/.zshrc

如果執行完上面後執行command -v nvm 後出現nvm: command not found 表示你安裝失敗了 You failed

才第一個步驟就失敗，太挫折了吧！

你需要先安裝 xcode 然後再把上面的 source ~/.zshrc 跑一次應該就會可以讀到nvm了吧？

第二步：安裝 node.js

這邊我們直接粗暴不解釋安裝最新的 lts 版

nvm install --lts
nvm use v16.13.1 #在這個當下這個是最新的 lts 版本

第三步：安裝cordova

npm install -g cordova

接著到你喜歡的地方建立專案 cordova create [project-name]
然後再粗暴的直接建立 web, android, ios 版本的 platform

cordova platform add browser
cordova platform add ios
cordova platform add android

建立起來是一回事，要能跑又是另一回事。

第四步：運行

Android

接下來要載 android 對應的運行軟體 android-studio 安裝完後輸入
codorva requirements 這時候會出現提示說有東西沒安裝……暗人生好黑暗

找到這個 SDK Manager 打開它，把喜歡的 android 版本勾一勾，還有 command tool 也要

安裝好之後匯入剛剛的 android app platform 路徑後，就可以開始測試這個專案能不能跑啦～我開玩笑的，一進專案就看到下方 event log 有一些錯誤訊息，說抓不到蝦咪蛙哥設定檔

有兩種方可以解決這個問題，第一個方法是先用 android studio 建立一個新的專案，然後他會自動產出這個檔案 local.properties 然後內容如下

將這個檔案複製到剛剛 cordova 的 app/platforms/android/local.properties 之後重新開啟這個專案讓系統重新讀檔完就可以 try run 了。

(第二個方法就是照著我上面的圖片直接見一個相同的檔案在合適的位置）

###第三步：嘗試修改 html 內容看看結果

修改 app/www/index.html 的內容然在 app路徑進行編譯： cordova build
很高的機率會出現一些錯誤訊息說請指定 ANDROID_SDK_ROOT 路徑等…或是 JAVA 版本不吻合。

這時候就要去下載那個版本的 JAVA 然後把這段貼在
~/.zsh_profile 裡面，一般來說 JAVA 會是在那個路徑

JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_311.jdk/Contents/Home
export JAVA_HOMEANDROID_HOME="/Users/cl/Library/Android/sdk/"
export ANDROID_HOME;ANDROID_SDK_ROOT="/Users/cl/Library/Android/sdk/"
export ANDROID_SDK_ROOT;

之後再在 ~/.zsh 貼上下面這段後，執行 source ~/.zshrc 再回到去執行build指令看看會出現什麼

# include .zsh_profile if it exists
if [ -f $HOME/.zsh_profile ]; then
    . $HOME/.zsh_profile
fi

如果出現這段錯誤訊息
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio

我參考這篇 ionic 2 — Error Could not find an installed version of Gradle either in Android Studio

於是就在 ~/.zsh_profile 裡面再增加

GRADLE_PATH="/Users/[account]/.gradle/wrapper/dists/gradle-[x.x.x]-bin/[--token--]/gradle-[x.x.x]/bin"
export GRADLE_PATHANDROID_STUDIO="/Applications/Android Studio.app/Contents/MacOS"
export ANDROID_STUDIOexport PATH="$PATH:$GRADLE_PATH:$ANDROID_STUDIO"

接著繼續重新執行 build