[Cordova] 將舊的 HTML+CSS+JS Android app 移到 Cordova 上
上一篇寫到在 Mac 上安裝 Cordova 與建立第一個 HelloWorld 專案，
接下來要做的就是把自己寫的多重圖書館登入 app 移植到 Cordova 上～
步驟蠻簡單的，不過有一些問題…
晚點再說吧，先記錄一下步驟～
1. 建立新的 Cordova 專案
上次的 HelloWorld 專案是用 com.example.hello，
這次的因為我之前的 app 是設定成 idv.ephrain.multilibrarylogin，
因此也就使用這個代號～
另外在建立專案時，加上 –link-to 選項，連結至指定的 www 的目錄，
這樣的話我修改原本的程式時，Cordova 專案這邊也可以看到新修改的 HTML/CSS/JS：
cordova create MultiLibraryLogin idv.ephrain.multilibrarylogin --link-to=~/LibraryMultiLogin
上述指令會建立 MultiLibraryLogin 目錄，進到目錄裡面，
可以看到 www 這個目錄確實是 symbolic link 到我們指定的目錄去：
testuser@localhost ~/Cordova/MultiLibraryLogin $ ll
total 24
-rw-r--r--@ 1 testuser staff 1092 Jul 12 23:43 config.xml
drwxr-xr-x@ 3 testuser staff 102 Jul 12 23:35 hooks/
-rw-r--r--@ 1 testuser staff 1226 Jul 12 23:45 info.txt
drwxr-xr-x@ 5 testuser staff 170 Jul 12 23:46 platforms/
drwxr-xr-x@ 6 testuser staff 204 Jul 12 23:46 plugins/
lrwxr-xr-x 1 testuser staff 109 Jul 12 23:35 www@ -> /Users/testuser/LibraryMultiLogin
2. 修改 config.xml
剛建立好的專案目錄下面，有個 config.xml，
打開來修改一下基本設定吧～
剛剛 cordova create 的指令已經幫忙填好了 widget id，
我們可以自己修改一下 name, description, author 這幾個欄位～
另一個很重要的地方是 content src，預設是 index.html，
但我的程式的進入點是 popup.html，因此要修改一下 content src：
<?xml version='1.0' encoding='utf-8'?> <widget id="idv.ephrain.multilibrarylogin" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>圖書館多重帳戶登入</name> <description> 如果你的家庭裡有多張台北市/央圖的圖書館證時，本程式可以幫助你登入所有的帳戶，一次檢視全部的借書狀況。 </description> <author email="[email protected]" href="http://ephrain.pixnet.net/blog"> ephrain </author> <content src="popup.html" /> <plugin name="cordova-plugin-whitelist" version="1" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform> </widget>
上面還有很多其他的欄位，不過目前還看不懂，就先改看得懂的東西就好了～
3. 加入要支援的平台
用 cordova platform add 的指令來加入要支援的平台，
之前是分別下了兩個 add android 和 add ios，
但後來發現可以一次給好幾個平台，一次完成設定：
cordova platform add android ios
4. 在模擬器中執行 app
分別執行下面的指令，在 Android 和 iOS 的模擬器上跑跑看吧～
cordova emulate android cordova emulate ios
執行後看起來還不錯：
不過 Android 模擬器沒有把 app 裝進去執行的問題再度出現，
之前是說重開機讓 Android SDK 的路徑要吃進去，
但我早就重開機過了，總不能每次都一直重開機…
暫時的解法是自己下 adb 指令把 apk 裝進去，
再自己點模擬器裡的 app 跑 (有點麻煩就是了)：
adb install platforms/android/build/outputs/apk/android-debug.apk
目前的這個雛形還有好幾個問題存在，像是：
– confirm() 和 alert() 可以動作，但是對話框的標題是英文的 Confirm 和 Alert，有點醜
– 按下 back 按鈕時會直接關閉 app，但我原本在 Android 那邊是有攔截 OnBackPressed()，可以跳出一個確認對話框
– 如果頁面有跳轉時，按下 back 按鈕會跳到上一頁，但這不一定是我的 app 要的行為
– iOS 模擬器旋轉時，app 的畫面沒有跟著轉 (可是 Android 模擬器的會跟著轉)
上述的這些問題，可能要一邊熟悉 Cordova 一邊看看要怎麼修正了～
不過至少搬移過來 Cordova 上面是沒什麼問題的，繼續努力啦～^^
One thought on “[Cordova] 將舊的 HTML+CSS+JS Android app 移到 Cordova 上”
請問我編譯失敗出現這些問題怎麼處理
Error:D:STEMplatformsandroidgradlew cdvBuildDebug -b
D:STEMplatformsandroidbuild.gradle -PcdvBuildArch=arm -Dorg.gradle.daemon=true -Pandroid.useDeprecatedNdk=true