mui产品概述

MUI为何诞生

\n

  1. 性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。
    浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有;

  2. 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。

\n

mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。

其实我们原本是开放心态,大家随意使用自己喜欢的前端框架。但是其他移动App框架实在不给力:
- 基于jq的jqmobile,性能低的无法忍受
- 基于angular的ionic,都把pc端很重的东西引入到移动App中。angularjs本身设计是为了pc端网页的双向数据绑定,做个移动App干嘛用这么重的东西。
- bootstrap这种响应式设计,性能在低端机不足,而且UI风格一看就是网页,不是App的感觉。
于是为了方便广大开发者,我们制作了mui。

MUI的定位是:最接近原生体验的移动App的UI框架

\n

基于mui的定位,产生了mui的几个特点,轻、小、只涉及UI、只为移动App而生、界面风格原生化。
所以请大家注意,mui有所为有所不为:


  1. mui不是jq,不封装dom操作
    与ui无关的mui不做,你愿意用jq或zepto就自己用,并不冲突。
    但我们并不建议在移动App里引入jq或zepto这些框架,原因如下:

    • 为了性能,层层封装的框架,尤其是遍历循环dom时,影响效率,尤其在低端Android手机上,我们费死劲了才把性能以毫秒为单位一点点提升,搞这个的dom框架进来就让很多努力又付诸东流。
    • 原生JS挺简单,为何需要jq?
      jq的成功当时是因为ie6、7、8、9、10、chrome、ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能。但jq根本就不是为手机设计的。
      手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom。
      而且HBuilder提供了代码块来简化开发,敲dg、dq,直接生成document.getElementById("")、document.querySelectorAll(""),非常快捷方便,而且执行性能非常高,而且没有浏览器兼容问题。
      发现很多开发者只会jq,反正想继续在App里使用jq没有问题。但也建议大家多学学js本身。
      mui与vue、react、angular也不是一个层面的东西,可以在一个工程里混合使用。但在大多数ui控件上,应该直接使用mui的写法,因为mui的绘制是最朴素的HTML绘制,不是经过js操作的绘制,这种方案的效率比经过js绘制的效率要高很多。只有必须经过js操作才能渲染的控件,比如ajax联网后填充的list,此时使用vue或react都可以。
    \n
  2. mui、HTML5+、5+Runtime的关系说明
    mui是一个前端框架,HTML5+是一套HTML5能力扩展规范,HTML5+ Runtime是实现HTML5+规范的强化浏览器引擎。
    有点类似于bootstrap、w3c和chrome os的关系。
    HTML5+规范隶属于http://www.html5plus.org,定义了HTML5规范中没有但开发者做App需要的扩展规范。
    DCloud的5+ Runtime完整的实现了HTML5+规范。同时5+ Runtime还实现了Native.js,一种通过js调用几十万原生API的技术。
    为了提升体验,mui势必会调用一些5+Rutime的增强能力,主要是plus.webview、plus.nativeobj和plus.nativeUI。
    但mui不是要替代HTML5Plus,以后也无计划替代把所有5+的api都包一层。
    mui是把一些常用的窗体操作封装了,但这种封装适应面也是有限的,遇到复杂窗体管理,还是要仔细了解plus的api。
    所以,

    • 有人抱怨mui的文档不全,其实是缺本文,本文终于说清楚mui做什么不做什么了。详细的mui文档要去下方提示的mui官网查看。
    • 有人抱怨mui api不全,其实是没去看plus的api。知原理、知如何封装,方能融汇贯通。
    • 有人抱怨Hello mui示例代码里写的mui的方法,为何文档里没有,是因为有些方法是内部工程师简化开发中的封装,未考虑通用设计,还不足以开放为标准api,所以文档里没介绍。
    \n
  3. mui有插件体系
    为了简化开发者的多端发布开发,mui在核心库之外,补充了一些插件,这些插件不一定是ui相关,也有业务相关。
    在Hello mui示例里下方的示例模板,基本都属于插件。这些插件的使用需要加载mui标准库之外的js等资源。

\n

mui是一个开源项目,请前往托管在github的mui官网查看详细介绍

