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

  前  言

 

輕量，原生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結構需要統一配置

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