最接近原生APP體驗的高效能前端架構-MUI

標籤：alt   ios   content   init   等等   llb   建議   高效能   內容   

  前  言

 

輕量，原生UI,流暢體驗，是MUI的三個特徵。

 

 

 

1. 新手指南

快速體驗1. 下載Hello mui App

下載已打包好的Hello mui 手機app，直接在手機上體驗mui的控制項UI及能力展示  http://dcloud.io/hellomui/

2. 建立Hello mui工程

可從https://www.dcloud.io下載Hbuilder，選擇建立“移動APP”，並選擇“Hello MUI”工程模板，建立工程；然後通過資料線將手機串連上電腦，點擊運行，就可以在手機上體驗MUI的各項能力。

快速構建頁面

3步搭好頁面主架構

1. 建立含mui的HTML檔案

在Hbuilder中，建立HTML檔案，選擇”含mui的HTML“模板，可以快速產生mui頁面模板，該模板預設處理了mui的js、css資源引用。

2.輸入mheader

頂部標題列是每個頁面都必需的內容，在Hbuilder中輸入mheader，可以快速產生頂部導覽列。

3.輸入mbody

除頂部導航、底部選項卡兩個控制項之外，其它控制項都建議放在.mui-content控制項內，在Hbuilder中輸入mbody，可快速產生包含.mui-content的代碼塊。

4.完整代碼塊請參考

snippet

 

2.原生UI

以iOS 7為基礎，補充部分Android特有控制項

下面給大家介紹幾個常用控制項

accordion（摺疊面板）

摺疊面板從二級列表中演化而來，dom結構和二級列表類似，如下：

  

<ul class="mui-table-view">         <li class="mui-table-view-cell mui-collapse">            <a class="mui-navigate-right" href="#">面板1</a>            <div class="mui-collapse-content">                <p>面板1子內容</p>            </div>        </li>    </ul>

　　

可以在摺疊面板中放置任何內容；摺疊面板預設收縮，若希望某個面板預設展開，只需要在包含.mui-collapse類的li節點上，增加.mui-active類即可；mui官網中的方法說明，使用的就是摺疊面板控制項

list（列表）

1、普通列表

列表是常用的UI控制項，mui封裝的列表組件比較簡單，只需要在ul節點上添加.mui-table-view類、在li節點上添加.mui-table-view-cell類即可，如下為範例程式碼

<ul class="mui-table-view">    <li class="mui-table-view-cell">Item 1</li>    <li class="mui-table-view-cell">Item 2</li>    <li class="mui-table-view-cell">Item 3</li></ul>

　　

圖片輪播

圖片輪播繼承自slide外掛程式，因此其DOM結構、事件均和slide外掛程式相同；

DOM結構

預設不支援迴圈播放，DOM結構如下：

<div class="mui-slider">  <div class="mui-slider-group">    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>  </div></div>

　　

假設當前圖片輪播中有1、2、3、4四張圖片，從第1張圖片起，依次向左滑動切換圖片，當切換到第4張圖片時，繼續向左滑動，接下來會有兩種效果：

• 支援迴圈：左滑，直接切換到第1張圖片；
• 不支援迴圈：左滑，無反應，繼續顯示第4張圖片，使用者若要顯示第1張圖片，必須連續向右滑動切換到第1張圖片；

當顯示第1張圖片時，繼續右滑是否顯示第4張圖片，是同樣問題；這個問題的實現需要通過.mui-slider-loop類及DOM節點來控制；

 

若要支援迴圈，則需要在.mui-slider-group節點上增加.mui-slider-loop類，同時需要重複增加2張圖片，圖片順序變為：4、1、2、3、4、1，程式碼範例如下：

<div class="mui-slider">  <div class="mui-slider-group mui-slider-loop">    <!--支援迴圈，需要重複圖片節點-->    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>    <!--支援迴圈，需要重複圖片節點-->    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>  </div></div>

　　

概述

