MUI应用介绍

一、MUI介绍 极小、极强、高性能、多端发布（编写一套代码，iOS、Android、浏览器、微信App、百度直达号、流应用全覆盖） 也是目前最接近原生App效果的框架。 二、新项目创建 1、下载安装HBuilder 飞速编码：http://www.dcloud.io/index.html 2、新建App项目 选择MUi项目模板 3、真机调试及运行 不管是iOS还是Android，不管是模拟器还是真机，都可以与HBuilder连接进行真机运行。以往开发App，需要改一个界面，然后打包，然后安装到手机上，然后进入那个界面，看看改对了没。没有的话循环这套动作，非常低效。有了真机运行，改了代码后保存，手机立即看到效果，如果在手机上运行时发生错误，那么日志和错误信息也都可以反馈到HBuilder控制台。 有些开发者喜欢alert大法，但事实上在HBuilder的js里敲clog，用打日志来调程序更好。 4、文件结构介绍 _ css 样式表文件夹 _ fonts 字体文件夹 _ js JavaScript脚本文件夹 _ index.html 入口文件 三、基础布局 1、头部

hello

2、主体部分

主体部分….

四、控件 1、折叠面板 可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，使用的就是折叠面板控件。 注意事项： 1、折叠面板布局必须在 mui-content下 2、外层使用 mui-card 包裹产生边缘 完整代码：

hello

• 面板1

  面板1子内容

2、按钮 普通按钮、带图标的按钮、带数字的按钮、块级按钮 默认蓝色绿色 3、操作表 actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover，故DOM结构和popove类似，只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类；

hello

• 菜单1
• 菜单2

• 取消

function showPop(){ 推荐使用锚点方式显示、隐藏actionsheet；若要使用js代码动态显示、隐藏actionsheet，同样在popover插件的构造方法中传入”toggle”参数即可，如下： //传入toggle参数，用户无需关心当前是显示还是隐藏状态，mui会自动识别处理； mui(‘#sheet1’).popover(‘toggle’); 4、数字角标 数 字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。 角标的核心类是.mui-badge，默认为实心灰色背景；同时，mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色 (red)、紫色(purple)五种色系的数字角标，如下： 1 2 3 4 5 6 若无需底色，则增加.mui-badge-inverted类即可，如下： 1 2 3 4 5 6 5、复选框 DOM结构：

checkbox示例

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

checkbox左侧显示示例

若要禁用checkbox，只需在checkbox上增加disabled属性即可； 6、单选框 DOM结构：

radio

默认radio在右侧显示，若希望在左侧显示，只需增加.mui-left类即可，如下：

radio

若要禁用radio，只需在radio上增加disabled属性即可； mui基于列表控件，提供了列表式单选实现；在列表根节点上增加.mui-table-view-radio类即可，若要默认选中某项，只需要在对应li节点上增加.mui-selected类即可，dom结构如下：

• Item 1
• Item 2
• Item 3

列表式单选在切换选中项时会触发selected事件，在事件参数（e.detail.el）中可以获得当前选中的dom节点，如下代码打印当前选中项的innerHTML： var list = document.querySelector(‘.mui-table-view.mui-table-view-radio’); list.addEventListener(‘selected’,function(e){ console.log(“当前选中的为：”+e.detail.el.innerText);}); js获取单选按钮的值 function getVals(){ var res = getRadioRes(‘rds’); if(res == null){mui.toast(‘请选择’); return;} mui.toast(res);}function getRadioRes(className){ var rdsObj = document.getElementsByClassName(className); var checkVal = null; for(i = 0; i