基于jQuery Mobile技術(shù)開(kāi)發(fā)的移動(dòng)應(yīng)用

朱海鑫

摘要 iQuery Mobile是用于創(chuàng)建移動(dòng)Web應(yīng)用的前端開(kāi)發(fā)框架，具有簡(jiǎn)單、高效的特點(diǎn)。它能讓沒(méi)有美工基礎(chǔ)的開(kāi)發(fā)者在極短的時(shí)間內(nèi)做出非常完美的界面設(shè)計(jì)，并且支持市面上常見(jiàn)的所有移動(dòng)平臺(tái)。

【關(guān)鍵詞】iQuery Mobile 移動(dòng)Web應(yīng)用HTML5

1 引言

通過(guò)使用iQuery Mobile方便的完成移動(dòng)網(wǎng)頁(yè)的布局。不同設(shè)備使用不同開(kāi)發(fā)語(yǔ)言，iQuery Mooile可以很好的兼容不同的設(shè)備或操作系統(tǒng)：

Android和Blackberry（黑莓）使用JAVA語(yǔ)言。

iOS使用ObjectiveC語(yǔ)言

Windows Phone使用C#和net等。

iQuery Mobile技術(shù)只使用HTML，CSS和JavaScript，因此很好的解決了不同設(shè)備之間的兼容問(wèn)題。在中職學(xué)校計(jì)算機(jī)專業(yè)里，開(kāi)展網(wǎng)頁(yè)制作課程是常見(jiàn)，如HTML5和CSS3通常在一二年級(jí)就已開(kāi)展，為制作網(wǎng)站打下基礎(chǔ)。如今，為了適應(yīng)新時(shí)代，開(kāi)發(fā)移動(dòng)過(guò)互聯(lián)應(yīng)用，及時(shí)開(kāi)展本課程對(duì)于中職學(xué)校中的計(jì)算機(jī)專業(yè)學(xué)生來(lái)說(shuō)非常實(shí)用。該課程目前在我校三年級(jí)計(jì)算機(jī)專業(yè)學(xué)生中教學(xué)，反應(yīng)熱烈。學(xué)生通過(guò)學(xué)習(xí)，基本掌握了制作應(yīng)用于手機(jī)上的網(wǎng)站，效果良好。

2 jQuery Mobile安裝

你可以通過(guò)以下幾種方式將iQueryMobile添加到你的網(wǎng)頁(yè)中：

（1）從CDN中加載iQuery Mobile。

（2）從網(wǎng)上下載iQuery Mobile庫(kù)。

其中，在平時(shí)教學(xué)過(guò)程中，我們選擇應(yīng)用第二種，下載庫(kù)離線包來(lái)教學(xué)應(yīng)用。將下載的文件放置于與網(wǎng)頁(yè)同一目錄下。然后在網(wǎng)頁(yè)的頁(yè)頭里添加代碼把離線文件插入，完成安裝。

其中jquery.mobile.css是樣式文件，j querY.ls是Javascript庫(kù)文件，jquery.mobile.js是基于移動(dòng)Web應(yīng)用的Javascript庫(kù)文件。

3 開(kāi)發(fā)環(huán)境的選擇

因此自然不能為它配上太復(fù)雜的開(kāi)發(fā)環(huán)境。對(duì)于新手來(lái)說(shuō)，還是使用一些比較簡(jiǎn)單的網(wǎng)頁(yè)開(kāi)發(fā)工具輕松一些，如學(xué)生們一直在學(xué)習(xí)使用的Dreamweaver。

4 班級(jí)論壇項(xiàng)目開(kāi)發(fā)案例

班級(jí)學(xué)生經(jīng)過(guò)大半個(gè)學(xué)期的技術(shù)的學(xué)習(xí)，基本掌握了移動(dòng)頁(yè)面的設(shè)計(jì)技術(shù)，結(jié)合所學(xué)的PHP動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)，后邊就可以開(kāi)展移動(dòng)網(wǎng)頁(yè)的項(xiàng)目設(shè)計(jì)。本項(xiàng)目是一個(gè)班級(jí)論壇手機(jī)網(wǎng)站。首先在PHP技術(shù)上結(jié)合iQuery Mobile頁(yè)面技術(shù)，完成網(wǎng)站的建設(shè)，后臺(tái)使用MySQL數(shù)據(jù)庫(kù)。本項(xiàng)目功能相對(duì)簡(jiǎn)單，對(duì)中職學(xué)生來(lái)說(shuō)，教學(xué)上足夠使用。

在本文中，主要介紹項(xiàng)目中所使用的iQuery Mobile頁(yè)面技術(shù)，該項(xiàng)目首頁(yè)為用戶登錄界面，如圖1所示。頁(yè)面的設(shè)計(jì)簡(jiǎn)潔而大方，包含了頁(yè)面的頭部工具欄，頁(yè)面中部的內(nèi)容框，頁(yè)面底部的工具欄三部分，代碼如圖2所示。

其中，在iQuerymobile里，通過(guò)設(shè)置定義HTML5 data的屬性來(lái)完成交互式外觀界面，具體可參考相關(guān)書籍或互聯(lián)網(wǎng)教程。

5 后臺(tái)數(shù)據(jù)

設(shè)計(jì)對(duì)于項(xiàng)目的功能，本系統(tǒng)使用的是MySQL數(shù)據(jù)庫(kù)。MySQL使用的是標(biāo)準(zhǔn)化語(yǔ)言。結(jié)合PHP和Apache組成了良好的開(kāi)發(fā)環(huán)境，也是目前常見(jiàn)的中小型網(wǎng)站的首選。本系統(tǒng)主要設(shè)計(jì)有的數(shù)據(jù)表：comment、user admin和user_ordinary表。如圖8所示。其中comment表主要記錄了發(fā)表的內(nèi)容。user admin表記錄了管理員的信息資料。userordinary表主要記錄了普通用戶的資料，如圖9所示。

6 結(jié)語(yǔ)

隨著智能手機(jī)的普及，使用手機(jī)瀏覽頁(yè)面的時(shí)間也越來(lái)越長(zhǎng)，更多的人會(huì)使用手機(jī)瀏覽替代電腦PC瀏覽網(wǎng)頁(yè)。這就造成現(xiàn)在市場(chǎng)上對(duì)移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)人員有更多的需求，中職學(xué)生也恰恰非常適合成為這股力量?；谀壳皩W(xué)校的計(jì)算機(jī)專業(yè)的教學(xué)安排，學(xué)生能較好的適應(yīng)和掌握所學(xué)知識(shí)，為以后就業(yè)道路打下良好的知識(shí)基礎(chǔ)。本文主要介紹基于iQuery Mobile技術(shù)開(kāi)發(fā)的移動(dòng)應(yīng)用研究，希望能給入門級(jí)的開(kāi)發(fā)者對(duì)移動(dòng)web網(wǎng)站的開(kāi)發(fā)有一個(gè)簡(jiǎn)單的了解和認(rèn)識(shí)。

參考文獻(xiàn)

[1]李柯泉，構(gòu)建跨平臺(tái)APP iQuery Mobile移動(dòng)應(yīng)用實(shí)戰(zhàn)[M].北京：清華大學(xué)出版社.2015.

[2]趙增敏，移動(dòng)網(wǎng)頁(yè)設(shè)計(jì)（基于iQueryMobile） [M].北京：電子工業(yè)出版社.2017.

[3]覃鳳萍.基于HTML5+iQuery Mobile的移動(dòng)Web應(yīng)用開(kāi)發(fā)研究[J].大眾科技，2015.