这里是mui发布时的演讲视频:http://v.youku.com/v_show/id_XNzYyOTEyMjcy.html


66 分享 关注
伤而无味 Kayson 744934982 习大大 可苦可乐 cike8899 Wcheng 五块钱的果汁 sky315sky z_dongdong gaus GODVer goldfish 帝阙 黄勇进 beckzl mafx ccfto 宋戈 小核桃Tony_K IT小白JXY 1552748343@qq.com jojoku tyh520life 某某 臻厚 HCloud xbon@foxmail.com 书痕 573284970@qq.com 956716282@qq.com DCloud_客服_Trust 1436063815@qq.com 小伍 308858698@qq.com 15974140495@163.com zkkpkk zzg2046@163.com gaohuazi WinXP 13653439593@163.com liminxin272@163.com 老哥教教我 xu_guobing@163.com marcel 15110620229@163.com 571673940@qq.com n913alarm@foxmail.com 564358827@qq.com lam
DCloud_客服_Trust

DCloud_客服_Trust 回复 赵熠东

写错了,是vue,感谢指正。
0 赞 2018-09-14 20:50
赵熠东

赵熠东

文章里提到的vuew 是什么?是vue吗?
0 赞 2018-09-14 19:51
EasyTuan

EasyTuan

https://github.com/EasyTuan/mui-kidApp
基于 MUI 构建一个具有 90 +页面的APP应用
0 赞 2018-08-21 11:24
qq421065846

qq421065846

从七月中旬开始做混合app,到8月中下旬app上线。已经完成了一个简单的app并且在腾讯和苹果appstore上线了,这期间遇到过无数的坑,主要是熟悉和使用mui框架,h5+,以及调用原生api等,入坑已深,现在正准备开发一款旅游类的混合app,原型图已经出。现在准备开工了。同时,希望有一起做混合app的,有兴趣加qq群654230427一起讨论交流学习,爬坑,共同进步。
1 赞 2017-09-11 22:23
405350568@qq.com

405350568@qq.com

提一下自己的看法:
jq确实是为解决兼容问题而生,但它现在所提供的越来越多的工具类已经让人们非常熟悉,并且使用起来很快捷方便,原生的js在这方面还达不到jq的层次。而所谓运行效率问题,在未达到一个量级之前,jq与原生js的效率是感觉不到的。况且jq一样也有移动端的版本,兼容低版本ie那是jq1.x所做的,高版本选择器一样使用原生js实现,效率并未差多少。作者你在这里未免把别人都看的太低了吧。请不要掺杂个人主观想法,客观的好好了解之后再来写观点可以么。
1 赞 2017-09-05 18:11
qq421065846

qq421065846

从七月中旬开始做混合app,到现在半个月过去了,一个简单的app已见雏形,期间也遇到过无数的坑,主要是熟悉和使用mui框架,h5+,以及调用原生api等,入坑已深,欢迎有兴趣加qq421065846一起讨论交流学习,爬坑。
...
0 赞 2017-08-01 15:18
幸福电子

幸福电子

讲的好呀!感动中国了!
0 赞 2017-07-28 17:46
落木萧萧

落木萧萧

我可能用了个假mui
0 赞 2017-07-05 09:54
2443294897@qq.com

2443294897@qq.com

正在学习
0 赞 2017-05-19 14:21
ganyu21@qq.com

ganyu21@qq.com

按这个写代码,基本是靠谱的 http://ask.dcloud.net.cn/article/25
0 赞 2017-05-01 11:52
wind78

wind78

请问mui作为插件能做到开发一套代码适用Android和iOS吗?
0 赞 2017-04-21 09:55
DCloud_MUI_CHB

DCloud_MUI_CHB 回复 mail@wangh.me

http://www.html5plus.org/doc/h5p.html
0 赞 2017-02-20 18:06
mail@wangh.me

mail@wangh.me

“其实是没去看plus的api”,这里的plus api是指什么,我再去看看,谢谢!
0 赞 2017-02-06 12:04
huzewang

huzewang

我把DEMO Hello MUI 安装在三星S6上,怎么不流畅呢?各位有没有这样的情况
0 赞 2016-12-29 11:55
魔法守护者

