Mobile框架開發(fā)移動(dòng)端WebApp步驟詳解

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:51:44

Mobile框架開發(fā)移動(dòng)端WebApp步驟詳解

Mobile框架開發(fā)移動(dòng)端WebApp步驟詳解:這次給大家?guī)鞰obile框架開發(fā)移動(dòng)端Web App步驟詳解，Mobile框架開發(fā)移動(dòng)端Web App的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。一.jQuery Mobile 的漸進(jìn)增強(qiáng)設(shè)計(jì)與瀏覽器支持根據(jù)維基百科（ Wikipedia ）的解釋，漸進(jìn)增強(qiáng)的設(shè)計(jì)主要包括以下幾

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Mobile框架開發(fā)移動(dòng)端WebApp步驟詳解:這次給大家?guī)鞰obile框架開發(fā)移動(dòng)端Web App步驟詳解，Mobile框架開發(fā)移動(dòng)端Web App的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。一.jQuery Mobile 的漸進(jìn)增強(qiáng)設(shè)計(jì)與瀏覽器支持根據(jù)維基百科（ Wikipedia ）的解釋，漸進(jìn)增強(qiáng)的設(shè)計(jì)主要包括以下幾

這次給大家?guī)鞰obile框架開發(fā)移動(dòng)端Web App步驟詳解，Mobile框架開發(fā)移動(dòng)端Web App的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

一.jQuery Mobile 的漸進(jìn)增強(qiáng)設(shè)計(jì)與瀏覽器支持根據(jù)維基百科（ Wikipedia ）的解釋，漸進(jìn)增強(qiáng)的設(shè)計(jì)主要包括以下幾點(diǎn)

basic content should be accessible to all web browsers （所有瀏覽器都應(yīng)能訪問全部基礎(chǔ)的內(nèi)容）

basic functionality should be accessible to all web browsers （所有瀏覽器都應(yīng)能訪問全部基礎(chǔ)的功能）

sparse, semantic markup contains all content （所有的內(nèi)容應(yīng)該在少量語義標(biāo)簽內(nèi)）

enhanced layout is provided by externally linked CSS （增強(qiáng)的功能應(yīng)該由外部 CSS 提供）

enhanced behavior is provided by unobtrusive, externally linked JavaScript （增強(qiáng)的行為由外部 JavaScript 提供）

end-user web browser preferences are respected （終端用戶的瀏覽器習(xí)慣應(yīng)受尊重）

若在實(shí)際的開發(fā)中使用到 Web SQL Database 等 HTML5 技術(shù)，則最終的 Web App 被支持度會(huì)比以上 jQuery Mobile 的被支持度低，但兩個(gè)主流的移動(dòng)瀏覽器 Android 與 Apple iOS 的系統(tǒng)瀏覽器及其桌面版本肯定能提供最好的支持。

二.HTML5 data-* 屬性jQuery Mobile 依賴 HTML5 data-* 屬性來提供一系列的支持（ UI 組件、過渡和頁面結(jié)構(gòu)），不支持該 HTML5 屬性的瀏覽器會(huì)默認(rèn)忽略這些屬性的效果，比如在頁面中添加一個(gè)版頭，可以使用以下的 HTML：

<p data-role="header">
 <h1>jQuery Mobile Demo</h1>
</p>

這樣就能產(chǎn)生一個(gè) jQuery Mobile 樣式的版頭，從下文的圖中可以看出，這樣的版頭樣式很適合移動(dòng)設(shè)備使用，并且在添加 data-role="header" 屬性后，p 內(nèi)的 h1 也會(huì)被渲染成一定樣式，這就是 jQuery Mobile 的方便快捷，也是它的設(shè)計(jì)宗旨—— Write Less, Do More 。

除此之外 jQuery Mobile 中還有以下的 data-role 屬性（部分屬性），已經(jīng)賦予了一定的樣式及用戶操作響應(yīng)效果。

