性能和體驗(yàn)的差距,一直是mobile app開發(fā)者放棄HTML5的首要原因。
瀏覽器天生的切頁(yè)白屏、不忍直視的轉(zhuǎn)頁(yè)動(dòng)畫、浮動(dòng)元素的抖動(dòng)、無(wú)法流暢下拉刷新、側(cè)滑抽屜卡頓等問題,這些都讓HTML5開發(fā)者倍感挫敗,尤其拿到Android低端機(jī)運(yùn)行,摔手機(jī)的心都有;
另一方面,瀏覽器默認(rèn)控件樣式又少又丑,制作一個(gè)漂亮的控件非常麻煩,也有一些制作簡(jiǎn)單的ui框架但性能低下。
mui框架有效的解決了這些問題,這是一個(gè)可以方便開發(fā)出高性能App的框架,也是目前最接近原生App效果的框架。
其實(shí)我們?cè)臼情_放心態(tài),大家隨意使用自己喜歡的前端框架。但是其他移動(dòng)App框架實(shí)在不給力:
基于jq的jqmobile,性能低的無(wú)法忍受
基于angular的ionic,都把pc端很重的東西引入到移動(dòng)App中。angularjs本身設(shè)計(jì)是為了pc端網(wǎng)頁(yè)的雙向數(shù)據(jù)綁定,做個(gè)移動(dòng)App干嘛用這么重的東西。
bootstrap這種響應(yīng)式設(shè)計(jì),性能在低端機(jī)不足,而且UI風(fēng)格一看就是網(wǎng)頁(yè),不是App的感覺。
于是為了方便廣大開發(fā)者,我們制作了mui。
基于mui的定位,產(chǎn)生了mui的幾個(gè)特點(diǎn),輕、小、只涉及UI、只為移動(dòng)App而生、界面風(fēng)格原生化。
所以請(qǐng)大家注意,mui有所為有所不為:
mui不是jq,不封裝dom操作
與ui無(wú)關(guān)的mui不做,你愿意用jq或zepto就自己用,并不沖突。
但我們并不建議在移動(dòng)App里引入jq或zepto這些框架,原因如下:
為了性能,層層封裝的框架,尤其是遍歷循環(huán)dom時(shí),影響效率,尤其在低端Android手機(jī)上,我們費(fèi)死勁了才把性能以毫秒為單位一點(diǎn)點(diǎn)提升,搞這個(gè)的dom框架進(jìn)來(lái)就讓很多努力又付諸東流。
原生JS挺簡(jiǎn)單,為何需要jq?
jq的成功當(dāng)時(shí)是因?yàn)閕e6、7、8、9、10、chrome、ff這些瀏覽器不兼容,讓開發(fā)者崩潰,而且pc上瀏覽器性能好,跨平臺(tái)兼容也不影響性能。但jq根本就不是為手機(jī)設(shè)計(jì)的。
手機(jī)上只有webkit瀏覽器(忽略wp,反正mui不支持wp),根本就不需要jq這種封裝框架來(lái)操作dom。
而且HBuilder提供了代碼塊來(lái)簡(jiǎn)化開發(fā),敲dg、dq,直接生成document.getElementById("")、document.querySelectorAll(""),非??旖莘奖悖覉?zhí)行性能非常高,而且沒有瀏覽器兼容問題。
發(fā)現(xiàn)很多開發(fā)者只會(huì)jq,反正想繼續(xù)在App里使用jq沒有問題。但也建議大家多學(xué)學(xué)js本身。
mui與vue、react、angular也不是一個(gè)層面的東西,可以在一個(gè)工程里混合使用。但在大多數(shù)ui控件上,應(yīng)該直接使用mui的寫法,因?yàn)閙ui的繪制是最樸素的HTML繪制,不是經(jīng)過js操作的繪制,這種方案的效率比經(jīng)過js繪制的效率要高很多。只有必須經(jīng)過js操作才能渲染的控件,比如ajax聯(lián)網(wǎng)后填充的list,此時(shí)使用vue或react都可以。
mui、HTML5+、5+Runtime的關(guān)系說明
mui是一個(gè)前端框架,HTML5+是一套HTML5能力擴(kuò)展規(guī)范,HTML5+ Runtime是實(shí)現(xiàn)HTML5+規(guī)范的強(qiáng)化瀏覽器引擎。
有點(diǎn)類似于bootstrap、w3c和chrome os的關(guān)系。
HTML5+規(guī)范隸屬于http://www.html5plus.org,定義了HTML5規(guī)范中沒有但開發(fā)者做App需要的擴(kuò)展規(guī)范。
DCloud的5+ Runtime完整的實(shí)現(xiàn)了HTML5+規(guī)范。同時(shí)5+ Runtime還實(shí)現(xiàn)了Native.js,一種通過js調(diào)用幾十萬(wàn)原生API的技術(shù)。
為了提升體驗(yàn),mui勢(shì)必會(huì)調(diào)用一些5+Rutime的增強(qiáng)能力,主要是plus.webview、plus.nativeobj和plus.nativeUI。
但mui不是要替代HTML5Plus,以后也無(wú)計(jì)劃替代把所有5+的api都包一層。
mui是把一些常用的窗體操作封裝了,但這種封裝適應(yīng)面也是有限的,遇到復(fù)雜窗體管理,還是要仔細(xì)了解plus的api。
所以,
有人抱怨mui的文檔不全,其實(shí)是缺本文,本文終于說清楚mui做什么不做什么了。詳細(xì)的mui文檔要去下方提示的mui官網(wǎng)查看。
有人抱怨mui api不全,其實(shí)是沒去看plus的api。知原理、知如何封裝,方能融匯貫通。
有人抱怨Hello mui示例代碼里寫的mui的方法,為何文檔里沒有,是因?yàn)橛行┓椒ㄊ莾?nèi)部工程師簡(jiǎn)化開發(fā)中的封裝,未考慮通用設(shè)計(jì),還不足以開放為標(biāo)準(zhǔn)api,所以文檔里沒介紹。
mui有插件體系
為了簡(jiǎn)化開發(fā)者的多端發(fā)布開發(fā),mui在核心庫(kù)之外,補(bǔ)充了一些插件,這些插件不一定是ui相關(guān),也有業(yè)務(wù)相關(guān)。
在Hello mui示例里下方的示例模板,基本都屬于插件。這些插件的使用需要加載mui標(biāo)準(zhǔn)庫(kù)之外的js等資源。
這里是mui發(fā)布時(shí)的演講視頻://v.youku.com/v_show/id_XNzYyOTEyMjcy.html
聯(lián)系客服