MUI在web APP開發(fā)中的應(yīng)用與研究

汪佳佳

江西農(nóng)業(yè)大學(xué)

?

MUI在web APP開發(fā)中的應(yīng)用與研究

汪佳佳

江西農(nóng)業(yè)大學(xué)

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

MUI web APP javascript

1　引言

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

2　webAPP前端框架

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

3　MUI框架

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

3.1.1MUi框架的特點

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

3.1.2MUI框架的功能

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

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

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

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

3.1.3MUI框架的優(yōu)點

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

3.1.4MUI框架的應(yīng)用

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

頂部標(biāo)題欄是每個頁面都必需的內(nèi)容，在Hbuilder中輸入mheader，可以快速生成頂部導(dǎo)航欄，然后.輸入mbody。除頂部導(dǎo)航、底部選項卡兩個控件之外，其它控件都放在.mui-content控件內(nèi)，在Hbuilder中輸入mbody，可快速生成包含.mui-content的代碼塊，這樣整個頁面結(jié)構(gòu)就已經(jīng)完整了。

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

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

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

4　結(jié)束語

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

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

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

汪佳佳 1993年2月5日。女，漢，江蘇江陰。學(xué)歷：碩士在讀。單位：江西農(nóng)業(yè)大學(xué)。研究方向：計算機技術(shù)。