MUIフレームワーク-init()メソッド

10549 ワード
APP開発においてH 5+APIを使用するには,plusreadyイベントが発生してから正常に使用される必要があり,MUIフレームワークはそれをmui.plusReady()メソッドにカプセル化する.したがって、H 5+APIの呼び出しに関しては、mui.plusReady()メソッドに記載することが推奨される.mui.init()(MUIプラグイン初期化)MUIは、ページロード時に多くのベースコントロールを初期化する必要があるため、必ず各ページで呼び出す必要があります.
MUIフレームワークは、mui.initメソッドを使用して初期化するときに、サブページの作成、ページの閉じる、ジェスチャーイベントの構成、プリロード、ドロップダウン・リフレッシュ、プルアップロード、システム・ステータス・バーの背景色の設定など、他の機能を構成します.
mui.init({
    //   
    subpages: [{}],
    //   
    preloadPages: [],
    //    、    
    pullRefresh: {},
    //    
    gestureConfig:{},
    //    
    swipeBack:true,//(  false)        
    //  Android   back、menu  
    keyEventBind: {
        backbutton: false,//(  true)  back    
        menubutton: false//(  true)  menu    
    },
    //          
    beforeback: function() {},
    //       
    statusBarBackground: '#9defbcg',//       , IOS  
    preloadLimit: 5//       
});

サブページの作成
APPの開発では、ナビゲーションバーやタブを使用して、ページをロードしてカートンを再レンダリングしたり、スクロールがスムーズではない問題が発生したりします.MUIは2つのソリューションを提供します.
  • 第1種(公式推奨):ページのナビゲーションバーまたはタブを、オリジナルtitleNViewおよびオリジナルtabbarを使用して置き換える.
  • の2つ目は、ダブルwebviewモードで解決され、上下リフレッシュが必要なリストページに適していることが多い.スクロールを必要とする領域は、別個のwebviewによって実現され、完全にオリジナルスクロールが使用される.具体的な方法:ターゲットページをホームページとコンテンツページに分解し、ホームページにはトップナビゲーションバー、下部タブなどのヘッダーとテール領域が表示されます.コンテンツページには、具体的にスクロールする必要があるコンテンツが表示され、ホームページでmui.init()メソッドを使用してコンテンツページを初期化します.
    • mui.init({
    //   
    subpages: [{
        url: 'content.html',//   HTML  ,         
        id: 'content',//     
        styles: {//    ,   H5+ API   WebviewStyle   
            top: '45px',//       ,      ,        
            bottom: '51px',//       ,        ,          
            width: '100%',//     ,   100%
            height: '100%',//     ,   100%
        },
        extras: {}//      
    }],
})
    Hello mui webview 。
    ページを閉じる
    MUIフレームワークは、ウィンドウクローズ機能をmui.back()の方法にカプセル化する.
  • 現在のwebviewがプリロードページである場合、hide現在のwebview;
  • それ以外の場合、close現在のwebview.MUIフレームワークでは、ページのクローズをトリガーする3つの操作があります:
  • mui-action-backスタイルを含むコントロールをクリックします.
  • スクリーン内で、右にすばやくスライドします.
  • Android携帯電話backボタンMUIフレームパッケージのページ右スライドオフ機能を押すと、デフォルトでは有効になっていません.必要に応じて、初期化時にswipeBackパラメータ:
    • を設定する必要があります.
    mui.init({
    swipeBack:true //        
});

    MUIフレームワークはデフォルトでAndroid携帯電話のbackボタンを傍受し、ページクローズロジックを実行します.MUIの自動処理を望まない場合は、MUIのbackキー傍受をオフにする.
    mui.init({
    keyEventBind: {
        backbutton: false  //  back    
    }
});
    mui.back()メソッドを呼び出して、ウィンドウクローズロジックを実行することもできます.mui.back()メソッドはウィンドウロジックのみを処理し、ウィンドウが閉じる前に他のトラフィックロジックを処理する場合は、MUI初期化時にbeforebackパラメータを設定する必要がある.
  • 実行beforebackパラメータに対応する関数falseを返すと、mui.back()メソッドは実行されません.
  • そうでない場合(trueを返すか返さないか)、mui.back()メソッドの実行を続行します. ：詳細ページからリストページに戻ると、リストインタフェースがリフレッシュされます.
    • mui.init({
    beforeback: function(){
        //       webview
        var list = plus.webview.getWebviewById('list');
        //            （refresh）,        
        mui.fire(list,'refresh');
        //  true，        
        return true;
    }
});
    beforebackの実行戻りは同期でなければならないため、mui.back()メソッドを書き換える必要がある場合があります.
    //  mui.back，mui.back               （        ），      mui.back
