[Cordova] 將舊的 HTML+CSS+JS Android app 移到 Cordova 上

[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

 

執行後看起來還不錯:

Screen Shot 2015-07-13 at 12.54.59 PM Screen Shot 2015-07-13 at 12.55.01 PM   

 

不過 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 上面是沒什麼問題的,繼續努力啦~^^

 

 

(本頁面已被瀏覽過 592 次)

One thought on “[Cordova] 將舊的 HTML+CSS+JS Android app 移到 Cordova 上

  1. 請問我編譯失敗出現這些問題怎麼處理
    Error:D:STEMplatformsandroidgradlew cdvBuildDebug -b
    D:STEMplatformsandroidbuild.gradle -PcdvBuildArch=arm -Dorg.gradle.daemon=true -Pandroid.useDeprecatedNdk=true

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料