집 >웹 프론트엔드 >JS 튜토리얼 >모바일 프레임워크를 사용하여 모바일 웹앱을 개발하는 단계에 대한 자세한 설명

모바일 프레임워크를 사용하여 모바일 웹앱을 개발하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-26 11:38:433286검색

이번에는 모바일 프레임워크를 사용하여 모바일 웹앱을 개발하는 단계에 대해 자세히 설명하겠습니다. 모바일 프레임워크를 사용하여 모바일 웹앱을 개발할 때 주의 사항은 무엇입니까?

1. jQuery Mobile의 프로그레시브 향상 디자인 및 브라우저 지원위키피디아 설명에 따르면 프로그레시브 향상 디자인에는 주로 다음 사항이 포함됩니다

기본 콘텐츠는 모든 웹 브라우저에서 액세스 가능해야 합니다(모든 브라우저 기본 기능에 액세스 가능해야 함). 모든 웹 브라우저에
sparse, semantic markup은 모든 콘텐츠를 포함합니다. 콘텐츠는 소수의 semantic 태그 내에 있어야 합니다.)
향상된 레이아웃은 외부에 링크된 CSS로 제공됩니다.
향상된 동작은 눈에 거슬리지 않게 외부적으로 제공됩니다. linked
JavaScript
최종 사용자의 웹 브라우저 기본 설정이 존중됨(최종 사용자의 브라우저 습관이 존중되어야 함)
Web SQL Database와 같은 HTML5 기술이 실제 개발에 사용된다면, final Web App의 지원은 위의 jQuery Mobile의 지원보다 낮지만 두 주류 모바일 브라우저인 Android와 Apple iOS의 시스템 브라우저와 해당 데스크톱 버전은 확실히 최고의 지원을 제공할 것입니다.

2. HTML5 data-* 속성

jQuery Mobile은 HTML5 data-* 속성을 사용하여 일련의 지원(UI 구성 요소, 전환 및 페이지 구조)을 제공합니다. 이 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. 뷰포트 추가

안드로이드 브라우저에서는 페이지 너비가 설정되어 있지 않으면 생각하게 됩니다. 페이지 너비가 980px이므로 모바일 브라우저가 화면 크기를 알 수 있도록 헤드에 뷰포트를 추가할 수 있습니다. 뷰포트 태그만으로도 이미 사용자에게 더 나은 경험을 제공할 수 있습니다.

<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

jQuery Mobile의 경우 정의된 각 data-role="page"는 페이지와 동일합니다. jQuery Mobile은 기본적으로 Ajax를 사용하여 DOM을 작동하며 링크를 클릭하면 자동으로 모든 페이지를 숨깁니다. 다른 페이지에 연결하면 새 페이지의 콘텐츠가 Ajax 모드로 로드됩니다. 전체 예는 다음과 같습니다. 또한 일부 HTML5

semantic 2016517163442696.png (335×365) 태그를 사용할 수도 있습니다. 예를 들어 헤더의 p는 헤더 태그를 직접 사용할 수 있습니다.



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

모바일 프레임워크를 사용하여 모바일 웹앱을 개발하는 단계에 대한 자세한 설명

jQuery Mobile Demo

Footer

관련 기사