品嘗Android（二）jQuery Mobile初探

時間過得好快，手機剛刷2.3.3沒多久，Google已經放出了2.3.4、3.1的ROM，發布了2.4的代號，儘管較高版本面向的群體非常小眾，但是Android仍然在不遺餘力的追趕著iPhone、iPad。希望這兩大陣營可以良性競爭，為使用者帶來更多更好的裝置和軟體。同時對WP7的芒果更新期待一下，別讓觀眾等的太久，太晚上市，吃的人也不多了。

測試代碼下載

 

言歸正傳，本次開始關注下jQuery Mobile。jQuery早已在JavaScript架構中脫穎而出，平易近人的協議與文法，帶來了眾多的支援者。jQuery Mobile是jQuery在移動終端上的架構，可以認為是jQuery的精簡版，官方首頁：http://jquerymobile.com/。

此項目目前還處於Alpha階段，最新版本為Alpha 4.1，支援目前絕大多數移動平台：

得益於HTML5在移動終端中的良好發展，jQuery廣泛使用了HTML5的新元素屬性，為HTML5的進一步推廣做出了應有的貢獻。

官方的Demo和Doc比較好，建議跟著做一遍，下面我們簡單測試一下。

 

一、下載jQuery Mobile組件

官方：http://jquerymobile.com/download/

 

二、建立網站項目

2.1、使用VS2010建立一個ASP.NET項目，將所需的js、css添加進來：

 

2.2、VS2010可以直接拖拽js、css產生相應的標籤，非常方便：

 

2.3、搭建一個基本的頁面架構，包含標題、內容、頁尾：

    <div data-role="page">

        <div data-role="header">

            <h1>

                Page Title</h1>

        </div>

        <!-- /header -->

        <div data-role="content">

            <p>

                Page content goes here.</p>

        </div>

        <!-- /content -->

        <div data-role="footer">

            <h4>

                Page Footer</h4>

        </div>

        <!-- /footer -->

    </div>

data-role即HTML5的自訂屬性。

2.4、F5運行，我使用的Chrome 11。效果如下：

 

三、搭建伺服器

為了在手機上訪問，需要搭建一個Web伺服器，先在PC上用IIS，然後在手機上搭建。

3.1、在IIS 中建立一個網站：

 

注意應用程式集區的配置，我用的.NET 4.0：

 

3.2、PC上瀏覽正常：

 

3.3、下面在手機上訪問，首先啟用Wifi，家裡有無線路由，故和PC組成區域網路，PC IP：192.168.0.100，手機 IP：192.168.0.101，手機中安裝了VNCServer，在PC 上通過RealVNC 的用戶端測試效果：

原生瀏覽器：

 

Firefox Mobile 4：

 

Opera Mobile 11：

 

3.4、為了開發測試方便，在手機上搭建一個Web 服務器，我使用的kws，一個小型的Web伺服器，效能還不錯。

首先需要將網頁和js、css等部署到手機上，kws只是個靜態頁面伺服器，不支援ASP.NET。

為了方便部署，在手機上啟用FTP伺服器，我使用的SwiFTP，在PC上用FileZilla串連：

我刷的i9000的2.3.3 ROM，系統磁碟分割已經是Ext4，部分目錄在Windows 上無法讀取。下面將HTML頁面部署到SD卡中：

Scripts目錄中存放的是js、css等。

 

配置一下kws的主目錄，別忘了重啟kws使配置生效：

 

PC上訪問正常：

 

手機上運行也正常：

 

小結：

移動終端的浪潮已經來臨，各種針對移動終端的移植、最佳化、測試、系統將會越來越多。jQuery Mobile作為一個優秀的跨平台B/S解決方案，值得關注。後續篇章會繼續測試官方樣本，深入窺探一下這個"微觀世界"。

註：為了便於測試、部署程式，高配的手機可以適當安裝些伺服器，如FTP、Web、DNS、VNC伺服器等。