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

時間 2019-11-07

標籤最接近原生 app 體驗高性能前端框架 mui 简体版

原文原文鏈接

前言css

MUI有三大特色：html

輕量

追求性能體驗，是咱們開始啓動MUI項目的首要目標，輕量必然是重要特徵；前端

MUI不依賴任何第三方JS庫，壓縮後的JS和CSS文件僅有100+K和60+Kvue

原生UI

鑑於以前的不少前端框架（特別是響應式佈局的框架），UI控件看起來太像網頁，沒有原生感受，所以追求原生UI感受也是咱們的重要目標html5

MUI以iOS平臺UI爲基礎，補充部分Android平臺特有的UI控件react

流暢體驗

下拉刷新，側滑導航，滑動觸發操做菜單android

一、新手指南

1.1 快速體驗

1. 下載Hello mui App

點擊下載已打包好的Hello mui 手機app，直接在手機上體驗mui的控件UI及能力展現；git

2. 建立Hello mui工程

可從https://www.dcloud.io下載Hbuilder，選擇新建「移動APP」，並選擇「Hello MUI」工程模板，建立工程；而後經過數據線將手機鏈接上電腦，點擊運行，就能夠在手機上體驗MUI的各項能力。github

1.2快速構建頁面

1. 新建含mui的HTML文件

在Hbuilder中，新建HTML文件，選擇」含mui的HTML「模板，能夠快速生成mui頁面模板，該模板默認處理了mui的js、css資源引用。web

2.輸入mheader

頂部標題欄是每一個頁面都必需的內容，在Hbuilder中輸入mheader，能夠快速生成頂部導航欄。

3.輸入mbody

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

4.完整代碼塊請參考

二、 UI組件

　　以iOS 7爲基礎，補充部分Android特有控件

　　下面介紹經常使用的組件

2.1摺疊面板

　　摺疊面板從二級列表中演化而來，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官網中的方法說明，使用的就是摺疊面板控件。

2.2圖片輪播

　　圖片輪播繼承自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-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>

　　JS Method

　　mui框架內置了圖片輪播插件，經過該插件封裝的JS API，用戶能夠設定是否自動輪播及輪播週期，以下爲代碼示例：

　　//得到slider插件對象
　　var gallery = mui('.mui-slider');
　　gallery.slider({
  　　interval:5000//自動輪播週期，若爲0則不自動播放，默認爲0；
　　});

　　所以若但願圖片輪播不要自動播放，而是用戶手動滑動才切換，只須要經過如上方法，將interval參數設爲0便可。

　　若要跳轉到第x張圖片，則可使用圖片輪播插件的gotoItem方法，例如：

　　//得到slider插件對象
　　var gallery = mui('.mui-slider');
　　gallery.slider().gotoItem(index);//跳轉到第index張圖片，index從0開始；

　　注意：mui框架會默認初始化當前頁面的圖片輪播組件；若輪播組件內容爲js動態生成時（好比經過ajax動態獲取的營銷信息），則須要在動態生成完整DOM (包含mui-slider下全部DOM結構) 後，手動調用圖片輪播的初始化方法；代碼以下：

　　//得到slider插件對象
　　var gallery = mui('.mui-slider');
　　gallery.slider({
 　　 interval:5000//自動輪播週期，若爲0則不自動播放，默認爲0；
　　});

2.3柵格

柵格系統簡介：

MUI 提供了很是簡單實用的12列響應式柵格系統。使用時只需在外圍容器上添加.mui-row，在列上添加 .mui-col-[sm|xs]-[1-12]，便可柵格參數:

尺寸	超小屏幕(<400px)(Extrasmall)	小屏幕(≥400px) Small
類前綴	`.mui-col-xs-[1-12]`	`.mui-col-sm-[1-12]`
列（column）數	12
可嵌套	是

實例:

左側:經過定義.mui-col-sm-6類在大屏(≥400px)設備上會展示爲並排的兩列,而.mui-col-xs-12在小屏(＜400px)設備上會覆蓋以前定義的類展示爲水平排列

<div class="mui-content">
    <div class="mui-row">
        <div class="mui-col-sm-6 mui-col-xs-12">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1    
                </a>
            </li>
        </div>
        <div class="mui-col-sm-6 mui-col-xs-12">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1
                </a>
            </li>
        </div>
    </div>
</div>

實例:多餘的列將會另起一行排列

左側:若是在一個.mui-row內包含的列（column）大於12個,包含多餘列（column）的元素將做爲一個總體單元被另起一行排列。

右側:若是不足12個列將不會撐滿整個.mui-row容器

<div class="mui-content">
    <div class="mui-row">
        <div class="mui-col-sm-8">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1    
                </a>
            </li>
        </div>
        <div class="mui-col-sm-6">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1
                </a>
            </li>
        </div>
    </div>
</div>

實例:經過爲`列`設置`padding` 屬性，從而建立列與列之間的間隔

兩列之間白色區域爲左側列的padding

<div class="mui-content">
    <div class="mui-row">
        <div class="mui-col-sm-6" style="padding-right: 20px;">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1    
                </a>
            </li>
        </div>
        <div class="mui-col-sm-6">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    Item 1
                </a>
            </li>
        </div>
    </div>
</div>

3 下拉刷新功能

