html5 アプリ開発フレームワークには、1. jquery mobile、2. bootstrap、3. ionic、4. Mobile Angular UI、5. Intel XDK、6. Appcelerator Titanium、7. PhoneGap などがあります。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
HTML5 モバイル開発のためのモバイル APP 開発フレームワークのトップ 10
jQuery Mobile
は、携帯電話およびタブレット デバイス用の
jQuery のバージョンです。 
jQuery Mobile は、
jQuery
コア ライブラリを主流のモバイル プラットフォームに導入するだけでなく、完全で統合された jQuerymobileUI フレームワークもリリースします。世界の主流のモバイル プラットフォームをサポートします。 2.bootstrap フレームワーク
#Bootstrap は
HTML に基づいています
、CSS
、JAVASCRIPT
はシンプルかつ柔軟で、
Web の開発を迅速化します。これは、Twitter デザイナー Mark Otto と Jacob Thornton によって開発された、CSS/HTML フレームワークです。 Bootstrap は、動的 CSS 言語 Less で記述されたエレガントな HTML および CSS 仕様を提供します。 Bootstrap は、発売後非常に人気があり、NASA(Microsoft National Broadcasting Corporation など) GitHub で人気のオープン ソース プロジェクトとなっています。 ) の 速報ニュース はすべてこのプロジェクトを使用しました。 WeX5 フロントエンド オープン ソース フレームワークなど、国内のモバイル開発者に馴染みのある一部のフレームワークも、パフォーマンス最適化のための Bootstrap ソース コードに基づいています。
##Ionic は強力な HTML5
HTML
、CSS
、Javascript
などの
Web テクノロジーを使用してネイティブに近い構築を支援するアプリケーション開発フレームワーク モバイル アプリを体験する。 Ionic主に外観とエクスペリエンス、および UIアプリケーションとのインタラクションに重点を置き、特に Hybird パターンに基づく HTML5 モバイルに適していますアプリケーション開発。 Mobile Angular UI は、ブートストラップ 3 と AngularJS を使用したレスポンシブなモバイル開発 HTML5 フレームワークです。
のキーワード:
1. Bootstrap 3
2. 
AngularJS
Bootstrap 3 Mobile コンポーネント (
switches
、overlays、
sidebars# など) # #、これらは
bootstrap では使用できません。
AngularJS モジュール (angular-route、angular-touch、angular-animatebootstrap になっており、必要なものだけを含める必要があります。
Mobile Angular UIu
には jQuery 依存関係が含まれていません。必要なのは、いくつかの AngularJS 命令を通じてフレンドリーなユーザー エクスペリエンスを作成することだけです。 5.Intel XDK Framework
##Intel は、以下に基づいて最初のバージョンをリリースしました。 web 開発者が
Android
および iOS 用のモバイル アプリケーションを開発するのに役立つプログラミング ツール。このフリー ソフトウェアは
Intel XDK
と呼ばれ、実際には今年 2 月に Intel
が買収した AppMobi
ソフトウェアの再パッケージ版であり、新しいものではありません。もの。開発者は、このソフトウェアを使用して
HTML5 に基づくアプリケーションを開発し、モバイル デバイスで使用できます。
Titanium はモバイル プラットフォームに依存しない開発フレームワークで、ローカル アプリケーション エフェクト アプリケーションを使用して Web を開発するために使用されます。現在、主に iPhone および Android 携帯電話をサポートしています。
提供される主な API には次のものが含まれます:
- 2D/3D アニメーション
- 地理位置情報、コンパス、地図
- 拡張現実機能
- 電子メールのソーシャル アプリ認証とネイティブ クライアント サポート
- SOAP または REST API呼び出し
#オーディオ、ビデオ、画像のキャプチャと再生-
#ローカル ファイル システムと SQL lite データベースの利用
-
フォト ギャラリーまたはアドレス データへのアクセス
##Sencha Touch フレームワークは、
HTML5
に基づく世界初の Mobile App フレームワークです。 Sencha Touch を使用すると、Web アプリ を ネイティブ アプリ のように見せることができます。美しいユーザー インターフェイス コンポーネントと豊富なデータ管理は、すべて最新の HTML5 および CSS3WEB 標準に基づいており、Android および # と完全に互換性があります。 ##Apple iOS デバイス。モバイル端末上で動作するアプリケーションを迅速に開発できる豊富なWEB UIコンポーネントを提供します。
Kendo UI のあらゆる側面 すべて強力な 
JavaScript アプリケーション パフォーマンスを提供するためにゼロから構築されました。
Kendo UI
は別の jQuery UI クローンではなく、そのすべての決定はパフォーマンスの最適化に基づいています。 jQurey テンプレートよりも大幅に高速に実行される軽量の組み込みテンプレート ライブラリから、CSS3 ハードウェア アクセラレーションによる (可能な場合) 最適化されたアニメーションと高度な仮想化ユーザー インターフェイス、##Kendo UI# まで## 高パフォーマンスのクライアント UI を提供するために努力を惜しみません。 9.PhoneGap フレームワーク
##クロスプラットフォーム開発ツールについて言うと、多くの人はまず次のように考えます。 PhoneGap について考えてみましょう。開発者が
HTML
、JS
、CSS
を使用してクロスプラットフォームのモバイル アプリを開発できるようにするこのようなオープンソースの無料フレームワークは、常に開発者に愛されてきました。
iOS、Android、BB10、Windows Phone から Amazon Fire OS、Tizenなど、すべての主要な主流モバイル プラットフォームが利用可能であり、開発者は位置情報、アクセラレータ、連絡先、音声などの主要な携帯電話機能を最大限に活用することもできます。 業界の主流のモバイル開発フレームワークの多くは、PhoneGap から派生しています。より有名なものは、Worklight、appMobi、WeX5
などです。その中で、
WeX5 は中国で構築されており、完全に Apache オープンソースであり、Phonegap の統合に基づいて深く最適化されており、に近い機能を備えています。 ネイティブ アプリ パフォーマンスと開発の利便性。
## ネイティブ
APP エクスペリエンスに最も近いパフォーマンスフロントエンド フレームワークには次の特徴があります。
軽量
パフォーマンス エクスペリエンスの追求が、
MUI
プロジェクトを開始する際の主な目標です。軽量 これは重要な機能であるはずです。
MUI
はサードパーティの JS ライブラリ、圧縮された
JS
および に依存しません。 CSS ファイルは
100 K
と 60 Kネイティブ UI100 K と 60 Kフロントエンド フレームワーク (特に React スタイルのレイアウト フレームワーク) では、
UI
コントロールは Web ページに似すぎていてネイティブな雰囲気がないため、ネイティブな UI な雰囲気を追求することも重要です私たちの目標
MUI iOS プラットフォーム UI に基づいており、Android プラットフォーム
## に固有のいくつかの
UI コントロールが追加されています。 #スムーズなエクスペリエンス
プルして更新
プルダウンの更新機能を実現するために、ほとんどの H5 フレームワークは div を通じてプルダウンのリバウンド アニメーションをシミュレートします。 android 携帯電話では、div アニメーションが頻繁にフリーズします (特に画像とテキストのリストの場合)。mui はデュアル webview を使用することでこの問題を解決します。 div のドラッグの流暢性の問題。ドラッグするときにドラッグされるのは div ではなく、完全な webview (subwebview##) #)、リバウンドアニメーション ネイティブアニメーションを使用します。
- #サイドスライディング ナビゲーション
##mui
は、2 つのサイドスライディング ナビゲーション実装を提供します。
webview モードと div モード。どちらのモードにも独自の長所と短所があり、さまざまなシナリオに適しています。各サイドスライド実装モードには、さまざまなサイドスライド アニメーション効果があり、主に 4 つのカテゴリに分類されます。 アニメーション 1: メイン インターフェイスが移動しますが、メニューは移動しません
アニメーション 2:メインインターフェイスは動かない、メニューの動き
アニメーション 3: メインインターフェイスとメニューが同時に動く
アニメーション 4: ズーム横のスライド (モバイル QQ と同様)
# #スライド トリガー操作メニュー
-
モバイル アプリケーション (特に
iOS プラットフォーム) では、多くの操作メニューがスライドによってトリガーされます。テキスト メッセージ インターフェイスなど。左にスワイプして [削除] ボタンを表示し、クリックしてテキスト メッセージの会話を削除します。メール リスト インターフェイスでは、左にスワイプして削除し、右にスワイプして「既読/未読」ステータスをマークします。
mui
のリスト コントロールもサポート スライドして操作メニュー機能をトリガーするには、DOM 構造体を特定の形式に従ってアセンブルするだけで済みます。さらに、スライドはイベント トリガーもサポートしており、開発者はスライディング イベント (slideleft/slideright) を監視できます。操作前に確認リマインダーを完了してください。 HTML5 ビデオ チュートリアル
以上がHTML5アプリ開発フレームワークとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
