ホームページ > 記事 > ウェブフロントエンド > モバイルフレームワークを使用したモバイル Web アプリの開発手順の詳細な説明

モバイルフレームワークを使用したモバイル Web アプリの開発手順の詳細な説明

php中世界最好的语言オリジナル: 2018-04-26 11:38:433259ブラウズ

今回は、Mobile フレームワークを使用してモバイル Web アプリを開発する手順について詳しく説明します。Mobile フレームワークを使用してモバイル Web アプリを開発する際の注意点について、実際の事例を見てみましょう。。

1. jQuery Mobile のプログレッシブエンハンスメントの設計とブラウザのサポート Wikipedia の説明によると、プログレッシブエンハンスメントの設計には主に次の点が含まれます

基本的なコンテンツはすべての Web ブラウザでアクセスできる必要があります (すべてのブラウザの基本機能はアクセス可能である必要があります)すべての Web ブラウザーに
スパースなセマンティックマークアップにはすべてのコンテンツが含まれますコンテンツは少数のセマンティックタグ内にある必要があります)
拡張レイアウトは外部にリンクされた CSS によって提供されます
拡張された動作は目立たない外部から提供されますリンクされた
JavaScript
エンドユーザーの Web ブラウザーの設定が尊重されます (エンドユーザーのブラウザーの習慣を尊重する必要があります)
Web SQL Database などの HTML5 テクノロジが実際の開発で使用される場合、最終 Web アプリのサポートは、上記の jQuery Mobile のサポートよりも低くなりますが、2 つの主流モバイルブラウザである Android と Apple iOS のシステムブラウザとそのデスクトップバージョンは、間違いなく最高のサポートを提供します。

2. HTML5 data-* 属性

jQuery Mobile は、一連のサポート (UI コンポーネント、トランジション、ページ構造) を提供するために HTML5 data-* 属性に依存します。この HTML5 属性をサポートしないブラウザーは、これらの効果を無視します。たとえば、ページにヘッダーを追加するには、次の HTML を使用できます:

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

これにより、下の図からわかるように、このヘッダースタイルが非常に適しています。モバイルデバイスの場合、data-role="header" 属性を追加すると、p の h1 も特定のスタイルでレンダリングされます。これは jQuery Mobile の利便性と速度であり、その設計目的でもあります。より少なく、より多くのことを実行します。さらに、jQuery Mobile には、特定のスタイルとユーザー操作の応答効果が与えられた、以下のデータロール属性 (一部の属性) もあります。

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" は、それぞれメインコンテンツ、ボタン、テーマカラー、編集済みボタン、インラインボタン、フォーム要素、リストビュー、ダイアログに対応します。ボックス、ページ遷移。

3. jQuery Mobile

基本的な使い方

方法

1. jQuery Mobile を導入する jQuery Mobile を使用するには、以下の部分を含む jQuery Mobile コンポーネントを導入する必要があります(1) jQuery ライブラリ( 2) jQuery Mobile CSS (3) 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>

2. ビューポートを追加します

Android ブラウザでは、ページ幅が設定されていない場合、ページの幅は 980 ピクセルなので、ビューポートをヘッドに追加して、モバイルブラウザーに画面サイズを知らせることができ、ビューポートタグだけでユーザーエクスペリエンスが向上します。

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

3. 簡単なページの例 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

jQuery Mobile の場合、定義された各 data-role="page" は、デフォルトで Ajax を使用して DOM を操作し、リンクをクリックすると、最初のページを除くすべてのページを自動的に非表示にします。他のページにリンクすると、新しいページのコンテンツが Ajax モードでロードされます。完全な例を以下に示します。さらに、いくつかの HTML5

semantic

タグも使用できます。たとえば、header の p は header タグを直接使用できます。詳細については、以下の例を参照してください。 2016517163442696.png (335×365)



<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中文网其它相关文章！

モバイル フレームワークを使用したモバイル Web アプリの開発手順の詳細な説明

jQuery Mobile Demo

Footer

関連記事

モバイルフレームワークを使用したモバイル Web アプリの開発手順の詳細な説明