var old_back = mui.back;
mui.back = function(){
  var btn = ["  ","  "];
  mui.confirm('        ？','Hello MUI',btn,function(e){
    if(e.index==0){
        //  mui          ；
        old_back();
    }
  });
}

    ジェスチャーイベントの設定
    アプリを開発する際には、スライド、長押し、クリックなど、多くのジェスチャー操作が使われます.私たちが素早く使用できるように、MUIフレームワークにはよく使われるジェスチャーイベントが内蔵されています.
    ぶんかつ
    パラメータ
    説明
    クリック
    tap
    クリック
    クリック
    doubletap
    画面をダブルクリック
    長押しする
    longtap
    画面を長押しする
    長押しする
    hold
    画面を押したまま
    長押しする
    release
    スクリーンを離れる
    スライド
    swipeleft
    左にスライド
    スライド
    swiperight
    右へスライド
    スライド
    swipeup
    スライドアップ
    スライド
    swipedown
    下へスライド
    ドラッグ
    dragstart
    ドラッグを開始
    ドラッグ
    drag
    ドラッグ中
    ドラッグ
    dragend
    ドラッグ終了
    ジェスチャーイベント構成は、mui.init()メソッドのgestrueConfigパラメータによって構成することができる.
    mui.init({
  gestureConfig:{
   tap: true, //   true
   doubletap: true, //   false
   longtap: true, //   false
   swipe: true, //   true，    
   drag: true, //   true，    
   hold:false,//   false，   
   release:false//   false，   
  }
});

    イベントは単一要素のイベントリスニングをリスニングし、addEventListener()を直接使用します.
    elem.addEventListener("swipeleft",function(){
     console.log("       ");
});

    プリロード
    プリロードとは,ユーザがページジャンプをトリガーしていない場合に,ターゲットページを事前に作成することである.
  • 方法1:mui.init()方法におけるpreloadPagesパラメータにより構成される.
    • mui.init({
  preloadPages:[
    {
      url:'content.html',
      id:'content',
      styles:{},//    
      extras:{},//       
      subpages:[{},{}]//         
    }
  ],
  preloadLimit:5//         (    ,    )     
});
    ： 、 ， ， webview ， plus.webview.getWebviewById ; ， mui.init() ， webview ， 。
  • 方法2:mui.preload方法でプリロードされる.
    • var page = mui.preload({
    url:'content.html',
    id:'content',//         url  id
    styles:{},//    
    extras:{}//       
});
    ： mui.preload() ， webview ， ； ， mui.preload() 。
    ドロップダウン・リフレッシュ
    シングルwebviewモード
  • アニメーションの原理:ドロップダウン・リフレッシュの場合、オリジナルのドロップダウン・リフレッシュ・コントロールがトリガーされ、webview全体の位置が変化しないため、ドラッグ中にDOM再描画は発生せず、コントロールが一定の位置にドラッグすると動的ロード・データとリフレッシュ操作がトリガーされます.デュアルwebviewモードよりも、追加のwebviewは作成されず、パフォーマンスが向上します.
  • 使用方法:MUI初期化時にpullRefreshの各パラメータを設定します.
    • mui.init({
  pullRefresh : {
    container:"#refreshContainer",//        ，querySelector    css     ，  ：id、.class 
    down : {
      style:'circle',//  ，      ，      5+ ‘circle’   
      color:'#2BD009', //  ，  “#2BD009”         
      height:'50px',//  ,  50px.         ,
      range:'100px', //     100px,          
      offset:'0px', //     0px,           
      auto: true,//  ,  false.            
      callback :pullfresh-function //  ，    ，         ，    ajax         ；
    }
  }
});
  • モードの利点:
  • は追加のwebviewを作成せず、パフォーマンスの消費量が少ない.
  • ドロップダウン・ドラッグ中に再描画が発生せず、パフォーマンスの消費量を削減します.

    • デュアルwebviewモード
  • アニメーション原理:デュアルwebviewモードのドロップダウンリフレッシュを使用して、サブwebview追加リストを作成します.ドラッグすると、完全なwebviewがドラッグされ、オリジナルアニメーションが使用されます.
  • 使用方法:サブページを作成するだけです.
    • mui.init({
    subpages:[{
      url:pullrefresh-subpage-url,//          
      id:pullrefresh-subpage-id,//      
      styles:{
        top:subpage-top-position,//        ,           ，     mui  ，     48px；
        .....//      
      }
    }]
});
  • モードの欠点:パフォーマンスの消費量がより大きい.
  • 特定の位置にスクロールダウンリフレッシュコンポーネントを特定の位置にスクロールする方法は、領域スクロールコンポーネントと同様である.Hello mui ， ， 
    • var contentWebview = null;
