HTML5+Javascript開發Android應用

轉載自：http://dmyz.org/archives/298?jdfwkey=di8wg

這篇文章不像之前的一些文章那麼詳細，更接近索引的性質，因為隻是折騰出了一種對我有用的方案，不是一種單一的技術，工具，或是經驗。如果各位像我一樣，想做一個簡單的移動應用(不僅限于Android)，又沒有那麼多時間去研究如何開發，甚至是從頭學習一門語言(比如JAVA)，這會是一種比較好的方案。

現在有一個Web應用，功能很簡單，輸入一串條形碼，查詢出對應的商品價格和編号。直接在移動裝置上通路它也能工作，但浏覽網頁時的縮放按鈕會影響網站的顯示效果。是以第一步要在head部分的meta資訊中加上這一句：

1	<meta name="viewport" content="user-scalable=no, width=device-width" />

這樣網頁就能适應螢幕大小，而且沒有縮放按鈕了。某些網站的“手機版”，其實就是加上這一句，然後調整了一些樣式而已。接下來把網頁元素——文本框/清單/按鈕等——變成移動裝置上的樣式。我比較熟悉jQuery，于是先嘗試了jQTouch和jQMobile。引入jQMobile的方式如下：

1 2 3 4 5 6 7 8 9 10 11 12 13

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> <script type="text/javascript"> //初始化 $(document).bind("mobileinit", function(){ $.extend( $.mobile , { foo: bar }); }); </script> <div data-role="header" data-position="inline"> <h1>Dmyz</h1> </div>

jQTouch也類似，引入相應的js/css檔案，初始化。jQTouch可以有不同的主題，是以外觀的可定制性要比jQMobile好。目前提供Android和iPhone的樣式，可以模拟一些動作——比如在Android上點選按鈕時産生的滑動效果，但穩定性不如jQMobile。使用過程中我遇到了很多Bug，比如animation沒有正确的播放，ajax載入出錯等等。最嚴重的是，如果在清單中使用文本框，會導緻Android上的浏覽器異常退出，在這個Bug被修正前最好不要在生産環境或是其他重要場合使用jQTouch。右圖是jQTouch的兩種樣式。

現在這個Web項目，在外觀上已經和原生的Android應用非常相似了，但它還不是Android應用程式，因為還沒有封裝成APK。是以最後一個技術點，也是最麻煩最關鍵的一點，就是PhoneGap了。如果說sl4a是實作本地腳本和原生Android程式的内部消息通信，PhoneGap則是通過用JAVA語言包裹現有的Web應用，讓它可以直接通過Android來運作，在一個android項目中做如下修改——可以看出它是将Activity轉交給DroidGap來處理：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

package org.dmyz.jqscan;   //import android.app.Activity; import android.os.Bundle; import com.phonegap.*;   public class JqscanActivity extends DroidGap { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); //setContentView(R.layout.main); } }

詳細的打包方式PhoneGap的文檔中已經寫得很詳細了，設定完成後用ant指令生成APK包。我試着加入了Google提供的Zxing包，用JS來調用，這樣就可以直接通過手機的攝像頭，掃描條形碼并得到相應的資料。項目的示範，以及本文中提到的其他程式/資源，一些需要使用的終端指令(Linux)，我都整理到Github上了：https://github.com/perchouli/jqscan

這種開發方式，優點在于不容易crash——至少相比之前嘗試用JAVA開發時相比……目前遇到的主要問題是載入速度，以及第三方庫的各種Bug。當然對我來說重要的意義在于，如果要做一個移動應用的DEMO，現在我可以不用Axure，而是直接用這種方式，做一個幾乎和成品完全一樣的DEMO了。

後續：後來和boss談過這事，原來在很久之前公司就做過phonegap的嘗試了，但phonegap不能完全調用android的api，有時候因為一個功能，就要去做幾個插件。而且運作消耗大，菜單難定制——按menu鍵時，在phonegap封裝的程式中不會彈出任何菜單，是以沒有花時間去繼續研究。說明這種做法暫時還不能滿足生産環境。補充下自己發現的一點，在phonegap封裝的程式中，需要按兩次傳回鍵才能退出程式，還真是不太友善=_,=