首頁 >web前端 >js教程 >Mobile框架開發行動裝置Web App步驟詳解

Mobile框架開發行動裝置Web App步驟詳解

php中世界最好的语言原創: 2018-04-26 11:38:433322瀏覽

這次帶給大家Mobile框架開發行動裝置Web App步驟詳解，Mobile框架開發行動端Web App的注意事項有哪些，以下就是實戰案例，一起來看一下。

一.jQuery Mobile 的漸進增強設計與瀏覽器支援根據維基百科（ Wikipedia ）的解釋，漸進增強的設計主要包括以下幾點

#basic content should be accessible to all web browsers （所有瀏覽器都應能訪問全部基礎的內容）
basic functionality should be accessible to all web browsers （所有瀏覽器都應能存取全部基礎的功能）
sparse, semantic markup contains all content （所有的內容應該在少量語意標籤內）
enhanced layout is provided by externally linked CSS （增強的功能應該由外部CSS 提供）
enhanced behavior is provided by unobtrusive, externally linked #ScriptScriptScript的行為由外部JavaScript 提供）
end-user web browser preferences are respected （終端使用者的瀏覽器習慣應受尊重）

#若在實際的開發中使用到Web SQL Database 等HTML5 技術，則最終的Web App 被支援度會比以上jQuery Mobile 的被支援度低，但兩個主流的行動瀏覽器Android 與Apple iOS 的系統瀏覽器及其桌面版本肯定能提供最好的支援。

二.HTML5 data-* 屬性jQuery Mobile 依賴HTML5 data-* 屬性來提供一系列的支援（ UI 元件、過渡和頁面結構），不支援該HTML5 屬性的瀏覽器會預設忽略這些屬性的效果，例如在頁面中新增一個版頭，可以使用以下的HTML：

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

這樣就能產生一個jQuery Mobile 樣式的版頭，從下文的圖中可以看出，這樣的版頭樣式很適合行動裝置使用，而且在加入data-role="header" 屬性後，p 內的h1 也會被渲染成一定樣式，這就是jQuery Mobile 的方便快捷，也是它的設計宗旨—— Write Less, Do More 。

除此之外 jQuery Mobile 中還有以下的 data-role 屬性（部分屬性），已經賦予了一定的樣式及使用者操作回應效果。

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" ，分別對應主體內容、按鈕，主題顏色，已編輯按鈕，內聯按鈕，表單元素，列表視圖，對話框，頁面過渡。

三.jQuery Mobile 基本使用方法1.引入jQuery Mobile使用jQuery Mobile ，需要在網頁頁眉中引入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 的瀏覽器中，若沒有設定頁面寬度，它會認為頁面寬度是980px ，因此我們可以在head 裡加入一個viewport，讓行動瀏覽器知道螢幕大小，只是一個viewport 標籤，就已經帶給使用者更好的體驗。

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

3.簡單的頁面實例在引入 jQuery Mobile 需要的元件後，我們可以建立 jQuery Mobile 頁面，下面給出一個簡單的範例。



<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>
 

 

 
  

    
jQuery Mobile Demo
  
 
  
    
主体内容
  
 
  
    
Footer

2016517163442696.png (335×365)

對於jQuery Mobile ，每定義一個data-role="page" 就相當於一個頁面， jQuery Mobile 預設採用Ajax 的方式操作DOM，自動隱藏除第一個頁面外的所有頁面，當點擊鏈接，鏈接到其他頁面時會以Ajax 的方式加載新頁面的內容，下面給出完整實例。另外，我們也可以使用一些 HTML5 的

語意化標籤，如 header 的 p 可以直接使用 header 標籤，具體的可以參考下面的範例。



<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>


  

    jQuery Mobile Demo
  
  
    列表页面
  
  
    Footer
  


  

    jQuery Mobile Demo
  
  
    

      回到首页
      回到首页
      回到首页
    
  
  
    Footer

四.开发原则首先我们必须知道，一款优秀的 Web App ，需要有良好的 UI 与用户体验（UE），虽然本质上作为一个站点，内容才是用户需要的，但我们仍需要使用良好的 UI 与 UE 来作为内容与用户的连接，因此我们引入 jQuery Mobile 来为 Web App 制作 UI 与交互。

有了 Web App 的界面，还需要数据的交互，这样才能做出 App 。这里可以使用 PHP 等服务器脚本与 Mysql 等数据库来为 Web App 提供数据驱动，但 Kayo 希望采用一种新的方法，也就是 HTML5 的方法，使用 HTML5 规范提供的 Web SQL Database —— 一个简单强大的 Javascript 数据库 API，可以在本地数据库中存储数据（如内嵌在浏览器中的 SQLite ），另外还可以使用 HTML5 规范中的 Storage （本地储存）来储存数据，这样就可以减少 Web App 对于网络的依赖，并且整个 Web App 都是使用前端的技术完成（很震撼吧！）。

最后不得不提的是 offline application cache （离线程序缓存），它也是 HTML5 的特性，允许用户在无网络连接的情况下运行 Web App，因此我们可以利用此特性制作支持离线使用的 Web App ，进一步减少 Web App 对于网络的依赖。

1.响应式设计响应式网页设计由 Ethan Marcotte 提出，通俗点说，就是网站界面能够兼容多种终端，而不是每种终端各自做一个界面。腾讯等大型网站都有针对不同的设备做出不同的界面，比如 3g 版，触屏版，ipad……，这样就会增加了很多重复的工作量，因此我们可以为网站渐进的设计一个界面，自动适应不同的设备，当然设备间的效果可以有所差距。这里 Kayo 小插一段，响应式设计的诞生，很大程度上归功于移动互联网的发展与移动设备硬件的提升，而移动互联网的发展本身也依赖于移动设备硬件的提升，因此想不断提升的 App ，还得先要硬件厂商给力。

言归正传，这里提到响应式设计的理念当然是希望在设计 Web App 时也应用到，而这些 jQuery Mobile 已经为开发者预先做好， jQuery Mobile 不但默认的 UI 样式里已经按响应式设计做好，它还另外提供了一些为响应式设计而做的方法，日后会详细介绍。

2.渐进式设计

“前端设计时通过渐进增强功能来设计一直也是 Kayo 的设计想法，因为不同的平台，不同的设备有着不同的 Web 环境，因此对于一些出色的前端效果很难保证在每台设备上都呈现相同的效果，因此与其为了在所有设备上做到一样的效果而降低整体的前端样式，不如对于好的设备可以呈现更出色的效果，而基本的效果就兼容所有的设备。jQuery Mobile 的设计也是如此，核心的功能支持所有的设备，而较新的设备则可以获得更为优秀的页面效果。”

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Mobile框架開發行動裝置Web App步驟詳解

jQuery Mobile Demo

Footer

相關文章