MUI在web APP開發中的應用與研究

汪佳佳

江西農業大學

?

MUI在web APP開發中的應用與研究

汪佳佳

江西農業大學

本文介紹了目前比較流行的Web APP前端開發框架MUI，研究了webAPP 前端開發中采用MUI框架的意義，以及MUI框架自身所基于的理念和在實際中的應用。希望通過這篇文章告訴廣大的web開發人員，采用MUI框架開發webAPP對項目開發所提供的便捷。

MUI web APP javascript

1　引言

隨著移動互聯網的飛速發展，移動應用設備也日漸繁多，對于移動端APP項目的開發要求也隨之變高，WebAPP項目日漸成為主流APP開發方式，這種多元話的開發方式使得Web前端人員不可或缺。web開發人員每天都寫著重復的HTML和交互效果，如果將這些適用于webAPP的前端樣式，效果等都整合在一起，這會極大的簡化web開發工作，而MUI就是適用于web app的框架。

2　webAPP前端框架

webAPP開發框架顧名思義就是webApp項目前端部分框架，其中包括html+css框架+javascript 庫，css框架是一系列基本元素樣式的集合，其中包括元素樣式重置，頁面排版布局、網格布局、標題樣式、表單樣式、導航等通用規則樣式。Javascript庫就將常見的web APP項目上的各種效果體驗，數據交互集成在一個js文件中。其目的就是簡化開發過程，提高了工作效率。

3　MUI框架

MUI是一款可用開發高性能App的框架，也是目前最接近原生App效果的框架，可以有效解決HTML5原生開發中遇到的部分問題。目前MUI已經開源，采用MIT協議。它的官方網址為“http：//dev.dcloud.net.cn/mui/”它的開源地址為“ttps：// github.com/dcloudio/mui/”。

3.1.1MUi框架的特點

在前端領域中，移動應用開發者放棄采用HTML5，其中的主要原因還是性能和體驗方面還存在問題。HTML5開發者面臨諸如瀏覽器切頁白屏、轉頁動畫較差、浮動元素抖動、無法流暢下拉刷新等問題，在Android低端機運行更是表現不足。系統瀏覽器的兼容性不同導致制作一個漂亮的控件變得非常麻煩。

3.1.2MUI框架的功能

（1）css組件。MUI內置了一套很靈活實用的css組件，可用于設計用戶首頁和交互等功能。這些組件包含的功能主要有側滑菜單、圖片輪播、選擇器、進度條、滑塊、輸入表單等常見的手機端展示效果。

（2）MUI基本布局。MUI提供了很多常用的布局樣式，如輸入表單，選擇器，彈出框，按鈕，圖片，按鈕，圖標等。用戶只需要簡單的書寫一個預定義的class或者id就可以獲得相應的效果，而不用再去書寫復雜的css樣式了。

（3）內置javascript。MUI提供了很多交互效果，如側滑菜單，選擇器，輪播組件，遮罩蒙版，上拉加載，下拉刷新和AJAX。這些常見的web效果，只需要與內置的css文件相互搭配，就能夠極大的豐富用戶體驗，何樂而不為呢？

（4）窗口管理。MUI提供的窗口管理通過預加載的方式，解決了頁面切換白屏的問題，通過封裝的原聲動畫解決了SPA模式的動畫卡頓。

3.1.3MUI框架的優點

首先是輕量，MUI框架文件僅有108K，像當下比較流行的BootStrap框架則有297K.MUI雖然文件小，但是它提供了超過20多個控件、50多個JS API和100多種樣式；其次是快，MUI的JS加載速度僅有17毫秒，體量小、加載快，頁面繪出速度快，這也致力于它的輕量的特點。最后是易，內置于HTML5開發工具HBuilder，具有代碼塊提示功能，可邊看邊改，官方文檔是純中文，零基礎。

3.1.4MUI框架的應用

搭建項目開發環境HBuilder，在Hbuilder中，新建HTML文件，選擇“含mui的HTML”模板，可以快速生成mui頁面模板，該模板默認處理了mui的js、css資源引用。在其他的開發環境下，也可以在gitHub上下載源代碼，引入到本地的文件中。

頂部標題欄是每個頁面都必需的內容，在Hbuilder中輸入mheader，可以快速生成頂部導航欄，然后.輸入mbody。除頂部導航、底部選項卡兩個控件之外，其它控件都放在.mui-content控件內，在Hbuilder中輸入mbody，可快速生成包含.mui-content的代碼塊，這樣整個頁面結構就已經完整了。

應用css組件和javascript，比如要實現圖片輪播，只要給父元素增加mui-slider類，子元素使用mui-slider-grop，圖片元素都添加一個mui-slider-item類就可以實現。對于圖片輪播，MUI框架提供了兩種效果，分別是支持循環和不支持循環，為項目開發中的多樣性提供了擴展的空間。

內置css樣式，對于上述實例，若需要添加輪播為滾動效果只需要在mui-slider-group類上再添加一個mui-sliderloop即可。

內置Javascript。mui框架內置了圖片輪播插件，通過該插件封裝的JS API，用戶可以設定是否自動輪播及輪播周期，添加一行js代碼就可以實現圖片輪播效果，真的非常方便，頁面的兼容性，對于多樣的設備都能夠很好地兼容。

4　結束語

顯而易見，MUI是一個非常受歡迎的web APP前端開發框架，用于移動設備優先的web項目。目前，有很多大型公司也都開始用MUI框架，因為他的輕量，快速，簡單，使得很多web開發人員寫代碼可以樂此不疲。

［1］ 黑爾斯 （Wesley Hales） .HTML5和JavaScript Web應用開發.北京：上海郵電出版社，2013年11月1日

［2］ 杰瑞 （Juriy Bura） ， 科茨 （Paul Coates）.Android Web Game App高級編程.北京：清華大學出版社，2014年3月1日［3］ http：//dev.dcloud.net.cn/mui/ui/、

汪佳佳 1993年2月5日。女，漢，江蘇江陰。學歷：碩士在讀。單位：江西農業大學。研究方向：計算機技術。