Webapp mui&HTML 5+(二)のmui

3934 ワード
webapp
Webapp mui&HTML 5+(二)のmui
muiはフロントエンドuiフレームワークだけでなくui,js操作,nativeパッケージを含む.コアはやはりwebviewで、phonegapや自分で書いたwebviewのコアと原理があまり違いません.
muiは高性能のHTML 5開発フレームワークで、UIから効率まで、オリジナル体験を極力追求しています.
本文はmuiの基礎と使用シーンを紹介するだけで、具体的なコードには関係なく、後でapiの具体的なコードの実現を単独で紹介します.muiの詳細については、mui公式サイトを参照してください.
UIコンポーネント
muiのuiスタイルはIOSを主体として設計され、android特有のスタイルも補充されています.だから全体のスタイルは比較的に統一されているように見えて、いくつかの業務はそんなに複雑ではないappは完全に実現することができます.muiのuiコンポーネントも比較的完全で、比較的よく使われるuiスタイルをパッケージ化し、Hbuilderに特有のコードブロックのヒントに合わせて、開発効率が向上しています.例えば、switchスイッチのように「mswitch」を直接叩くと、Hbuilderは関連するコードを直接リストし、対応するコードブロックを直接選択すればいいです.uiスタイルについてはここではあまり言わないが、公式サイトには既成の例やコードがあり、興味のある仲間はmuiコンポーネントを見に行くことができる.
ウィンドウ管理
muiはSPA単ページ案があるがmui.OpenWindowは、5+以外の環境ではSPAのdivフォーム切り替えに降格しません.spaを使用すると1セットのコードを複数使用できますが、5+環境で自動的にオリジナルビューにアップグレードしてアニメーションを切り替えることはできません.
  • ページの初期化はapp開発において、HTML 5+拡張apiを使用するには、plusreadyイベントが発生するまで正常に使用する必要があり、muiはそのイベントをmuiにカプセル化する.plusReady()メソッドは、HTML 5+のapiに関し、muiに書くことをお勧めします.plusReadyメソッドで.同じコードブロックもあります:minit
  • 作成サブページmobile app開発の過程で、カードヘッドのカードテールのページによく遭遇する.この時、ローカルスクロールを使用すると、android携帯電話でスクロールがスムーズではないという問題が発生する.muiの解決策は,スクロールが必要な領域を個別のwebviewで実現し,原生スクロールを完全に使用することである.具体的には、ターゲットページをホームページ面とコンテンツページに分解し、ホームページ面にはトップナビゲーション、下部タブなどのカードヘッドカードの末尾領域が表示されます.コンテンツページには、具体的にスクロールする必要があるコンテンツが表示され、ホームページ面でmuiが呼び出される.Initメソッドはコンテンツページを初期化します.
  • 新しいページを開いてweb appをして、1つの避けられない問題は回転場のアニメーションです;Webはリンクに基づいて構築され、あるページからリンクをクリックして別のページにジャンプし、リフレッシュの開き方があれば、ユーザーは空白のページに直面して待つ.リフレッシュなしでJavascriptでDOMノード(一般的なSPAソリューション)に移行すると、DOMノードが多く、ページが大きすぎて、回転場アニメーションがスムーズでなく、ブラウザがクラッシュするなど、パフォーマンスに大きな課題があります.muiの解決構想は、単一のwebviewが単一のページのdomだけを載せ、domレベルとページサイズを減らすことである.ページ切替は、オリジナルアニメーションを用いる、最も消費される性能の部分をオリジナル実装に渡す.
  • オリジナルナビゲーションバー付きの新しいページを開き、親子ウェブビューまたは同画面で複数のウェブビューを表示するパフォーマンスとリソース消費が大きい.同画面マルチウェブビューを推奨しない必要はありません.代わりにオリジナルナビゲーションバースキームを使用することをお勧めします.フォームのアクセス速度を速め、メモリの消費量を減らすことができます.muiはopenWindowに基づいてmuiを拡張した.OpenWindowWithTitle()メソッドはnativeObjのタイトルバーの描画をサポートし、ページの表示を速める
  • ページmuiフレームを閉じるウィンドウを閉じる機能をmuiにカプセル化する.backメソッドでは、具体的な実行ロジックは、
    *    webview      ， hide  webview；
