mui初级入门教程（一）— 小白入手mui的学习路线

文章来源：小青年原创
发布时间：2016-05-15
关键词：mui,html5+
转载需标注本文原始地址：http://zhaomenghuan.github.io/#!/blog/20160515

写在前面

相信不少朋友初次接触到dcloud这边的产品，通常都是hbuilder和mui，因此不少朋友对于dcloud这边的产品链的认识也是各不相同。我相信对于不少新手来讲，初次使用dcloud这边的产品的第一感受必定是以为这个东西很好却无从下手，而后被一些新的概念转得云里雾里，而后就开始吐槽官方文档，其实真的是文档很差吗？

稍微有点基础的开发者可能仔细去看看官方文档，而后就能够本身跟着文档或者demo作点小例子，然而不少人因为是业务临时须要才转到跨平台app开发的，不少能够说零基础，即便有文档也不定会看得懂，或者看了更晕，相信这部分开发者最期待的是有人手把手教最好，我见过不少开发者一上来一言不合就要例子，若是你让他去看hello mui,hello h5+这两个最精华的例子，他也许会以为你在逗他。

其实这是由于咱们不少时候把精力搞分散了，没有把力量集中起来去逐个突破，因此致使看起来感受处处是肉，啃起来处处是骨头。哈哈，说了这么多，你可能以为是废话，你也可能以为说到你心理去了，若是你对dcloud这边的产品仍是有点不明不白，那但愿你耐心看下面的分析，也请你等待我后续的基础教程。

资源索引

先把几个经常使用的地址丢出来，由于你若是不想看我后面的，你直接去看这些也能够！

新手值得收藏的地址

• Dcloud官网：http://dcloud.io/

• Dcloud问答社区：http://ask.dcloud.net.cn/

• Dcloud文档汇总地址：http://ask.dcloud.net.cn/docs/

• Hello mui线上演示地址：http://www.dcloud.io/hellomui/index.html

• Hello mui演示APP下载地址：
  

• Hello 5+演示APP下载地址：
  

• 官方入门文档(强烈推荐阅读):

  • DCloud产品概述

  • App入门开发

  • mui产品

  • 新手指南

• 案例汇总：http://dcloud.io/case/

• github地址：https://github.com/dcloudio/

• 开源项目地址：https://github.com/dcloudio/casecode

官方分类文档

• html5+官网文档：http://www.html5plus.org/doc/

• mui文档：http://dev.dcloud.net.cn/mui/ui/

• 5+ App开发Native.js入门指南：http://ask.dcloud.net.cn/article/88

• Native.js示例汇总：http://ask.dcloud.net.cn/article/114

• 流应用开发指南：http://ask.dcloud.net.cn/article/406

其余学习资源

• 0Hich的网校视频

• 东翌学院视频

• 51CTO学院-张伟芝老师视频

• 猿团视频

• E家课堂视频

• 网友YanRong的心得

• 滴石App开发者的心得

• 小青年博客

学习路线

当我列出上面的这些网址，我发现其实文档并不算少，可是新手为啥感受仍是很难呢？咱们会发现一个问题，官方文档很分散，或许分散了致使开发者每次遇到问题查找文档的范围可能或许片面，其实也许他把全部的看完了就会找到答案，可是通常人恐怕没那么耐心吧，还有新手根本就没有一个清晰的思路，因此很难快速去找到本身须要的文档，因此我想官方文档须要统一化具体化。

并且把这些大体浏览一下会发现内容真多，光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 。

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

http://zhaomenghuan.github.io

MUI小白文档地址：

https://zhaomenghuan.gitbooks.io/mui/content/