<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                # 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下載地址: ![](https://segmentfault.com/image?src=http://www.dcloud.io/images/code-m.png&objectId=1190000005173713&token=fe634cd5850297d0378d9b7c975a4731) * Hello 5+演示APP下載地址: ![](https://segmentfault.com/image?src=http://www.dcloud.io/images/code-5.png&objectId=1190000005173713&token=e78fe8fe3416cb8aae60a60f65df2813) * 官方入門文檔(強烈推薦閱讀): * [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/)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看