webapp mui & HTML5+ (二) 之 mui

阿新 • • 發佈：2019-01-08

webapp mui & HTML5+ (二) 之 mui

mui不僅僅是前端ui框架，包括了ui，js操作，native封裝。核心還是webview ,和phonegap或者自己編寫的webview核心原理差不多。

mui是一個高效能的HTML5開發框架，從UI到效率，都在極力追求原生體驗。

本文只是介紹一下mui的基礎以及使用場景，並不涉及具體程式碼，後續會單獨介紹每一個api的具體程式碼實現；想了解mui更詳細的資訊，請訪問mui官網

UI元件

mui的ui樣式是以IOS為主體設計的，也補充了android特有一些樣式；所以整體的風格看上去還是比較統一的，一些業務不是那麼複雜的app完全可以實現。
mui的ui元件也是比較全的，封裝了一些比較常用的ui樣式，再配合上HBuilder上特有的程式碼塊提示，開發效率提升不少。
比如比較常用的像switch開關，直接敲‘mswitch’，HBuilder就會直接列出相關的程式碼，直接選擇相應的程式碼塊就可以了。
關於ui樣式這裡不多說，官網上面都有現成的例子和程式碼，有興趣的小夥伴可以去看看

mui元件

視窗管理

mui雖然有SPA單頁方案，但mui.openWindow並不會在非5+環境下降級為SPA的div窗體切換。
如果使用spa固然可以一套程式碼多處使用，但無法在5+環境下自動升級為原生view切換動畫。

頁面初始化

在app開發中，若要使用HTML5+擴充套件api，必須等plusready事件發生後才能正常使用，mui將該事件封裝成了mui.plusReady()方法，涉及到HTML5+的api，建議都寫在mui.plusReady方法中。同樣也是有程式碼塊的：minit
建立子頁面

在mobile app開發過程中，經常遇到卡頭卡尾的頁面，此時若使用區域性滾動，在android手機上會出現滾動不流暢的問題； mui的解決思路是：將需要滾動的區域通過單獨的webview實現，完全使用原生滾動。具體做法則是：將目標頁面分解為主頁面和內容頁面，主頁面顯示卡頭卡尾區域，比如頂部導航、底部選項卡等；內容頁面顯示具體需要滾動的內容，然後在主頁面中呼叫mui.init方法初始化內容頁面。
開啟新頁面

做web app，一個無法避開的問題就是轉場動畫；web是基於連結構建的，從一個頁面點選連結跳轉到另一個頁面，如果通過有重新整理的開啟方式，使用者要面對一個空白的頁面等待；如果通過無重新整理的方式，用Javascript移入DOM節點（常見的SPA解決方案），會碰到很高的效能挑戰：DOM節點繁多，頁面太大，轉場動畫不流暢甚至導致瀏覽器崩潰； mui的解決思路是：單webview只承載單個頁面的dom，減少dom層級及頁面大小；頁面切換使用原生動畫，將最耗效能的部分交給原生實現.
開啟帶原生導航欄的新頁面

使用父子webview或者同屏顯示多個webview的效能和資源消耗較大。非必要不推薦使用同屏多webview。推薦使用原生導航欄方案代替。可以加快窗體進入速度，記憶體佔用更少。mui在openWindow基礎上擴充套件了mui.openWindowWithTitle()方法,支援nativeObj繪製標題欄,加快頁面展現

關閉頁面

mui框架將視窗關閉功能封裝在mui.back方法中，具體執行邏輯是：

* 若當前webview為預載入頁面，則hide當前webview；
* 否則，close當前webview；

在mui框架中，有三種操作會觸發頁面關閉（執行mui.back方法）：

* 點選包含.mui-action-back類的控制元件
* 在螢幕內，向右快速滑動
* Android手機按下back按鍵

預載入

所謂的預載入技術就是在使用者尚未觸發頁面跳轉時，提前建立目標頁面，這樣當用戶跳轉時，就可以立即進行頁面切換，節省建立新頁面的時間，提升app使用體驗。

事件管理

在開發移動端的應用時，會用到很多的手勢操作，比如滑動、長按等，為了方便開放者快速整合這些手勢，mui內建了常用的手勢事件。根據使用頻率，mui預設會監聽部分手勢事件，如點選、滑動事件；為了開發出更高效能的moble App，mui支援使用者根據實際業務需求，通過mui.init方法中的gestureConfig引數，配置具體需要監聽的手勢事件。
在App開發中，經常會遇到頁面間傳值的需求，比如從新聞列表頁進入詳情頁，需要將新聞id傳遞過去； Html5Plus規範設計了evalJS方法來解決該問題；但evalJS方法僅接收字串引數，涉及多個引數時，需要開發人員手動拼字串；為簡化開發，mui框架在evalJS方法的基礎上，封裝了自定義事件，通過自定義事件，使用者可以輕鬆實現多webview間資料傳遞。

utils

mui框架將很多功能配置都集中在mui.init方法中，要使用某項功能，只需要在mui.init方法中完成對應引數配置即可，目前支援在mui.init方法中配置的功能包括：建立子頁面、關閉頁面、手勢事件配置、預載入、下拉重新整理、上拉載入、設定系統狀態列背景顏色。

mui需要在頁面載入時初始化很多基礎控制元件,如監聽返回鍵,因此務必在每個頁面中呼叫

Ajax

mui框架基於htm5plus的XMLHttpRequest，封裝了常用的Ajax函式，支援GET、POST請求方式，支援返回json、xml、html、text、script資料型別；
本著極簡的設計原則，mui提供了mui.ajax方法，並在mui.ajax方法基礎上，進一步簡化出最常用的mui.get()、mui.getJSON()、mui.post()三個方法。

上拉、下拉重新整理

基於div的下拉重新整理在Android4.4以下也不流暢，5+擴充套件了原生的下拉重新整理控制元件。mui的下拉重新整理，在Android的5+ App環境下會呼叫5+擴充套件的雙webview下拉重新整理，而在iOS 的5+環境和非5+環境下，則會呼叫基於div的下拉重新整理。

這篇文章只是讓沒有用過mui的小夥伴對mui有一個大致大認識，下一篇開始就是業務的具體實現，有興趣的小夥伴，頂一下唄！

本文純手打，有不當之處請留言！希望能幫到小夥伴們，謝謝！

webapp mui & HTML5+ (二) 之 mui