文章來(lái)源：小青年原創(chuàng )
發(fā)布時(shí)間：2016-05-15
關(guān)鍵詞：mui,html5+
轉載需標注本文原始地址:http://zhaomenghuan.github.io/#!/blog/20160515
相信很多朋友初次接觸到dcloud這邊的產(chǎn)品，一般都是hbuilder和mui，所以很多朋友對于dcloud這邊的產(chǎn)品鏈的認識也是各不相同。我相信對于很多新手來(lái)說(shuō)，初次使用dcloud這邊的產(chǎn)品的第一感覺(jué)一定是覺(jué)得這個(gè)東西很好卻無(wú)從下手，然后被一些新的概念轉得云里霧里，然后就開(kāi)始吐槽官方文檔，其實(shí)真的是文檔不好嗎？
稍微有點(diǎn)基礎的開(kāi)發(fā)者可能仔細去看看官方文檔，然后就可以自己跟著(zhù)文檔或者demo做點(diǎn)小例子，然而很多人由于是業(yè)務(wù)臨時(shí)需要才轉到跨平臺app開(kāi)發(fā)的，很多可以說(shuō)零基礎，即使有文檔也不定會(huì )看得懂，或者看了更暈，相信這部分開(kāi)發(fā)者最期待的是有人手把手教最好，我見(jiàn)過(guò)很多開(kāi)發(fā)者一上來(lái)一言不合就要例子，如果你讓他去看hello mui,hello h5+這兩個(gè)最精華的例子，他也許會(huì )覺(jué)得你在逗他。
其實(shí)這是因為我們很多時(shí)候把精力搞分散了，沒(méi)有把力量集中起來(lái)去逐個(gè)突破，所以導致看起來(lái)感覺(jué)到處是肉，啃起來(lái)到處是骨頭。哈哈，說(shuō)了這么多，你可能覺(jué)得是廢話(huà)，你也可能覺(jué)得說(shuō)到你心理去了，如果你對dcloud這邊的產(chǎn)品還是有點(diǎn)不明不白，那希望你耐心看下面的分析，也請你等待我后續的基礎教程。
先把幾個(gè)常用的地址丟出來(lái)，因為你如果不想看我后面的，你直接去看這些也可以！
當我列出上面的這些網(wǎng)址，我發(fā)現其實(shí)文檔并不算少，但是新手為啥感覺(jué)還是很難呢？我們會(huì )發(fā)現一個(gè)問(wèn)題，官方文檔很分散，或許分散了導致開(kāi)發(fā)者每次遇到問(wèn)題查找文檔的范圍可能或許片面，其實(shí)也許他把所有的看完了就會(huì )找到答案，但是一般人恐怕沒(méi)那么耐心吧，還有新手根本就沒(méi)有一個(gè)清晰的思路，所以很難快速去找到自己需要的文檔，所以我想官方文檔需要統一化具體化。
而且把這些大致瀏覽一下會(huì )發(fā)現內容真多，光html5+里面的標準就那么多，一個(gè)個(gè)去認真學(xué)習完到猴年馬月去了，mui組件也那么多，難道也要一個(gè)個(gè)學(xué)習？還有native.js、流應用等等，感覺(jué)太多東西了，是不是瞬間覺(jué)得頭大了，哈哈，人總是有點(diǎn)偷懶的，如果有人幫我們寫(xiě)好現成的我們直接用那就好了，于是dcloud這塊想了很多辦法讓開(kāi)發(fā)者去開(kāi)心開(kāi)發(fā)，hbuilder豐富的語(yǔ)法提示、代碼快捷鍵、真機調試、演示demo等等，mui提供了豐富的組件，如果熟悉這些，開(kāi)發(fā)起來(lái)還是很快的。
前提是熟悉了以后才會(huì )爽，如果不熟會(huì )感覺(jué)什么，學(xué)的東西太多，比如熟悉hbuilder都要一段時(shí)間，然后熟悉html5+，native.js，頁(yè)面布局和寫(xiě)邏輯功能，對于新手來(lái)說(shuō)，門(mén)坎兒并不小，這也是為啥很多新手喜歡吐槽的原因。因為當開(kāi)發(fā)者熟悉了基本流程，會(huì )發(fā)現dcloud這邊相對其他平臺來(lái)說(shuō)更開(kāi)放，個(gè)人可定制空間更大，正因為越發(fā)開(kāi)放，那么可以應用的場(chǎng)景更加廣泛，自然開(kāi)發(fā)者問(wèn)題更多，這也希望有能力的開(kāi)發(fā)者能夠去完善整個(gè)開(kāi)發(fā)生態(tài)鏈。
這里給各位的建議是先熟悉html5+的常用api，比如webview，你只有對html5+里面的webview有所了解，才能理解為什么mui里面會(huì )去封裝一些原生實(shí)現的組件如雙webview的上拉刷新，tabbar多子頁(yè)面底部導航等。mui里面的這些組件通過(guò)對html5+ webview的封裝，極大的提升了app的性能。由于用hbuilder打包的app默認包含html5+ rumtime，所以當你使用hbuilder構建app項目時(shí)候，無(wú)論你是否引用mui文件，無(wú)需引用任何其他文件，你都可以調用html5+ api和native.js。也就是說(shuō)即使你不用mui，只用html5+提供的api，然后自己書(shū)寫(xiě)html，css，js文件就可以打包生成一個(gè)app。
當然考慮到大部分人時(shí)間精力有限，為了讓開(kāi)發(fā)者有較快的開(kāi)發(fā)速度，官方提供了mui框架，mui框架擁有豐富的組件，可以極大的提高開(kāi)發(fā)效率。根據hello mui演示app提供的demo，開(kāi)發(fā)者可以快速構建一個(gè)自己的app。
mui是基于html5+構建的框架，所以對于mui中提供的原生組件，其適用環(huán)境是app中的原生組件webview，并不能在瀏覽器中運行，如果想用mui構建瀏覽器上的手機站點(diǎn)，只能使用mui中基于h5的組件。對于原生實(shí)現的組件，mui都有對應的h5實(shí)現，所以開(kāi)發(fā)者可以做合理的處理，在書(shū)寫(xiě)較少代碼的情況下，實(shí)現多端發(fā)布。
流應用是dcloud這邊很有創(chuàng )新的一個(gè)產(chǎn)品，流應用基于HTML5+技術(shù)，可達到原生應用的體驗。同時(shí)基于DCloud專(zhuān)利的流式發(fā)行和更新技術(shù)，可以大幅壓縮安裝包并實(shí)現邊下邊用。讓App可5秒內完成下載、啟動(dòng)。目前擁有6億手機用戶(hù)的360手機助手已經(jīng)集成了DCloud的流應用引擎，可以發(fā)行流應用。建議對dcloud的產(chǎn)品有個(gè)大致了解后再實(shí)踐這塊的內容。
所以我給新手的學(xué)習路線(xiàn)是hbuilder = > html5+ = > mui = > 多端發(fā)布和流應用，當熟悉了這邊的產(chǎn)品鏈以后開(kāi)發(fā)起來(lái)會(huì )快很多，像hbuilder,html5+開(kāi)始可以簡(jiǎn)單看看，了解基本的東西就可以。用mui的話(huà)至少得有基本的前端基礎吧，再怎么樣也得會(huì )基本的css布局和js基礎吧，如果沒(méi)有這些基礎，先花點(diǎn)時(shí)間學(xué)一下基礎或許更好。不要相信那種什么從零開(kāi)始一周開(kāi)發(fā)app的廣告詞，沒(méi)有基礎，也很難說(shuō)做一個(gè)體驗極好的app。
如果有原生開(kāi)發(fā)經(jīng)驗的開(kāi)發(fā)者一定會(huì )理解java在android中或者Objective-C在ios中的地位，做跨平臺app開(kāi)發(fā)，其實(shí)主要還是在于js功底，特別是原生js水平，所以如果js基礎一般的開(kāi)發(fā)者還是要不斷加強學(xué)習，這里給的建議跟著(zhù)hello mui里面的例子學(xué)，看官方人員是怎么寫(xiě)的，自己學(xué)著(zhù)寫(xiě)，然后也可以在業(yè)余時(shí)間去研究一下基礎。相信假以時(shí)日，你會(huì )發(fā)現你的js水平也會(huì )不斷提高。
html5+是DCloud提供的html5強化引擎，可以把HTML5 App打包為原生App，并且達到原生的功能和體驗。說(shuō)白了就是原本只能原生APP才能實(shí)現的功能，現在可以通過(guò)html5+這個(gè)強化引擎作為橋梁，你通過(guò)調用plus.*方法實(shí)現，也就是你可以通過(guò)書(shū)寫(xiě)js代碼實(shí)現android和ios兩套的原生功能。html5+封裝了一些最常用的功能，并向W3C提交了作為標準的提案，具體的可以參考html5+規范API。
html5+作為一種通用標準，只封裝了最常用的一些API，如果你有其他需求但是5+里面沒(méi)有怎么辦，這個(gè)時(shí)候如果你懂原生應用開(kāi)發(fā)，你可以基于native.js語(yǔ)法規范進(jìn)行個(gè)性化封裝。Native.js for Android封裝一條通過(guò)JS語(yǔ)法直接調用Native Java接口通道，通過(guò)plus.android可調用幾乎所有的系統API。Native.js for iOS封裝一條通過(guò)JS語(yǔ)法直接調用Native Objective-C接口通道，通過(guò)plus.ios可調用幾乎所有的系統API。
我們經(jīng)?？吹?code style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0); box-sizing: border-box; font-family: 'Source Code Pro', monospace; font-size: 0.9em; padding: 2px 4px; color: rgb(199, 37, 78); border-radius: 4px; outline: none !important; background-color: rgb(249, 242, 244);">html5+(即html5plus)、5+ sdk,其實(shí)本質(zhì)是一樣的，不過(guò)這里的5+ sdk是針對離線(xiàn)打包開(kāi)發(fā)和Hybrid開(kāi)發(fā)模式，因為用hbuilder在線(xiàn)打包，html5+和native.js的底層會(huì )被自動(dòng)打包到安裝包里面，開(kāi)發(fā)者無(wú)需引用什么即可調用相關(guān)API。只要當開(kāi)發(fā)者想要離線(xiàn)打包及Hybrid開(kāi)發(fā)模式或者深入了解html5+的引擎實(shí)現原理，才需要去了解一下5+ sdk，一般情況下我們只需要知道5+標準里面的基本用法就足夠我們開(kāi)發(fā)出一個(gè)APP。
mui是Dcloud官方推出的一個(gè)基于html5+標準的框架，同時(shí)擁有h5組件和原生組件，原生組件依賴(lài)于html5+運行環(huán)境，也就是原生app里面的webview組件（能加載顯示網(wǎng)頁(yè)，可以將其視為一個(gè)瀏覽器），所以mui里面的原生組件不能用于瀏覽器環(huán)境，可以通過(guò)mui里面的mui.os.plus進(jìn)行判斷，如果是plus環(huán)境會(huì )返回true，否則會(huì )返回undefined。開(kāi)發(fā)者可以根據自己的需要進(jìn)行代碼適配，對于APP使用增強的原生組件，對于普通瀏覽器里面運行的頁(yè)面使用h5組件。同時(shí)用戶(hù)還可以使用mui.os.android、mui.os.ios及mui.os.wechat對平臺進(jìn)行檢測，然后書(shū)寫(xiě)不同的邏輯代碼。對于mui里面沒(méi)有封裝的原生組件，大家可以根據自己的需要基于html5+標準和native.js語(yǔ)法進(jìn)行個(gè)性化定制。因此這里我們可以有一個(gè)基本影響就是我們開(kāi)始可以直接上手mui，不過(guò)需要明白mui與其他UI框架的區別在于，mui擁有獨有的原生組件，而且這個(gè)是依賴(lài)于html5+標準的，所以mui里面的很多組件實(shí)現方法甚至用戶(hù)就是html5+里面的標準寫(xiě)法，對html5+標準有一定了解有助于我們理解mui的一些使用方法。
本文沒(méi)有給出任何實(shí)際代碼，只是根據很多朋友的一些疑惑談了談自己的看法，所以不一定很全面，大家可以參考官方文檔去詳細了解細節。從今天開(kāi)始我會(huì )寫(xiě)一個(gè)mui的系列教程。在此承諾，每周至少會(huì )保證更新一篇文章。如果有朋友有與之相關(guān)的優(yōu)秀學(xué)習資源可以給我推薦，聯(lián)系郵箱：zhaomenghuan@foxmail.com 。
文章原始地址是我博客地址：
MUI小白文檔地址：
聯(lián)系客服
