-----------------------------------------------------------
0) 準備/前提
-----------------------------------------------------------
1. 你已經安裝好各平台"自身"的開發環境了
MEMO: Android: https://cordova.apache.org/docs/en/latest/guide/platforms/android/
iOS: https://cordova.apache.org/docs/en/latest/guide/platforms/ios/
...
建議: Andriod Studio 安裝全部預設元件,並也用預設的路徑...參見 B) 的第 6 項 MEMO
2. 設置相關的環境變數,或之後檢查再設置...參見 B) 的第 6 項
-----------------------------------------------------------
A) 安裝 node.js(含npm), cordova
-----------------------------------------------------------
1. 安裝 node.js
來源:
http://nodejs.org/
NOTE: 下面功能必須安裝
[] Node.js runtime
[] npm package manager
[] Add to PATH
2. 驗證 node 安裝
開啟命令提示字元,輸入 node,是否有執行並回應新行,顯示提示號 '>'
C:\>node
提示號 '>' 下輸入 1+2 ,檢查是否有回應 3 的答案
C:\>node
>1+2
NOTE: node.js 是利用 google chrome v8 引擎執行, 如果出現 Windows 安全性警示,
按下解除封鎖按鈕
3. 驗證 npm 安裝
開啟命令提示字元,輸入 npm,是有否顯示 usage 訊息
C:\>npm
4. 安裝 cordova
開啟命令提示字元,輸入
C:\>npm install -g cordova
NOTE: 必須要有網路連線 npm 會下載安裝包
NOTE: 建議全域安裝 '-g'
5. 驗證 cordova 安裝
開啟命令提示字元,輸入 cordova,是否有顯示 synopsis 訊息
C:\>cordova
6. (非必要) 更新 cordova
開啟命令提示字元,輸入
目前版本 (本地)
C:\>cordova -v
查最後版本 (網路)
C:\>npm info cordova version
升級
C:\>npm update -g cordova
(沒法更新 7.0.0 -> 7.0.1?)
或
C:\>npm install -g cordova
MEMO: 唯有更新 cordova 後,'platform update' 才能不指定版號更新,
參見 C) 第 5 項
-----------------------------------------------------------
B) 建立新 cordova 專案
-----------------------------------------------------------
1. (非必要,只是多專案時都可以在一個父目錄下) 建立一個工作目錄 'work'
2. 在此工作目錄下開啟命令提示字元 (或開啟後進入此工作目錄)
C:\work>
NOTE: 以後全都要在命令提示模式下操作
3. 假設:專案目錄 myapp,反向域樣式識別碼 aaa.bbb.ccc.MyApp,應用程式的顯示標題 MyApp
命令提示字元下執行
C:\work>cordova create myapp com.mycompany.myteam.myapp MyApp
MEMO: cordova create <PATH> [ID [NAME [CONFIG]]] [options]
P.S. cordova 將在 C:\work\myapp 下生成專案檔案
4. 進入 C:\work\myapp 目錄下
C:\work>cd C:\work\myapp
C:\work\myapp>
*** NOTE: 專案目錄建立後,以後所有 cordova 命令全都在專案目錄 (C:\work\myapp)
下操作
5. 加入目標平台 android, ios ...
c:\work\myapp>cordova platform add android ios
NOTE: 你必須先安裝好該平台的開發環境 (browser 除外),否則會提示警告,並且之
後跑執行(run)/建構(build)會失敗
MEMO: cordova platform <command> [options]
MEMO: cordova 7.0 之後,'platform add' 自動加 '--save' 選項,參見下
面 D) 的 NOTE 2,3
6. (非必要,但建議) 檢查是否滿足平台的開發環境需求
c:\work\myapp>cordova requirements --verbose
NOTE: 環境變數可能(*)須要手動設置...
Android platform:
JAVA_HOME
...
ANDROID_HOME
如果安裝在
C:\Program Files\Android\Android Studio
C:\Users\MyName\AppData\Local\Android\sdk
則執行(臨時)
c:\work\myapp>set ANDROID_HOME=C:\Users\MyName\AppData\Local\Android\sdk
或新增環境變數(永久)
控制台->進階系統設定->環境變數->系統變數, 新增...
PATH
(我沒做) 建議新增 C:\Users\MyName\AppData\Local\Android\sdk\platform-tools;C:\Users\MyName\AppData\Local\Android\sdk\tools;C:\Users\MyName\AppData\Local\Android\sdk\tools\bin
Gradle 執行路徑可能(*)需要新增到 PATH 變數 (我沒做)
MEMO: 經驗上這邊常常會檢查出錯 (這表示稍後建構應用程式也會失敗),錯誤的原因
requirements 指令已經列出,如果是環境變數沒設置很容易解決,而正確設置還
出錯是常常在網路社群 (like StackOverflow...) 被詢問的,如 Gradle 找不到
最多人問...
我發現終究原因是平台的 SDK/Tools 頻繁改版,但 SDK/Tools 與 Cordova
platform 開發的人員是不同的一群人,Cordova platform 開發也會改版,並依據
當前的 SDK/Tools 測試發行(*),唯沒法呼應全部玩家的環境及手上 SDK/Tools 的
版本,所以建議一開始各抓最新版 (平台的 SDK 日期不要比 Cordova 新) 設置好
如果測過,謹慎更新 SDK(*) 或 Cordova,再發生 requirements 有錯誤時,無法
解決則最終就是回歸上次 ok 的版本..."_"
如下有一個案例,更新 Android SDK Tools 後,Cordova 報 Gradle 找不到
因 Gradle 搬家了:
C:\Users\MyName\AppData\Local\Android\sdk\tool
到:
C:\Program Files\Android\Android Studio\plugins\android\lib\templates\gradle\wrapper
...
http://stackoverflow.com/questions/42613882/error-could-not-find-gradle-wrapper-within-android-sdk-might-need-to-update-yo
(*)建議: 安裝 SDK/Tools 時預設元件不要核銷,Cordova platform 有時(**)
會用到...
並用預設的路徑,Cordova 優先會去那邊找...就可不用設置環境變數
(**)P.S. 如我有一次更新 android platform 後,出現 cmd: Command failed with
exit code 1 Error output: 'avdmanager'....錯誤,研究發現這是新版
android platform 改用此 cmd tool (來自 android sdk tools) 來判定
android target,但我 ANDROID_HOME 下是沒這東西的,後重新安
裝 Android Studio 時懷疑可能是我之前省硬碟空間沒裝虛擬機器選項?
-----------------------------------------------------------
C) 編輯 cordova 專案
-----------------------------------------------------------
1. 撰寫你的 html5 程式碼位於
C:\work\myapp\www\
NOTE: 此 www 目錄會在執行/建構時複製至目標平臺的子目錄中,如 platforms/ios/www 或
platforms/android/assets/www,請編輯此處 www 目錄中的檔案,而不是位於平臺的
子目錄下的檔案
2. (非必要) 如果需要安裝外掛
c:\work\myapp>cordova plugin add cordova-plugin-inappbrowser
c:\work\myapp>cordova plugin add cordova-plugin-camera
...etc
3. 執行
c:\work\myapp>cordova run android
構建指定平台
c:\work\myapp>cordova build android
或構建全部
c:\work\myapp>cordova build
或發行(簽署)
c:\work\myapp>cordova run android --release -- --keystore=../my_release_key.keystore --storePassword=my_password --alias=my_alias_name --password=my_password
c:\work\myapp>cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --alias=mykey
NOTE: 當使用上述 CLI(Command Line Interface) 去執行/建構應用程式 (或外掛重新安裝)
,專案目錄下 /platforms/ 裡面的某些檔案會被 CLI 覆蓋,所以除非知道哪些不會有影
響 (如: platforms\android\src\com\ 下加入自己的 android java 程式...),不
應該對裡面的文件做編輯修改
MEMO: 簽署: https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#signing-an-app
4. (非必要) 除錯
MEMO: 除錯: https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#debugging
5. (非必要) 更新
cordova 本身
更新參考 A) 的第 6 項
查各平台最後版本 (網路)
npm info cordova-android version
npm info cordova-ios version
...etc
專案目前安裝平台及版本
cordova platform ls
更新至最後(固定標記)版本
cordova platform update android
...etc
NOTE: 各 cordova 版本發行時會固定標記(pinned)一個預設平台版本號
(available platforms), platform update/add 只會更新到/加入該版,除非指
定版號(如下),或先更新 cordova
更新至指定版本
cordova platform update android@5.4.3
...etc
NOTE: 可以任意指定網路上有的版本
各外掛最後版本
npm info cordova-plugin-inappbrowser version
npm info cordova-plugin-whitelist version
...etc
專案目前安裝外掛及版本
cordova plugin ls
更新至最後(固定標記)版本
cordova plugin update cordova-plugin-inappbrowser (中文版文件你弄錯了吧?)
或
cordova plugin remove cordova-plugin-inappbrowser
cordova plugin add cordova-plugin-inappbrowser
...etc
更新至指定版本
cordova plugin remove cordova-plugin-inappbrowser
cordova plugin add cordova-plugin-inappbrowser@1.2.3
...etc
安裝 cordova-check-plugins 可一次更新專案裡全部外掛 (https://github.com/dpa99c/cordova-check-plugins)
npm install -g cordova-check-plugins
7. (非必要) 修改專案設置
編輯下面文件
c:\work\myapp\config.xml
-----------------------------------------------------------
D) 其他命令 (全都在 C:\work\myapp 下操作)
-----------------------------------------------------------
cordova platform remove ios
cordova plugin remove cordova-plugin-camera --save
cordova emulate android
NOTE: 如果移除平台 (platform remove), platforms/xx 將被刪除,所以任何你在裡面
作的異動會消失!
NOTE: When adding/removing plugins or platforms, use the '--save' flag to
add/remove them to config.xml.
Existing projects can use 'cordova plugin save' and 'cordova platform
save' commands to save all previously installed plugins and platforms
into your project's config.xml.
Platforms and plugins will be autorestored when cordova prepare is run.
NOTE: After Cordova 7.0 it will automatically save that platform or plugin to
your config.xml
and package.json
. The --save
flag is no longer required to
save. Use --nosave
to prevent saving.
MEMO: 更多: https://cordova.apache.org/docs/en/latest/reference/cordova-cli/
-----------------------------------------------------------
E) 參考
-----------------------------------------------------------
https://cordova.apache.org/docs/en/latest/guide/cli/
https://cordova.apache.org/docs/en/latest/