//          
document.querySelector('header').addEventListener('doubletap',function () {
  if(contentWebview==null){
    contentWebview = plus.webview.currentWebview().children()[0];
  }
  //        
  contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});
  • ドロップダウンリフレッシュ文字位置
    • を変更する.
    .mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
  top: 180px !important;
}
  • オートトリガドロップダウン
    • mui.init({
  pullRefresh : {
    container:"#refreshContainer",//        ，querySelector    css     ，  ：id、.class 
    down : {
      auto: true,//  ,  false.            
    },
    up : {
      auto: true //  ,  false.            
    }
  }
});
  • プルダウン・リフレッシュは、プルダウン・リフレッシュ中の2つのモードを終了し、データを取得した後、endPulldownメソッドを実行する必要があります.このメソッドは、「リフレッシュ中」のスタイル・プロンプトを閉じる役割を果たします.
    • function pullfresh-function() {
     //      ，    ajax         ；
     ......
     //  ，       ，        ，  ：  ajax  ，             ajax      
     //       ，endPulldown   true，         
     mui('#refreshContainer').pullRefresh().endPulldown();
}

    プルアップロード
    概要MUIフレームワークのプルアップロードは、ドロップダウンリフレッシュと同様にpullRefreshプラグインに属します.
  • ページは最後までスクロールし、「ロード中...」と表示されます.ヒント
  • は、ロードトラヒックデータ論理
    • を実行する.
  • ロードが完了し、「ロード中...」を非表示にします.ヒント
    • 初期化
    mui.init({
  pullRefresh : {
    container:refreshContainer,//       ，querySelector    css     ，  ：id、.class 
    up : {
      height:50,//  .  50.          
      auto:true,//  ,  false.        
      contentrefresh : "    ...",//  ，       ，              
      contentnomore:'       ',//  ，                   ；
      callback :pullfresh-function //  ，    ，         ，    ajax         ；
    }
  }
});

    プルアップロードを終了して新しいデータをロードした後、endPullupToRefresh()の方法を実行し、進捗バーのリフレッシュを終了する必要があります.
    function pullfresh-function() {
     //      ，    ajax         ；
     ......
     //  ：
     //1、       ，        ，true         ：
     //2、  ajax  ，             ajax      
    //        ；       ，   false；    true，           ，     “      ”    ，   “       ”    。
     this.endPullupToRefresh(true|false);
}

    プルアップロードをリセット
    //     refresh(true);          
mui('#pullup-container').pullRefresh().refresh(true);

    プルアップの禁止
    //           ，        
mui('#pullup-container').pullRefresh().disablePullupToRefresh();

    プルアップ・リフレッシュの有効化
    mui('#pullup-container').pullRefresh().enablePullupToRefresh();

    システムステータスの背景色の設定
    //    statusBarBackground:rgb          。
mui.init({
    statusBarBackground: '#9defbcg',
})

    リファレンスドキュメント
  • MUI公式文書
    • 前の章
    次の章
    Material Themeのコメントカラーを変える
    php複数の文字列を同一に置き換える解決方法