一、项目结构
MUI的项目结构我把它分为5部分，分别是资源引入，页眉，应用主体，隐藏部分，JS部分
1.资源引入
这部分就是对应框架的JS和CSS资源的引入，以及一些指令
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,
minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>页面名称</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
2.页眉
所谓页眉也就是应用的最上面的那一长条部分，通常用来标记页面信息。页眉应该写在<body>中哦
（在uniapp中这些都是写在配置文件里的，感觉上uniapp在这方面做的更好）
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">Hello World</h1>
</header>
3.页面主体
我们的页面主体需要一个专门的div包裹，也就是要展示给用户的内容应写在<div class="mui-content">中。这部分用于搭建页面的主体
4.隐藏部分
这部分内容是需要用户触发某些事件才能弹出的内容，需要放到<div class="mui-content">以外
5.JS部分
这里先不讲，因为在工程中JS通常是存放到专门的文件里的。
二、页面与事件管理
1.页面管理
（1）页面初始化
页面的初始化包括两部分，一部分是mui自身的插件初始化（mui.init()），另一部分是对html5+的原生插件的初始化mui .plusReady(function(){})。
mui.init()是异步加载的！！
因此在开发中，必须保证两者加载完毕。
（2）创建子页面
子页面也就是在一个页面中套上另一个页面，此时父页面仅作为提供一部分组件的作用
这里标题是由父页面提供的，而下面两个卡片则是由子页面提供的
代码如下（示例）：
<script type="text/javascript">
mui.init({
subpages:[{
url:'list.html', //子页面路径
id:'list.html', //子页面
styles:{
top:'45px',//mui标题栏默认高度为45px；
bottom:'0px'//默认为0px，可不定义；
}
}]});
</script>
（3）打开新页面
代码如下（示例）：
function openNew(){
mui.openWindow({
url:'list.html',
id:'list.html',
extras:{
key：value, //传递的参数
}
});
}
（4）预加载
预加载就是在用户尚未触发页面跳转的时候，事先将页面加载完成。
代码如下（示例）：
<script type="text/javascript" charset="utf-8">
mui.init({
//init是异步加载的
preloadPages:[
{
url:'list.html',
id:'list.html'
}
]
});
var list = plus.webview.getWebviewByid('list');//报错
console.log(list);
</script>
这里需要说明的是mui.init()是异步加载的，也就是说，如果在init方法后立即获取页面对象，是无法获取到的
2.事件管理
(1)添加事件监听
推荐在plusReady里添加事件监听，能确保所有元素都以加载完毕
这里还需要注意的是，对于tap这种手势事件，只有在真机调试的时候才能生效
代码如下（示例）：
mui.plusReady(function(){
document.getElementById('event_1').addEventListener('tap',function(){
mui.toast('触发');
});
});
(2)批量元素绑定
可以批量为元素绑定事件，如为<li>标签批量绑定事件
代码如下（示例）：
mui('#lists').on('tap','li',function(){
});
或
mui("#list").on("tap","li",f);
function f(){
}
(3)取消点击事件
代码如下（示例）：
mui("#lists").off("tap","li",方法名);
(4)事件自动触发
代码如下（示例）：
mui.trigger(btn,'tap');
对象，事件
三、Ajax
贴代码吧，Ajax也就这么回事的
function getAjax(){
mui.ajax('js/data.json',{
data:{
//参数
},
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
'Content-Type':'application/json'},
success:function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
// ...
console.log(data);
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
}