移動web開發學習一：jquery mobile 和 scrollview的整合

最近有一項目，需要分别開發安卓和IOS版本，原計劃是招兩個開發組，并行開發，但成本太高，而且時間上也來不及，就想試用用PHONEGAP打包WEB應用。

現在用的比較多的是jquery mobile和sencha，一個是jquery，一個是 ext，從難易度來說，jquery很容易上手，ext基本上全是JS，代碼量很大。

本章主要講解jquery mobile的應用，一個小DEMO，網站

界面如下：

http://www.8757.com/mobile/

[img]http://dl.iteye.com/upload/attachment/0061/9004/c57789fc-ce52-3240-8430-043cc8ea1465.jpg[/img]

代碼上，其實就三個檔案，一個html檔案，兩個JS檔案，資料從雲伺服器上擷取JSON，然後進行解析。

先來看一下index.html的代碼

稍為講解一下：

其中cache.manifest表明頁面将緩存，緩存配置在cache.manifest檔案裡，有興趣的同學可下載下傳附近自行研究。

接下來就是JS檔案和樣式檔案的引用了，估計都能看的懂

這是jquery mobile的配置，關于這方面的資料，大家看這裡，會更清楚了

http://www.jqmapi.com/

接着就是jqm的page，page裡分别是head,content,foot，先來看head

<div data-role="header" data-theme="b" data-nobackbtn="true" data-position="fixed"> 
        	<a href="login.html" target="_blank" rel="external nofollow"  data-rel="dialog">登入</a>
    		<h1>佰奇網</h1>
			<a href="reg.html" target="_blank" rel="external nofollow"  data-rel="dialog">注冊</a> 

		</div>
           

一個标題，加兩個按鈕，這個按鈕連結的方式是視窗彈出式。

接着content

content裡有三個部分，一個是select，後面講js時會講到他的作用，接着是listview，這裡用scrollview，有很多同學問怎麼使用scrollview,其實很簡單，在頭檔案裡引用這些檔案即可

這樣，就可以固定底部，然後用手拖放可以滾動中間的listview，類似于微網誌效果了。

接下來是foot

底部代碼也很明白，navbar表明這是個菜單，需要說明的是，navbar一行最多隻能顯示5個，5個後，jqm 會自動進行換行。

最後來看一下，資料渲染這塊，也就是兩個js檔案

其中8757.core.js代碼如下

這裡不是業務代碼，基本上就是定義了一些函數。

8757.app.js

看代碼，一般都是倒退，前面的var定義暫且忽略，最後一行

是調用了core.js的run方法，然後回到這個檔案研究一下這個方法，發現就是從pages裡面一個個去注冊事件，因為隻是個DEMO，就寫了index這個頁面的渲染過程，發現他的event是pagecreate,就是當頁面進入之時，要執行的方法，更多說明見：

http://www.jqmapi.com/api/events.html

注冊的是這個事件

第一步是重新整理清單refreshList();然後又定義了兩個事件監聽，第一個是點“更多”時再重新整理一次，第二個是選擇select時重新整理清單，分别對應content 裡的三個部分。refreshList帶了一個參數，我們來看一下代碼

參數clear_flag發現是有兩個用途，如果為true,listview清空，然後在getJson後，判斷，如果為tue，則直接html，意思是替換listview代碼，如果是false，則插入從雲伺服器上擷取的資料，在業務上即分别對應了兩個按鈕，需要清空的是選擇select，需要添加的是"更多..."

剩下的JS代碼就是解析 JSON了，多說無益了。我上傳了附件，附件裡包含了源代碼，及已經打包好的APK，大家可自行研究。

另外要研究打包的，可看下面文章

http://www.html5mobi.com/discussion/167/phonegap-web-android

最後評價一下jqm吧，入門容易，但如果要開發的是app應用，真不行，速度是真慢，是以準備放棄jqm，轉去研究sencha，過兩天寫一篇吧