　　爲實現下拉刷新功能，大多數 H5 框架都是經過 DIV 模擬下拉回彈動畫，在低端 android 手機上，DIV 動畫常常出現卡頓現象（特別是圖文列表的狀況); mui 經過使用原生 webview 下拉刷新解決這個 DIV 動畫的卡頓問題，而且拖動效果更加流暢；

　　這裏提供兩種模式的下拉刷新，以適用不一樣場景：

3.1單webview模式

　　效果展現：

　　動畫原理：

　　下拉刷新時，觸發的是原生下拉刷新控件，而整個webview位置不會發生變化，因此不會在拖動過程當中發生DOM重繪，當控件拖動到必定位置觸發動態加載數據以及刷新操做。此模式下拉刷新，相比雙webview 模式，不建立額外 webview，性能更優。

　　使用方法：

　　mui 初始化時設置pullRefresh各項參數，與雙 webview 模式的子頁面設置是同樣的。

　　說明：

　　一、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從服務器獲取新數據；
    }
  }
});

　　模式說明：

　　優勢

　　一、相比雙webview，不建立額外子webview性能消耗更少

　　二、下拉拖動過程當中不會發生重繪，性能消耗更少

　　缺點：

　　目前僅僅支持circle樣式及其樣式的自定義

3.1雙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從服務器獲取新數據；
    }
  }
});

　　模式說明：

　　優勢：可自定義下拉刷新樣式。

　　缺點：性能消耗大，DOM結構須要從新配置。

結尾

　MUI的定位。

MUI的定位是：最接近原生體驗的移動App的UI框架

基於mui的定位，產生了mui的幾個特色，輕、小、只涉及UI、只爲移動App而生、界面風格原生化。
因此請你們注意，mui有所爲有所不爲：

mui不是jq，不封裝dom操做
與ui無關的mui不作，你願意用jq或zepto就本身用，並不衝突。
但咱們並不建議在移動App裏引入jq或zepto這些框架，緣由以下：
- 爲了性能，層層封裝的框架，尤爲是遍歷循環dom時，影響效率，尤爲在低端Android手機上，咱們費死勁了才把性能以毫秒爲單位一點點提高，搞這個的dom框架進來就讓不少努力又付諸東流。
- 原生JS挺簡單，爲什麼須要jq？
  jq的成功當時是由於ie六、七、八、九、十、chrome、ff這些瀏覽器不兼容，讓開發者崩潰，並且pc上瀏覽器性能好，跨平臺兼容也不影響性能。但jq根本就不是爲手機設計的。
  手機上只有webkit瀏覽器（忽略wp，反正mui不支持wp），根本就不須要jq這種封裝框架來操做dom。
  並且HBuilder提供了代碼塊來簡化開發，敲dg、dq，直接生成document.getElementById("")、document.querySelectorAll("")，很是快捷方便，並且執行性能很是高，並且沒有瀏覽器兼容問題。
  發現不少開發者只會jq，反正想繼續在App裏使用jq沒有問題。但也建議你們多學學js自己。
  mui與vue、react、angular也不是一個層面的東西，能夠在一個工程裏混合使用。但在大多數ui控件上，應該直接使用mui的寫法，由於mui的繪製是最樸素的HTML繪製，不是通過js操做的繪製，這種方案的效率比通過js繪製的效率要高不少。只有必須通過js操做才能渲染的控件，好比ajax聯網後填充的list，此時使用vuew或react均可以。
mui、HTML5+、5+Runtime的關係說明
mui是一個前端框架，HTML5+是一套HTML5能力擴展規範，HTML5+ Runtime是實現HTML5+規範的強化瀏覽器引擎。
有點相似於bootstrap、w3c和chrome os的關係。
HTML5+規範隸屬於http://www.html5plus.org，定義了HTML5規範中沒有但開發者作App須要的擴展規範。
DCloud的5+ Runtime完整的實現了HTML5+規範。同時5+ Runtime還實現了Native.js，一種經過js調用幾十萬原生API的技術。
爲了提高體驗，mui勢必會調用一些5+Rutime的加強能力，主要是plus.webview、plus.nativeobj和plus.nativeUI。
但mui不是要替代HTML5Plus，之後也無計劃替代把全部5+的api都包一層。
mui是把一些經常使用的窗體操做封裝了，但這種封裝適應面也是有限的，遇到複雜窗體管理，仍是要仔細瞭解plus的api。
因此，
- 有人抱怨mui的文檔不全，實際上是缺本文，本文終於說清楚mui作什麼不作什麼了。詳細的mui文檔要去下方提示的mui官網查看。
- 有人抱怨mui api不全，實際上是沒去看plus的api。知原理、知如何封裝，方能融匯貫通。
- 有人抱怨Hello mui示例代碼裏寫的mui的方法，爲什麼文檔裏沒有，是由於有些方法是內部工程師簡化開發中的封裝，未考慮通用設計，還不足以開放爲標準api，因此文檔裏沒介紹。
mui有插件體系
爲了簡化開發者的多端發佈開發，mui在覈心庫以外，補充了一些插件，這些插件不必定是ui相關，也有業務相關。
在Hello mui示例裏下方的示例模板，基本都屬於插件。這些插件的使用須要加載mui標準庫以外的js等資源。