MUI基础学习----介绍及开发注意事项-摩杜云开发者社区

一、MUI框架介绍

MUI（MobileUser Interface）是一套基于HTML5的，遵循html5+规范的，中国团队开发的，开源的，用于手机端界面开发的一套框架。 mui框架是一个可以方便开发出高性能App的框架，也是目前最接近原生App效果的框架。目前，MUI是基于H5的最方便的App开发框架之一。

MUI框架由DCLOUD公司研发而成，提供大量H5和js语言组成的组件，大大提高了开发效率，可以用于开发web端应用、web APP、混合开发等应用。利用MUI框架，用户在使用APP时可以得到接近原生APP的操作体验。

MUI框架具有以下特点：

轻量级：MUI框架是一套轻量级的框架，不会给应用带来过多的负担。
跨平台：MUI框架支持多种平台，包括iOS、Android等主流移动操作系统。
易扩展：MUI框架提供丰富的API和组件，可以方便地进行扩展和定制。
高性能：MUI框架经过优化，可以提供高性能的渲染和交互体验。
开源：MUI框架是开源的，开发者可以自由地使用和修改代码。

二、MUI开发注意事项

首先先解释一下HTML5的DOM结构：

DOM结构是一种将HTML文档转化为树形结构的模型，它将HTML文档中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。在DOM结构中，每个HTML元素都可以被视为一个节点，整个文档被视为一个文档节点，而HTML元素中的文本被视为文本节点，每个HTML属性被视为属性节点，注释则被视为注释节点。DOM结构的建立方便了使用JavaScript等脚本语言动态地访问、更新文档的内容、样式和结构。

1、页面布局规则：

（1）固定栏靠前

所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；

（2）一切内容都要包裹在mui-content中

除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：

.mui-bar-nav ~ .mui-content {  
        padding-top: 44px;  
    }  
    .mui-bar-footer ~ .mui-content {  
        padding-bottom: 44px;  
    }  
    .mui-bar-tab ~ .mui-content {  
        padding-bottom: 50px;  
    }

你当然可以通过自定义CSS的方式实现如上类似效果，但为了使用简便，建议将除固定栏之外的所有内容，全部放在.mui-content中。

（3）始终为button按钮添加type属性

若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。

2、窗口管理

（1）页面初始化：必须执行mui.init方法

mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；

（2）页面跳转：抛弃href跳转

当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验障碍；为解决这个问题，建议使用mui.openWindow打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面；
扩展阅读：

（3）页面关闭：勿重复监听backbutton

mui框架自动封装了页面关闭逻辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，切勿简单通过addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装的监听执行逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。

3、手势操作

（1）点击：忘记click

mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick操作，统统使用如下代码：

element.addEventListener('tap',function(){  
        //点击响应逻辑  
    });