動手使用 Cordova
其實比較想打成動手踩坑 Cordova… 為啥不是 install 完就可以用啊，還有一堆有的沒的版本套件問題
其實比較想打成動手踩坑 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 版本
第三步：安裝cordovanpm install -g cordova
接著到你喜歡的地方建立專案 cordova create [project-name]
然後再粗暴的直接建立 web, android, ios 版本的 platformcordova 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
IOS
上個步驟有可能會跳出個錯誤訊息說找不到 Xcode，這時候你就要去下載 Xcode。可以去官網下載或是從 App store 下載
安裝完後再 build 一次後會出現 ** BUILD SUCCEEDED **
接著執行 cordova emulate ios 然後讓子彈飛一下會彈出 ios 的運行畫面
我是用 vscode 的 terminal 也可以順利呼叫出 ios 模擬器