data-role="content" ， data-role="button" ， data-theme ="" , data-role="controlgroup" ， data-inline="true" ， data-role="fieldcontain" ， data-role="listview" ， data-rel="dialog" ， data-transition="pop" ，分別對(duì)應(yīng)著主體內(nèi)容、按鈕，主題顏色，已編輯按鈕，內(nèi)聯(lián)按鈕，表單元素，列表視圖，對(duì)話框，頁面過渡。

三.jQuery Mobile 基本使用方法1.引入 jQuery Mobile
使用 jQuery Mobile ，需要在網(wǎng)頁頁眉中引入 jQuery Mobile 組件，包括以下部分
（1）jQuery 庫
（2）jQuery Mobile CSS
（3）jQuery Mobile 庫

可以通過這樣的 head 引入以上組件

<head>
 <title>jQuery Mobile Demo</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>

2.加入 viewport在 Android 的瀏覽器中，若沒有設(shè)定頁面寬度，它會(huì)認(rèn)為頁面寬度是 980px ，因此我們可以在 head 里加入一個(gè) viewport，讓移動(dòng)瀏覽器知道屏幕大小，只是一個(gè) viewport 標(biāo)簽，就已經(jīng)給用戶帶來更好的體驗(yàn)。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5">

3.簡單的頁面實(shí)例在引入 jQuery Mobile 需要的組件后，我們可以創(chuàng)建 jQuery Mobile 頁面，下面給出一個(gè)簡單的例子。

<!DOCTYPE html>
<html>
<head>
 <title>jQuery Mobile Demo</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
 
<body>
 
<p data-role="page" id="home">
 
 <p data-role="header">
 <h1>jQuery Mobile Demo</h1>
 </p>
 
 <p data-role="content">
 <p>主體內(nèi)容</p>
 </p>
 
 <p data-role="footer">
 <h2>Footer</h2>
 </p>
 
</p>
 
</body> 
</html>

2016517163442696.png (335×365)

對(duì)于 jQuery Mobile ，每定義一個(gè) data-role="page" 就相當(dāng)于一個(gè)頁面， jQuery Mobile 默認(rèn)采用 Ajax 的方式操作 DOM，自動(dòng)隱藏除第一個(gè)頁面外的所有頁面，當(dāng)點(diǎn)擊鏈接，鏈接到其他頁面時(shí)會(huì)以 Ajax 的方式加載新頁面的內(nèi)容，下面給出完整實(shí)例。另外，我們還可以使用一些 HTML5 的語義化標(biāo)簽，如 header 的 p 可以直接使用 header 標(biāo)簽，具體的可以參見下面的例子。

<!DOCTYPE html>
<html>
<head>
 <title>jQuery Mobile Demo</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<p data-role="page" id="home">
 <header data-role="header">
 <h1>jQuery Mobile Demo</h1>
 </header>
 <p data-role="content">
 <a href="#page2" data-role="button">列表頁面</a>
 </p>
 <footer data-role="footer">
 <h2>Footer</h2>
 </footer>
</p>
<p data-role="page" id="page2">
 <header data-role="header">
 <h1>jQuery Mobile Demo</h1>
 </header>
 <p data-role="content">
 <ul data-role="listview" data-inset="true">
 <li><a href="#home">回到首頁</a></li>
 <li><a href="#home">回到首頁</a></li>
 <li><a href="#home">回到首頁</a></li>
 </ul>
 </p>
 <footer data-role="footer">
 <h2>Footer</h2>
 </footer>
</p>
</body> 
</html>

四.開發(fā)原則首先我們必須知道，一款優(yōu)秀的 Web App ，需要有良好的 UI 與用戶體驗(yàn)（UE），雖然本質(zhì)上作為一個(gè)站點(diǎn)，內(nèi)容才是用戶需要的，但我們?nèi)孕枰褂昧己玫?UI 與 UE 來作為內(nèi)容與用戶的連接，因此我們引入 jQuery Mobile 來為 Web App 制作 UI 與交互。

