学习mui总结

作者 likaiqiang 日期 2018-03-04
学习mui总结

前言

大概学了差不多一个月的mui,感觉这玩意并没有它所宣传的那么美好。由于临近年关,一直拖到现在才记录我的学习心得。

mui是什么

mui本身

mui是Dcloud出的一款UI库,本质上和bootstrap与weui之类的没什么区别。

HTML5+

HTML5+是Dcloud推出的一个规范。[规范地址](https://www.html5plus.org/doc/h5p.html)

Native.js

Native.js是Dcloud出的一个js库,它的作用是可以让开发者使用js来调用原生api的一些功能。

hbuilder

hbuilder是一款代码编辑器,外加打包功能。

所以这一堆加起来人们眼里的mui到底是个什么玩意呢。它本身只是个css库,基于HTML5+规范与Native.js,Dcloud封装了一些常用的api,并加入了mui中,文档在这里

mui里面比较重要的概念

mui的[文档](http://dev.dcloud.net.cn/mui/ui/)
ui组件:用法和大多数css库差不多
子页面:mui里面比较重要的一个概念,概念上类似于react/vue中的组件,实际功能上远不如后者强大。主要分为两个方面:一个是页面初始化时加载的子页面,另一个是执行某项操作,打开一个新页面。感觉这两个内部实现原理很相似,只是使用场景不同。文档在这里:[创建子页面](http://dev.dcloud.net.cn/mui/window/#subpage),[打开新页面](http://dev.dcloud.net.cn/mui/window/#openwindow),[webview](http://www.dcloud.io/docs/api/zh_cn/webview.html)
事件管理:mui里面的事件和js原生事件差不多,有过jQuery开发经验的同学相信不会陌生。它所谓的自定义事件其实和Node里面的EventEmitter差不多。自定义事件能干嘛呢,可以用于页面跳转传参,具体可以看[event](http://dev.dcloud.net.cn/mui/event/)底下的小例子。

如何使用hbuilder调试app

mui官方倒是有相关的调试教程,有折腾能力的同学可以去[尝试](http://ask.dcloud.net.cn/article/69)。对于我们这种仅仅想试水app开发的同学来说,配置Android SDK还是有点力不从心。我们可以用第三方的模拟器来代替Android SDK,具体看[这里](https://ask.dcloud.net.cn/article/903)
然后成功连接以后,打开chrome,地址栏输入chrome://inspect就可以了。