魔法守护者

目前来说,vue的优势大一点吧
0 赞 2016-12-09 11:13
xjdyf

xjdyf

能否和国内的MVVM测试一下,Avalon ,VUE
0 赞 2016-11-23 13:24
Turf

Turf

ipad2里面的谷歌浏览用选择器插件会有很严重的显示错位问题呢,希望官方注意一下
0 赞 2016-11-14 10:41
Wond

Wond

mui.min.js中没有包含picker、locker、poppicker等功能项吗?
0 赞 2016-09-14 17:07
123054@qq.com

123054@qq.com

Android 6的重大BUG何时解决?项目都快收尾发现有这么大一个坑,官方也不出来说句话。。。。
http://ask.dcloud.net.cn/question/18495
0 赞 2016-09-13 11:25
逗逼

逗逼

赞~
0 赞 2016-08-17 14:18
五的原理

五的原理

我只想说看中文的官方文档,真tem爽。
0 赞 2016-08-03 09:22
书痕

书痕

AngularJS的2.0版本快要发布了,据说是优先支持移动平台的,不过与1.x不怎么兼容,Angular粉要捶胸了...
0 赞 2016-06-21 17:04
tutuhuai

tutuhuai

我觉得适当的封装dom操作是必然的,程序需要重用,这样开发效率,以及程序性能方面我觉得不会降低,增加了mui的可用性
0 赞 2016-06-16 13:51
一休

一休

MUI支持响应式布局吗
0 赞 2016-06-03 16:14
1135629718@qq.com

1135629718@qq.com

非常好,准备使用
0 赞 2016-05-25 20:29
jojoku

jojoku

要是有个基础的小例子详细讲讲 很期待
0 赞 2016-05-17 16:38
786313565@qq.com

786313565@qq.com 回复 DCloud_heavensoft

还是希望调一下兼容性 毕竟 edge浏览器也不错 wp未来还是可观的
0 赞 2016-05-08 14:43
心然

心然


有人抱怨mui的文档不全,其实是缺本文,本文终于说清楚mui做什么不做什么了。详细的mui文档要去下方提示的mui官网查看。

有人抱怨mui api不全,其实是没去看plus的api。因为官方推荐的顺序是,先学5+,再学mui。倒过来就不太容易理解如何封装的了。

有人抱怨示例代码里写的mui的方法,为何文档里没有,是因为有些方法是工程师为了自己方便而写的,并没有进入mui的api,比如mui.alert,其实是plus.nativeUI.alert,在HBuilder里敲pna回车即可。


文档好不好,比了就知道。像 http://wiki.lbsyun.baidu.com/cms/androidsdk/doc/v3_7_3/ 的类参考有木有,记的好像有一天我在mui网还是h5+网看到过类参考,后来想想感觉可能是自己做梦了!
0 赞 2016-03-26 10:15
JUNYUAN

JUNYUAN 回复 背归鸿

你有学习资料? 我q 963918239
0 赞 2016-01-22 11:59
codingmud

codingmud 回复 hanxin

呵呵
0 赞 2016-01-13 19:00
_Pistol

_Pistol

太流弊了。
0 赞 2015-11-11 12:12
帝阙

帝阙

题主能否发几个mui生成的移动app案例呢。。。
0 赞 2015-10-22 14:26
Archer1942

Archer1942

之前先看的mui后看的5+,应该先看5+的
0 赞 2015-10-14 13:24
Archer1942

Archer1942

确实缺这个
0 赞 2015-10-14 13:23
AC米兰的小铁匠

AC米兰的小铁匠

干巴爹!
0 赞 2015-10-10 14:10
maq

maq 回复 DCloud_MUI_CHB

谢谢!果然很简单。另外我看到 document.querySelectorAll() 居然是原生支持的。我真是被 jq 惯坏了,基本的东西反倒不知道了。
1 赞 2015-09-20 17:11
DCloud_MUI_CHB

DCloud_MUI_CHB 回复 maq