*   ，close  webview；
    muiフレームワークで、ページクローズ(mui.backメソッドの実行)をトリガーする3つの操作があります:
    *     .mui-action-back    
*     ，      
* Android    back
  • プリロードいわゆるプリロード技術は、ユーザがページジャンプをトリガーしていない場合に、ターゲットページを事前に作成することであり、ユーザがジャンプすると、すぐにページ切り替えを行い、新しいページを作成する時間を節約し、appの使用体験を向上させることができる.

    • イベント管理
    モバイル端末のアプリケーションを開発する際には、スライド、長押しなど、多くのジェスチャー操作が用いられ、開放者がこれらのジェスチャーを迅速に統合しやすいように、muiには一般的なジェスチャーイベントが内蔵されています.使用頻度に応じてmuiはデフォルトで、クリック、スライドイベントなどのジェスチャーイベントの一部をリスニングします.より高性能なmoble Appを開発するために、muiはユーザーが実際の業務ニーズに基づいてmuiを通過することをサポートする.InitメソッドのgestureConfigパラメータは、特定のリスニングが必要なジェスチャーイベントを構成します.App開発では、ニュースリストページから詳細ページに入るなど、ニュースidを渡す必要があるページ間の価値伝達のニーズに遭遇することが多い.Html 5 Plus仕様はevalJS方法を設計してこの問題を解決した.しかしevalJSメソッドは文字列パラメータのみを受信し、複数のパラメータに関連する場合、開発者が手動で文字列をつづる必要がある.開発をシンプル化するため、muiフレームワークはevalJSメソッドに基づいて、カスタムイベントをカプセル化し、カスタムイベントを通じて、ユーザーは簡単にマルチウェブビュー間のデータ伝達を実現することができる.
    utils
    muiフレームワークは多くの機能構成をmuiに集中する.Initメソッドでは、ある機能を使用するにはmui.Initメソッドでは対応パラメータの構成を完了すればよいが、現在muiでサポートされている.Initメソッドで構成される機能には、サブページの作成、ページの閉じる、ジェスチャーイベント構成、プリロード、ドロップダウンリフレッシュ、アップロード、システムステータスバーの背景色の設定が含まれます.
    muiは、ページのロード時にリスニング戻りキーなどの多くの基礎コントロールを初期化する必要があるため、必ず各ページで呼び出す必要があります.
    Ajax
    muiフレームワークはhtml 5 plusのXMLhttpRequestに基づいて、よく使われるAjax関数をカプセル化し、GET、POST要求方式をサポートし、json、xml、html、text、scriptデータ型を返すことをサポートする.極めて簡単な設計原則に基づいてmuiはmuiを提供した.ajaxメソッド、mui.ajax法に基づいて、最もよく使われるmuiをさらに簡略化する.get()、mui.getJSON()、mui.post()の3つの方法.
    プルアップ、ドロップダウンのリフレッシュ
    divベースのドロップダウン・リフレッシュはAndroid 4.4以下もスムーズではなく、5+オリジナルのドロップダウンリフレッシュコントロールを拡張しました.muiのドロップダウン・リフレッシュは、Androidの5+App環境では5+拡張のデュアルウェブビュー・ドロップダウン・リフレッシュが呼び出され、iOSの5+環境と非5+環境ではdivベースのドロップダウン・リフレッシュが呼び出されます.
    この文章はただmuiを使ったことがない小さい仲间にmuiに対して1つの大体の大きい认识があることを譲って、次の编は业务の具体的な実现で、兴味のある小さい仲间、最后にしましょう!
    本文は純粋に手で打って、不当なところがあったら伝言を残してください!仲間たちを助けてほしいです.ありがとうございます.
    AngularJSでGoogleマップを使って現在位置を表示
    HTML--1つのページに複数のHTMLページを追加する方法