MUI是什么？

最接近原生APP体验的高性能前端框架。

相比同类框架的优势？

性能和体验的差距，一直是mobile app开发者放弃HTML5的首要原因。
浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题，这些都让HTML5开发者倍感挫败，尤其拿到Android低端机运行，摔手机的心都有；
浏览器默认控件样式又少又丑，制作一个漂亮的控件非常麻烦，也有一些制作简单的ui框架但性能低下。
mui框架有效的解决了这些问题，这是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。

如何使用？

本次我们以一个简单的例子来进行说明，简单看一下MUI的使用。

1、登录官网下载组件包

2、将组件包加入到项目中

3、引用组件中的相关文件。

4、添加简单代码实现功能。

DEMO

1、首先简述一下下载组件的方式，因为我找起来确实花了不少的时间

a、登录官网

b、点击如下图片处

c、点击code，如下图片

d、点击下载

e、下载压缩包即可

到现在，下载已经没有问题了，我看正式开始例子。

1、打开压缩包将dist文件夹中的内容直接添加到项目中。

2、在head标签中引入如下文件

                <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><!--标准mui.css--><link rel="stylesheet" href="../css/mui.min.css">

3、在body标签中写如下内容

               <header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">单选框（radio）</h1></header><div class="mui-content"><h5 class="mui-content-padded">图标左对齐</h5><div class="mui-card"><form class="mui-input-group"><div class="mui-input-row mui-radio mui-left"><label>radio</label><input name="radio1" type="radio"></div><div class="mui-input-row mui-radio mui-left"><label>radio</label><input name="radio1" type="radio" checked></div><div class="mui-input-row mui-radio mui-left mui-disabled"><label>disabled radio</label><input name="radio1" type="radio" disabled="disabled"></div></form></div><h5 class="mui-content-padded">图标右对齐</h5><div class="mui-card"><form class="mui-input-group"><div class="mui-input-row mui-radio"><label>radio</label><input name="radio1" type="radio"></div><div class="mui-input-row mui-radio"><label>radio</label><input name="radio1" type="radio" checked></div><div class="mui-input-row mui-radio mui-disabled"><label>disabled radio</label><input name="radio1" type="radio" disabled="disabled"></div></form></div><h5 class="mui-content-padded">列表模式的单选框</h5><ul class="mui-table-view mui-table-view-radio"><li class="mui-table-view-cell"><a class="mui-navigate-right">Item 1</a></li><li class="mui-table-view-cell mui-selected"><a class="mui-navigate-right">Item 2</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">Item 3</a></li></ul><div class="mui-content-padded"><p id="info"></p></div></div>

4、js的内容如下：

     <script src="../js/mui.min.js"></script><script>mui.init({swipeBack:true //启用右滑关闭功能});var info = document.getElementById("info");document.querySelector('.mui-table-view.mui-table-view-radio').addEventListener('selected',function(e){info.innerHTML = "当前选中的为："+e.detail.el.innerText;});</script>

5、下过预览如下