简单的dom查找,可以直接使用mui(selector)的方法,参考:http://dev.dcloud.net.cn/mui/util/#selector ,一般css选择器支持的,都可以查找到
0 赞 2015-09-18 12:19
maq

maq

不错!文中对“不用jq”给出的理由确实很在理,但有一样,DOM 查找怎么办?自己引入 Sizzle 么?这方面想请教作者有没有什么建议?
0 赞 2015-09-17 22:34
DCloud_heavensoft

DCloud_heavensoft 回复 cj

若有问题,请单独在社区发贴,把具体的机型、rom版本、操作步骤反馈给我们。注意使用Hello mui的最新版测试。
0 赞 2015-09-17 07:01
cj

cj

说着很厉害,但是在实际使用中,低端机上还是有闪屏幕,转场卡顿的现象。。。。。。
1 赞 2015-09-05 18:41
newham

newham 回复 DCloud_MUI_CHB

免费你们还怎么发展呢?不赚钱怎么活,担心
0 赞 2015-08-27 17:31
DCloud_MUI_CHB

DCloud_MUI_CHB 回复 麦兜当当

永久免费
0 赞 2015-08-26 23:19
麦兜当当

麦兜当当

这个框架,是永久性免费的吗?企业是收费?
0 赞 2015-08-26 20:36
spaceLord

spaceLord

期待mui.js详细的API说明文档啊!!!!
0 赞 2015-08-17 19:56
迷你云

迷你云

迷你云准备使用MUI,你们的产品是现在最好的。
0 赞 2015-08-08 20:31
swl_0502

swl_0502

那么现在的mui能否完全脱离html5+独立存在呢?我看代码很多function在非os.plus的情况下是没有做处理的
0 赞 2015-08-06 13:13
Wcheng

Wcheng 回复 ThinkCMF

不错嘛
1 赞 2015-07-18 13:58
楚小秋

楚小秋 回复 DCloud_heavensoft

只怪webkit早前还没有支持标准,现在国内基于webkit的浏览器必须加webkit前缀,阻碍css3标准化发展,win10mobile反向兼容webkit也是无奈之举。作为前端开发者,还是希望早点去掉私有化前缀,实现标准化。期待DCloud的产品全面支持win10mobile那天。
0 赞 2015-06-24 11:59
通宵吃苹果

通宵吃苹果

默默点赞!
0 赞 2015-06-21 11:07
fanyang

fanyang

加来将来这个框架一定能比原生的好,要好好完善这个框架
0 赞 2015-05-05 22:36
刘半仙

刘半仙

很好很强大,大赞
0 赞 2015-05-05 17:10
DCloud_heavensoft

DCloud_heavensoft 回复 发哥0720

老wp占有率太低,新wp10换了新浏览器,直接支持webkit语法,等wp10出来后我们会再调兼容性。
2 赞 2015-04-22 02:02
妙妙

妙妙

我现在正在准备使用这套框架
0 赞 2015-04-14 11:54
发哥0720

发哥0720

呵呵,为什么不支持wp呢,为了技术的人员的那点清高
0 赞 2015-04-01 20:53
背归鸿

背归鸿

赞一个,正在学习,打算在下一个项目中使用
1 赞 2015-04-01 01:24
四季变幻

四季变幻

赞一个
0 赞 2015-03-29 16:11
hanxin

hanxin

说的很对,为什么要用jq呢?原生态js干90%的事儿足够了! 希望hb一直保持简洁,不要越做越重 呵呵
1 赞 2015-03-10 11:26
wind

wind

搭配的话,是不是5+和mui呢?
0 赞 2015-02-06 11:47
ThinkCMF

ThinkCMF 回复 完蛋

必须呀!thinkcmf x1.5.0已经内置
0 赞 2015-01-18 20:52
完蛋

完蛋 回复 ThinkCMF

要加入那就真赞了~~
0 赞 2015-01-12 12:17
林少

林少

好厉害
1 赞 2015-01-07 10:31
ThinkCMF

ThinkCMF

要很赞,ThinkCMF计划加入!
5 赞 2014-12-13 10:53
MUSICKING

MUSICKING

赞~
2 赞 2014-11-25 22:53

要回复文章请先登录注册