最接近原生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官網中的方法說明，使用的就是摺疊面板控件
.mui-collapseli.mui-active

list（列表）

一、普通列表

列表是經常使用的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>

　　

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

• 支持循環：左滑，直接切換到第1張圖片；
• 不支持循環：左滑，無反應，繼續顯示第4張圖片，用戶若要顯示第1張圖片，必須連續向右滑動切換到第1張圖片；

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

 

若要支持循環，則須要在.mui-slider-group節點上增長.mui-slider-loop類，同時須要重複增長2張圖片，圖片順序變爲：四、一、二、三、四、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結構須要統一配置

本文只寫了一部分經常使用控件，因此不是很全面，你們能夠參考官方文檔去詳細瞭解細節。