[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="testuser@gmail.com" 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