mui初級入門教程（一）— 小白入手mui的學習路線

時間 2019-11-08

標籤 mui 初級入門教程入手學習路線简体版

原文原文鏈接

文章來源：小青年原創
發佈時間：2016-05-15
關鍵詞：mui,html5+
轉載需標註本文原始地址：http://zhaomenghuan.github.io...css

寫在前面

相信不少朋友初次接觸到dcloud這邊的產品，通常都是hbuilder和mui，因此不少朋友對於dcloud這邊的產品鏈的認識也是各不相同。我相信對於不少新手來講，初次使用dcloud這邊的產品的第一感受必定是以爲這個東西很好卻無從下手，而後被一些新的概念轉得雲裏霧裏，而後就開始吐槽官方文檔，其實真的是文檔很差嗎？html

稍微有點基礎的開發者可能仔細去看看官方文檔，而後就能夠本身跟着文檔或者demo作點小例子，然而不少人因爲是業務臨時須要才轉到跨平臺app開發的，不少能夠說零基礎，即便有文檔也不定會看得懂，或者看了更暈，相信這部分開發者最期待的是有人手把手教最好，我見過不少開發者一上來一言不合就要例子，若是你讓他去看hello mui,hello h5+這兩個最精華的例子，他也許會以爲你在逗他。前端

其實這是由於咱們不少時候把精力搞分散了，沒有把力量集中起來去逐個突破，因此致使看起來感受處處是肉，啃起來處處是骨頭。哈哈，說了這麼多，你可能以爲是廢話，你也可能以爲說到你心理去了，若是你對dcloud這邊的產品仍是有點不明不白，那但願你耐心看下面的分析，也請你等待我後續的基礎教程。html5

資源索引

先把幾個經常使用的地址丟出來，由於你若是不想看我後面的，你直接去看這些也能夠！java

新手值得收藏的地址

Dcloud官網：http://dcloud.io/android
Dcloud問答社區：http://ask.dcloud.net.cn/ios
Dcloud文檔彙總地址：http://ask.dcloud.net.cn/docs/git
Hello mui線上演示地址：http://www.dcloud.io/hellomui...github
Hello mui演示APP下載地址：
web
Hello 5+演示APP下載地址：
官方入門文檔(強烈推薦閱讀):
案例彙總：http://dcloud.io/case/
github地址：https://github.com/dcloudio/
開源項目地址：https://github.com/dcloudio/c...

官方分類文檔

html5+官網文檔：http://www.html5plus.org/doc/
mui文檔：http://dev.dcloud.net.cn/mui/ui/
5+ App開發Native.js入門指南：http://ask.dcloud.net.cn/arti...
Native.js示例彙總：http://ask.dcloud.net.cn/arti...
流應用開發指南：http://ask.dcloud.net.cn/arti...

其餘學習資源

學習路線

當我列出上面的這些網址，我發現其實文檔並不算少，可是新手爲啥感受仍是很難呢？咱們會發現一個問題，官方文檔很分散，或許分散了致使開發者每次遇到問題查找文檔的範圍可能或許片面，其實也許他把全部的看完了就會找到答案，可是通常人恐怕沒那麼耐心吧，還有新手根本就沒有一個清晰的思路，因此很難快速去找到本身須要的文檔，因此我想官方文檔須要統一化具體化。

並且把這些大體瀏覽一下會發現內容真多，光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。

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+標準的框架，同時擁有h5組件和原生組件，原生組件依賴於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 。

文章原始地址是我博客地址：