為實現下拉重新整理功能，大多數 H5 架構都是通過 DIV 類比下拉回彈動畫，在低端 android 手機上，DIV 動畫經常出現卡頓現象（特別是圖文列表的情況); mui 通過使用原生 webview 下拉重新整理解決這個 DIV 動畫的卡頓問題，並且拖動效果更加流暢；

這裡提供兩種模式的下拉重新整理，以適用不同情境：

單 webview 模式

• 動畫原理：

  下拉重新整理時，觸發的是原生下拉重新整理控制項，而整個webview位置不會發生變化，所以不會在拖動過程中發生DOM重繪，當控制項拖動到一定位置觸發動態載入資料以及重新整理操作。此模式下拉重新整理，相比雙webview 模式，不建立額外 webview，效能更優。

• 使用方法：

  mui 初始化時設定pullRefresh各項參數，與雙 webview 模式的子版面設定是一樣的。

  說明：
  1. DOM結構無特殊要求，只需要指定一個下拉重新整理容器標識即可

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從伺服器擷取新資料；    }  }});

　　

模式說明：

• 優點：
  
  • 效能更優，體現在兩點：
    1. 相比雙webview，不建立額外子 webview 效能消耗更少
    2. 下拉拖動過程中不會發生重繪，也減少了效能消耗
• 缺點：
  • 目前僅支援‘cricle’樣式以及該樣式的顏色自定義

雙 webview 模式

• 動畫原理：

  使用雙 webview 模式的下拉重新整理，建立一個子 webview 添加列表；拖動時，拖動的是一個完整的 webview，避免了類似 DIV 拖動流暢度不好的問題，回彈動畫使用原生動畫；在 iOS 平台，H5 的動畫已經比較流暢，故依然使用 H5 方案。兩個平台實現雖有差異，但 mui 經過封裝，可使用一套代碼實現下拉重新整理。

• 使用方法：

  首頁面內容比較簡單，只需要建立子頁面即可：

• mui.init({    subpages:[{      url:pullrefresh-subpage-url,//下拉重新整理內容頁面地址      id:pullrefresh-subpage-id,//內容頁面標誌      styles:{        top:subpage-top-position,//內容頁面頂部位置,需根據實際頁面配置計算，若使用標準mui導航，頂部預設為48px；        .....//其它參數定義      }    }]});

  　　

iOS平台的下拉重新整理，使用的是 mui 封裝的地區滾動組件， 為保證兩個平台的 DOM 結構一致，內容頁面需統一按照如下 DOM 結構構建：

<div id="refreshContainer" class="mui-content mui-scroll-wrapper">  <div class="mui-scroll">    <!--資料列表-->    <ul class="mui-table-view mui-table-view-chevron">          </ul>  </div></div>

　　

其次，通過 mui.init 方法中 pullRefresh 參數配置下拉重新整理各項參數，如下：

mui.init({  pullRefresh : {    container:"#refreshContainer",//下拉重新整理容器標識，querySelector能定位的css選取器均可，比如：id、.class等    down : {      height:50,//可選,預設50.觸發下拉重新整理拖動距離,      auto: true,//可選,預設false.首次載入自動下拉重新整理一次      contentdown : "下拉可以重新整理",//可選，在下拉可重新整理狀態時，下拉重新整理控制項上顯示的標題內容      contentover : "釋放立即重新整理",//可選，在釋放可重新整理狀態時，下拉重新整理控制項上顯示的標題內容      contentrefresh : "正在重新整理...",//可選，正在重新整理狀態時，下拉重新整理控制項上顯示的標題內容      callback :pullfresh-function //必選，重新整理函數，根據具體業務來編寫，比如通過ajax從伺服器擷取新資料；    }  }});

　　

模式說明：

• 優點：
  
  • 可自訂下拉重新整理樣式，更改文字等等.參考關於自訂下拉重新整理樣式問答
• 缺點：
  • 相比單 webview，效能消耗更大，不過都比 div 模式的要好用
  • DOM結構需要統一配置

本文唯寫了一部分常用控制項，所以不是很全面，大家可以參考官方文檔去詳細瞭解細節。

 

最接近原生APP體驗的高效能前端架構-MUI