我一直都是在PC上折騰網(wǎng)頁的，這會兒怎么風(fēng)向周邊搗鼓起手機網(wǎng)頁開發(fā)呢？原因是公司原先使用Java開發(fā)的產(chǎn)品，耗了不少人力財力，但是最后的效果卻不怎么好。因為，Android系統(tǒng)一套東西，iPhone又是新的一套，折騰死人吶。
于是總監(jiān)發(fā)狠，讓我把手上的活都交出去，專心折騰web版的，看看最后效果如何。
加上我覬覦手機上的開發(fā)學(xué)習(xí)很久了，于是，一拍即合，搞起了手機開發(fā)方面的學(xué)習(xí)。
分享是很好的提高自身學(xué)習(xí)的方法。因為分享過程中梳理了所學(xué)，往往會有些意想不到的心得與收獲。如此利人利已的事情，自然樂意為之。于是，自己在文章id > 2000 的這一歷史性時刻，新建了一個“mobile相關(guān)”的分類目錄，把移動相關(guān)的一些東西總結(jié)，整理，分享出去，大家共勉。
顯然，當(dāng)下手機web開發(fā)移不開CSS3 + HTML5以及JavaScript。目前，也應(yīng)運而生了很多開發(fā)的框架，有膠水層的，也有顯示層的（不羅列）。因為個人偏好以及篩選，決定使用PhoneGap實現(xiàn)與設(shè)備相機，通訊錄等交互，jQuery Mobile實現(xiàn)頁面UI的顯示以及相關(guān)交互。
如果時間足夠，我想我會針對項目本身重新搞個更輕便靈活的交互框架。考慮到現(xiàn)實情況，還是決定使用他人的UI框架。
下截圖為今兒個上午(2011-11-1 11:11)跑通的第一個PhoneGap下的Android手機程序：
不過PhoneGap是與膠水層打交道的東西，要說到這東西還需要些時日。我們可以先把目前投向與頁面顯示相關(guān)的UI框架上。例如，本文要說起的jQuery Mobile。
目前為止，jQuery Mobile的正式版還沒有出來，但是這并不妨礙對其的使用。官方首頁上說其代碼輕量(lightweight code)?？赡芨?code>Sencha Touch相比確實輕量。但是，在我看來（本身為框架的原因），其實代碼還是蠻啰嗦的（例如CSS文件min后有49K之多）。對于實際的項目而言，皮膚風(fēng)格不可能幾種并存的，所以，其a~e的五種模板選擇實際有些多余，很多都是打醬油的命。
而且，實際項目中的設(shè)計師設(shè)計東東的時候不可能是總是跟著jQuery Mobile的UI來的。因此，我們難免會碰到對其模板進行修改或是新添加的情況。
不過，我可以確信的是，如果在個人網(wǎng)站或是其他一些非對外的中小項目上使用jQuery Mobile的話，一定會爽歪的！
然后，還有一點我得承認。jQuery Mobile的上手可比Sencha Touch快多了。其UI顯示基本上就是基于HTML5的data-自定義屬性來的，跟它的老爸爸jQuery一樣，確實是write less, do more.
頁面元素的UI顯示完全可以根據(jù)HTML代碼內(nèi)容和屬性而來，不需要任何額外的JavaScript代碼或是CSS代碼，有模有樣的手機頁面效果就可以出爐。而且，要出效果頁面，你只要靜下心花個1整天的時間把官方的介紹文檔看一篇就可以了。真這么簡單。
例如下面這個純顯示的頁面?zhèn)儯≒C建議使用Chrome瀏覽器圍觀）。
您可以狠狠地點擊這里：jQuery Mobile的UI展示頁面
手機可以訪問以下地址：http://www.zhangxinxu.com/jq/mobile/
這是在桌面版opera 10.1 mobile下的顯示效果：
默認進入：
選擇“文章搜索”項 → 點擊搜索框后：
如果是在Android系統(tǒng)或是iPhone上，漸變效果，平滑切換效果都會顯露出來的。
上面加起來差不多有10多個HTML頁面，搗鼓了幾個小時就出來的，當(dāng)然是在無敵模式下。為什么快呢？因為基本上沒有動一點新的CSS代碼或是JavaScript代碼。直接write HTML即可。如果你對jQuery Mobile熟悉的話，可以更快。
語義化
要想使用jQuery Mobile，很重要的一點就是要注意語義化。到不是使用HTML5之類的標簽（考慮到漸進增強，jQuery Mobile使用的還是XHTML時代的標簽），而是div, p, ul ,li, h1~6等的使用。
在jQuery Mobile標簽下，不同的標簽所對應(yīng)的UI效果很多都已經(jīng)定死了。例如：
<div data-role="header"> <h1>鑫空間-鑫生活</h1> <a href="#" data-icon="arrow-r" data-iconpos="right">中文</a></div>
上面這段data-role為header的div中，h1標簽不僅僅是個標題了，而是直接會修改當(dāng)下頁面的title值，因此，上面幾行代碼對應(yīng)的頁面的title就是“鑫空間-鑫生活”，即使你頭部的title寫的是“今天是小光棍節(jié)，呼啦啦~~”。
而后面的a標簽文字雖然沒有指定data-role="button"，但是，誰叫他生在data-role="header"的div下呢，于是，它就是個顯示按鈕的命。而且，JMobile自動將其定位到右側(cè)了。
語義化的標簽決定了其位置，顯示等。確實方便，但是有所限制?？芍^有利有弊。
還有列表li標簽中的第一個圖片，會自動變成列表縮略圖等，好多好多，你試一下就會發(fā)現(xiàn)這東西還是挺有意思的。
嘛，不過嗎，不用急，冰凍三尺非一日之寒，什么東西都是慢慢積累的。才剛開始，說多了未必是好。所以，本文就嘮叨這么多。
聯(lián)系客服