有了 Web App 的界面，還需要數(shù)據(jù)的交互，這樣才能做出 App 。這里可以使用 PHP 等服務(wù)器腳本與 Mysql 等數(shù)據(jù)庫來為 Web App 提供數(shù)據(jù)驅(qū)動(dòng)，但 Kayo 希望采用一種新的方法，也就是 HTML5 的方法，使用 HTML5 規(guī)范提供的 Web SQL Database —— 一個(gè)簡單強(qiáng)大的 Javascript 數(shù)據(jù)庫 API，可以在本地?cái)?shù)據(jù)庫中存儲(chǔ)數(shù)據(jù)（如內(nèi)嵌在瀏覽器中的 SQLite ），另外還可以使用 HTML5 規(guī)范中的 Storage （本地儲(chǔ)存）來儲(chǔ)存數(shù)據(jù)，這樣就可以減少 Web App 對(duì)于網(wǎng)絡(luò)的依賴，并且整個(gè) Web App 都是使用前端的技術(shù)完成（很震撼吧！）。

最后不得不提的是 offline application cache （離線程序緩存），它也是 HTML5 的特性，允許用戶在無網(wǎng)絡(luò)連接的情況下運(yùn)行 Web App，因此我們可以利用此特性制作支持離線使用的 Web App ，進(jìn)一步減少 Web App 對(duì)于網(wǎng)絡(luò)的依賴。

1.響應(yīng)式設(shè)計(jì)響應(yīng)式網(wǎng)頁設(shè)計(jì)由 Ethan Marcotte 提出，通俗點(diǎn)說，就是網(wǎng)站界面能夠兼容多種終端，而不是每種終端各自做一個(gè)界面。騰訊等大型網(wǎng)站都有針對(duì)不同的設(shè)備做出不同的界面，比如 3g 版，觸屏版，ipad……，這樣就會(huì)增加了很多重復(fù)的工作量，因此我們可以為網(wǎng)站漸進(jìn)的設(shè)計(jì)一個(gè)界面，自動(dòng)適應(yīng)不同的設(shè)備，當(dāng)然設(shè)備間的效果可以有所差距。這里 Kayo 小插一段，響應(yīng)式設(shè)計(jì)的誕生，很大程度上歸功于移動(dòng)互聯(lián)網(wǎng)的發(fā)展與移動(dòng)設(shè)備硬件的提升，而移動(dòng)互聯(lián)網(wǎng)的發(fā)展本身也依賴于移動(dòng)設(shè)備硬件的提升，因此想不斷提升的 App ，還得先要硬件廠商給力。

言歸正傳，這里提到響應(yīng)式設(shè)計(jì)的理念當(dāng)然是希望在設(shè)計(jì) Web App 時(shí)也應(yīng)用到，而這些 jQuery Mobile 已經(jīng)為開發(fā)者預(yù)先做好， jQuery Mobile 不但默認(rèn)的 UI 樣式里已經(jīng)按響應(yīng)式設(shè)計(jì)做好，它還另外提供了一些為響應(yīng)式設(shè)計(jì)而做的方法，日后會(huì)詳細(xì)介紹。

2.漸進(jìn)式設(shè)計(jì)

“前端設(shè)計(jì)時(shí)通過漸進(jìn)增強(qiáng)功能來設(shè)計(jì)一直也是 Kayo 的設(shè)計(jì)想法，因?yàn)椴煌钠脚_(tái)，不同的設(shè)備有著不同的 Web 環(huán)境，因此對(duì)于一些出色的前端效果很難保證在每臺(tái)設(shè)備上都呈現(xiàn)相同的效果，因此與其為了在所有設(shè)備上做到一樣的效果而降低整體的前端樣式，不如對(duì)于好的設(shè)備可以呈現(xiàn)更出色的效果，而基本的效果就兼容所有的設(shè)備。jQuery Mobile 的設(shè)計(jì)也是如此，核心的功能支持所有的設(shè)備，而較新的設(shè)備則可以獲得更為優(yōu)秀的頁面效果。”

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

Mobile框架開發(fā)移動(dòng)端WebApp步驟詳解

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： app 移動(dòng) 教程

熱門焦點(diǎn)

Mobile框架開發(fā)移動(dòng)端WebApp步驟詳解

Mobile框架開發(fā)移動(dòng)端WebApp步驟詳解

Mobile框架開發(fā)移動(dòng)端WebApp步驟詳解

最新推薦

猜你喜歡

熱門推薦