# mui初級入門教程（一）— 小白入手mui的學習路線 ## 寫在前面 相信很多朋友初次接觸到`dcloud`這邊的產品，一般都是`hbuilder`和`mui`，所以很多朋友對于`dcloud`這邊的產品鏈的認識也是各不相同。我相信對于很多新手來說，初次使用`dcloud`這邊的產品的第一感覺一定是覺得這個東西很好卻無從下手，然后被一些新的概念轉得云里霧里，然后就開始吐槽官方文檔，其實真的是文檔不好嗎？ 稍微有點基礎的開發者可能仔細去看看官方文檔，然后就可以自己跟著文檔或者`demo`做點小例子，然而很多人由于是業務臨時需要才轉到跨平臺`app`開發的，很多可以說零基礎，即使有文檔也不定會看得懂，或者看了更暈，相信這部分開發者最期待的是有人手把手教最好，我見過很多開發者一上來一言不合就要例子，如果你讓他去看`hello mui`,`hello h5+`這兩個最精華的例子，他也許會覺得你在逗他。 其實這是因為我們很多時候把精力搞分散了，沒有把力量集中起來去逐個突破，所以導致看起來感覺到處是肉，啃起來到處是骨頭。哈哈，說了這么多，你可能覺得是廢話，你也可能覺得說到你心理去了，如果你對`dcloud`這邊的產品還是有點不明不白，那希望你耐心看下面的分析，也請你等待我后續的基礎教程。 ## 資源索引 先把幾個常用的地址丟出來，因為你如果不想看我后面的，你直接去看這些也可以！ ### 新手值得收藏的地址 [TOC] * Dcloud官網：[http://dcloud.io/](http://dcloud.io/) * Dcloud問答社區：[http://ask.dcloud.net.cn/](http://ask.dcloud.net.cn/) * Dcloud文檔匯總地址：[http://ask.dcloud.net.cn/docs/](http://ask.dcloud.net.cn/docs/) * Hello mui線上演示地址：[http://www.dcloud.io/hellomui/index.html](http://www.dcloud.io/hellomui/index.html) * Hello mui演示APP下載地址：  * Hello 5+演示APP下載地址：  * 官方入門文檔(強烈推薦閱讀): * [DCloud產品概述](http://ask.dcloud.net.cn/docs/) * [App入門開發](http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/89) * [mui產品](http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/91) * [新手指南](http://dev.dcloud.net.cn/mui/getting-started/) * 案例匯總：[http://dcloud.io/case/](http://dcloud.io/case/) * github地址：[https://github.com/dcloudio/](https://github.com/dcloudio/) * 開源項目地址：[https://github.com/dcloudio/casecode](https://github.com/dcloudio/casecode) ### 官方分類文檔 * html5+官網文檔：[http://www.html5plus.org/doc/](http://www.html5plus.org/doc/) * mui文檔：[http://dev.dcloud.net.cn/mui/ui/](http://dev.dcloud.net.cn/mui/ui/) * 5+ App開發Native.js入門指南：[http://ask.dcloud.net.cn/article/88](http://ask.dcloud.net.cn/article/88) * Native.js示例匯總：[http://ask.dcloud.net.cn/article/114](http://ask.dcloud.net.cn/article/114) * 流應用開發指南：[http://ask.dcloud.net.cn/article/406](http://ask.dcloud.net.cn/article/406) ### 其他學習資源 * [0Hich的網校視頻](http://dcloud.apk00.com/) * [東翌學院視頻](http://www.dongyixueyuan.com/) * [51CTO學院-張偉芝老師視頻](http://edu.51cto.com/course/course_id-5086.html) * [猿團視頻](http://edu.yuantuan.com/course/explore/DCloud?fliter%5Btype%5D=all&fliter%5Bprice%5D=all&fliter%5BcurrentLevelId%5D=all&orderBy=latest) * [E家課堂視頻](http://www.ejiakt.com/album/show/231) * [網友YanRong的心得](http://ask.dcloud.net.cn/article/217) * [滴石App開發者的心得](http://uikoo9.com/book/chapterDetail/1) * [小青年博客](http://zhaomenghuan.github.io/) ## 學習路線 當我列出上面的這些網址，我發現其實文檔并不算少，但是新手為啥感覺還是很難呢？我們會發現一個問題，官方文檔很分散，或許分散了導致開發者每次遇到問題查找文檔的范圍可能或許片面，其實也許他把所有的看完了就會找到答案，但是一般人恐怕沒那么耐心吧，還有新手根本就沒有一個清晰的思路，所以很難快速去找到自己需要的文檔，所以我想官方文檔需要統一化具體化。 而且把這些大致瀏覽一下會發現內容真多，光`html5+`里面的標準就那么多，一個個去認真學習完到猴年馬月去了，`mui`組件也那么多，難道也要一個個學習？還有`native.js`、流應用等等，感覺太多東西了，是不是瞬間覺得頭大了，哈哈，人總是有點偷懶的，如果有人幫我們寫好現成的我們直接用那就好了，于是`dcloud`這塊想了很多辦法讓開發者去開心開發，`hbuilder`豐富的語法提示、代碼快捷鍵、真機調試、演示`demo`等等，`mui`提供了豐富的組件，如果熟悉這些，開發起來還是很快的。 前提是熟悉了以后才會爽，如果不熟會感覺什么，學的東西太多，比如熟悉`hbuilder`都要一段時間，然后熟悉`html5+`，`native.js`，頁面布局和寫邏輯功能，對于新手來說，門坎兒并不小，這也是為啥很多新手喜歡吐槽的原因。因為當開發者熟悉了基本流程，會發現`dcloud`這邊相對其他平臺來說更開放，個人可定制空間更大，正因為越發開放，那么可以應用的場景更加廣泛，自然開發者問題更多，這也希望有能力的開發者能夠去完善整個開發生態鏈。 這里給各位的建議是先熟悉`html5+`的常用`api`，比如`webview`，你只有對`html5+`里面的`webview`有所了解，才能理解為什么`mui`里面會去封裝一些原生實現的組件如雙`webview`的上拉刷新，`tabbar`多子頁面底部導航等。mui里面的這些組件通過對`html5+ webview`的封裝，極大的提升了`app`的性能。由于用`hbuilder`打包的`app`默認包含`html5+ rumtime`，所以當你使用`hbuilder`構建`app`項目時候，無論你是否引用`mui`文件，無需引用任何其他文件，你都可以調用`html5+ api`和`native.js`。也就是說即使你不用`mui`，只用`html5+`提供的`api`，然后自己書寫`html`，`css`，`js`文件就可以打包生成一個`app`。 當然考慮到大部分人時間精力有限，為了讓開發者有較快的開發速度，官方提供了`mui`框架，`mui`框架擁有豐富的組件，可以極大的提高開發效率。根據`hello mui`演示`app`提供的`demo`，開發者可以快速構建一個自己的app。 `mui`是基于`html5+`構建的框架，所以對于`mui`中提供的原生組件，其適用環境是`app`中的原生組件`webview`，并不能在瀏覽器中運行，如果想用`mui`構建瀏覽器上的手機站點，只能使用`mui`中基于`h5`的組件。對于原生實現的組件，`mui`都有對應的`h5`實現，所以開發者可以做合理的處理，在書寫較少代碼的情況下，實現多端發布。 流應用是`dcloud`這邊很有創新的一個產品，流應用基于`HTML5+`技術，可達到原生應用的體驗。同時基于`DCloud`專利的流式發行和更新技術，可以大幅壓縮安裝包并實現邊下邊用。讓App可5秒內完成下載、啟動。目前擁有6億手機用戶的360手機助手已經集成了`DCloud`的流應用引擎，可以發行流應用。建議對`dcloud`的產品有個大致了解后再實踐這塊的內容。 所以我給新手的學習路線是hbuilder = > html5+ = > mui = > 多端發布和流應用，當熟悉了這邊的產品鏈以后開發起來會快很多，像`hbuilder`,`html5+`開始可以簡單看看，了解基本的東西就可以。用`mui`的話至少得有基本的前端基礎吧，再怎么樣也得會基本的`css`布局和`js`基礎吧，如果沒有這些基礎，先花點時間學一下基礎或許更好。不要相信那種什么從零開始一周開發`app`的廣告詞，沒有基礎，也很難說做一個體驗極好的`app`。 如果有原生開發經驗的開發者一定會理解`java`在`android`中或者`Objective-C`在`ios`中的地位，做跨平臺`app`開發，其實主要還是在于`js`功底，特別是原生`js`水平，所以如果`js`基礎一般的開發者還是要不斷加強學習，這里給的建議跟著`hello mui`里面的例子學，看官方人員是怎么寫的，自己學著寫，然后也可以在業余時間去研究一下基礎。相信假以時日，你會發現你的`js`水平也會不斷提高。 ## 學習疑惑解答 ### html5+是什么？ `html5+`是`DCloud`提供的`html5`強化引擎，可以把`HTML5 App`打包為原生`App`，并且達到原生的功能和體驗。說白了就是原本只能原生`APP`才能實現的功能，現在可以通過`html5+`這個強化引擎作為橋梁，你通過調用`plus.*`方法實現，也就是你可以通過書寫js代碼實現android和ios兩套的原生功能。`html5+`封裝了一些最常用的功能，并向`W3C`提交了作為標準的提案，具體的可以參考[html5+規范API](http://www.html5plus.org/doc/)。 ### html5+和native.js有什么區別？ `html5+`作為一種通用標準，只封裝了最常用的一些`API`，如果你有其他需求但是5+里面沒有怎么辦，這個時候如果你懂原生應用開發，你可以基于`native.js`語法規范進行個性化封裝。`Native.js for Android`封裝一條通過`JS`語法直接調用`Native Java`接口通道，通過`plus.android`可調用幾乎所有的系統`API`。`Native.js for iOS`封裝一條通過`JS`語法直接調用`Native Objective-C`接口通道，通過`plus.ios`可調用幾乎所有的系統`API`。 ### 5+ sdk是什么？ 我們經常看到`html5+`(即`html5plus`)、`5+ sdk`,其實本質是一樣的，不過這里的5+ sdk是針對離線打包開發和`Hybrid`開發模式，因為用`hbuilder`在線打包，`html5+`和`native.js`的底層會被自動打包到安裝包里面，開發者無需引用什么即可調用相關API。只要當開發者想要離線打包及`Hybrid`開發模式或者深入了解`html5+`的引擎實現原理，才需要去了解一下`5+ sdk`，一般情況下我們只需要知道5+標準里面的基本用法就足夠我們開發出一個`APP`。 ### mui與html5+有什么關系？ `mui`是`Dcloud`官方推出的一個基于`html5+`標準的框架，同時擁有`h`5組件和原生組件，原生組件依賴于`html5+`運行環境，也就是原生`app`里面的`webview`組件（能加載顯示網頁，可以將其視為一個瀏覽器），所以`mui`里面的原生組件不能用于瀏覽器環境，可以通過`mui`里面的`mui.os.plus`進行判斷，如果是`plus`環境會返回`true`，否則會返回`undefined`。開發者可以根據自己的需要進行代碼適配，對于`APP`使用增強的原生組件，對于普通瀏覽器里面運行的頁面使用`h5`組件。同時用戶還可以使用`mui.os.android`、`mui.os.ios`及`mui.os.wechat`對平臺進行檢測，然后書寫不同的邏輯代碼。對于`mui`里面沒有封裝的原生組件，大家可以根據自己的需要基于`html5+`標準和`native.js`語法進行個性化定制。因此這里我們可以有一個基本影響就是我們開始可以直接上手`mui`，不過需要明白`mui`與其他`UI`框架的區別在于，`mui`擁有獨有的原生組件，而且這個是依賴于`html5+`標準的，所以`mui`里面的很多組件實現方法甚至用戶就是`html5+`里面的標準寫法，對`html5+`標準有一定了解有助于我們理解`mui`的一些使用方法。 ## 后記 本文沒有給出任何實際代碼，只是根據很多朋友的一些疑惑談了談自己的看法，所以不一定很全面，大家可以參考官方文檔去詳細了解細節。從今天開始我會寫一個mui的系列教程。在此承諾，每周至少會保證更新一篇文章。如果有朋友有與之相關的優秀學習資源可以給我推薦，聯系郵箱：`zhaomenghuan@foxmail.com`。 文章原始地址是我博客地址： > [http://zhaomenghuan.github.io](http://zhaomenghuan.github.io/) MUI小白文檔地址： > [https://zhaomenghuan.gitbooks.io/mui/content/](https://zhaomenghuan.gitbooks.io/mui/content/) 本人博客歡迎轉載！但請注明出處！本人博客若有侵犯他人之處，望見諒，請聯系我。希望互相關注，互相學習 --[PheonixHkbxoic](http://www.cnblogs.com/PheonixHkbxoic/)