海水正藍

一、起始之語

我一直都是在PC上折騰網頁的，這會兒怎么風向周邊搗鼓起手機網頁開發呢？原因是公司原先使用Java開發的產品，耗了不少人力財力，但是最后的效果卻不怎么好。因為，Android系統一套東西，iPhone又是新的一套，折騰死人吶。

于是總監發狠，讓我把手上的活都交出去，專心折騰web版的，看看最后效果如何。

加上我覬覦手機上的開發學習很久了，于是，一拍即合，搞起了手機開發方面的學習。

分享是很好的提高自身學習的方法。因為分享過程中梳理了所學，往往會有些意想不到的心得與收獲。如此利人利已的事情，自然樂意為之。于是，自己在文 章id > 2000 的這一歷史性時刻，新建了一個“mobile相關”的分類目錄，把移動相關的一些東西總結，整理，分享出去，大家共勉。

二、我的選擇

顯然，當下手機web開發移不開CSS3 + HTML5以及JavaScript。目前，也應運而生了很多開發的框架，有膠水層的，也有顯示層的（不羅列）。因為個人偏好以及篩選，決定使用PhoneGap實現與設備相機，通訊錄等交互，jQuery Mobile實現頁面UI的顯示以及相關交互。

如果時間足夠，我想我會針對項目本身重新搞個更輕便靈活的交互框架。考慮到現實情況，還是決定使用他人的UI框架。

下截圖為今兒個上午(2011-11-1 11:11)跑通的第一個PhoneGap下的Android手機程序：

不過PhoneGap是與膠水層打交道的東西，要說到這東西還需要些時日。我們可以先把目前投向與頁面顯示相關的UI框架上。例如，本文要說起的jQuery Mobile。

三、我眼中的jQuery Mobile

目前為止，jQuery Mobile的正式版還沒有出來，但是這并不妨礙對其的使用。官方首頁上說其代碼輕量(lightweight code)。可能跟Sencha Touch相比確實輕量。但是，在我看來（本身為框架的原因），其實代碼還是蠻啰嗦的（例如CSS文件min后有49K之多）。對于實際的項目而言，皮膚風格不可能幾種并存的，所以，其a~e的五種模板選擇實際有些多余，很多都是打醬油的命。

而且，實際項目中的設計師設計東東的時候不可能是總是跟著jQuery Mobile的UI來的。因此，我們難免會碰到對其模板進行修改或是新添加的情況。

不過，我可以確信的是，如果在個人網站或是其他一些非對外的中小項目上使用jQuery Mobile的話，一定會爽歪的！

然后，還有一點我得承認。jQuery Mobile的上手可比Sencha Touch快多了。其UI顯示基本上就是基于HTML5的data-自定義屬性來的，跟它的老爸爸jQuery一樣，確實是write less, do more.

頁面元素的UI顯示完全可以根據HTML代碼內容和屬性而來，不需要任何額外的JavaScript代碼或是CSS代碼，有模有樣的手機頁面效果就可以出爐。而且，要出效果頁面，你只要靜下心花個1整天的時間把官方的介紹文檔看一篇就可以了。真這么簡單。

例如下面這個純顯示的頁面們（PC建議使用Chrome瀏覽器圍觀）。
您可以狠狠地點擊這里：jQuery Mobile的UI展示頁面

手機可以訪問以下地址：http://www.zhangxinxu.com/jq/mobile/

這是在桌面版opera 10.1 mobile下的顯示效果：
默認進入：

選擇“文章搜索”項 → 點擊搜索框后：

如果是在Android系統或是iPhone上，漸變效果，平滑切換效果都會顯露出來的。

上面加起來差不多有10多個HTML頁面，搗鼓了幾個小時就出來的，當然是在無敵模式下。為什么快呢？因為基本上沒有動一點新的CSS代碼或是JavaScript代碼。直接write HTML即可。如果你對jQuery Mobile熟悉的話，可以更快。

語義化
要想使用jQuery Mobile，很重要的一點就是要注意語義化。到不是使用HTML5之類的標簽（考慮到漸進增強，jQuery Mobile使用的還是XHTML時代的標簽），而是div, p, ul ,li, h1~6等的使用。

在jQuery Mobile標簽下，不同的標簽所對應的UI效果很多都已經定死了。例如：

<div data-role="header">     <h1>鑫空間-鑫生活</h1>     <a href="#" data-icon="arrow-r" data-iconpos="right">中文</a> </div>

上面這段data-role為header的div中，h1標簽不僅僅是個標題了，而是直接會修改當下頁面的title值，因此，上面幾行代碼對應的頁面的title就是“鑫空間-鑫生活”，即使你頭部的title寫的是“今天是小光棍節，呼啦啦~~”。

而后面的a標簽文字雖然沒有指定data-role="button"，但是，誰叫他生在data-role="header"的div下呢，于是，它就是個顯示按鈕的命。而且，JMobile自動將其定位到右側了。

語義化的標簽決定了其位置，顯示等。確實方便，但是有所限制。可謂有利有弊。

還有列表li標簽中的第一個圖片，會自動變成列表縮略圖等，好多好多，你試一下就會發現這東西還是挺有意思的。

嘛，不過嗎，不用急，冰凍三尺非一日之寒，什么東西都是慢慢積累的。才剛開始，說多了未必是好。所以，本文就嘮叨這么多。