MUI是hbuilder集成的一个前端UI库，它是原生的。它里面的所有组件都是以m开头的。
快速构建页面
-
新建含mui的HTML文件
在Hbuilder中，新建移动App项目，选择”含mui的HTML“模板，可以快速生成mui页面模板，该模板默认处理了mui的js、css资源引用。 -
输入mheader
顶部标题栏是每个页面都必需的内容，在Hbuilder中输入mheader，可以快速生成顶部导航栏。
图片.png
-
输入mtab
就可以快速生成底部tab，并且连iconfont都有。
图片.png
-
输入mbody
会生成一个类名为mui-content的div。除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内。
MUI的基本使用（语法和jQuery一样）
-
mui可以作为选择器使用，里面的事件属于原生事件。
1） 此方法属于nav的点击事件。
图片.png
2） 此方法能获取到点击tab时候里面的标题内容，例：首页，电话，邮件，设置，并把当前的标题切换。
图片.png
MUI窗口管理-双webView的模式
原理：一层一层的子页面叠加构成一个完整的页面。
-
header和nav属于一个webView，还有多个webView作为body部分，两层webView叠加起来构成一个页面，当点击nav切换的时候，对中间body的部分进行修改。（create方法和show方法配合使用）
图片.png
-
父子页面的跳转及传参，openWindow。
父传参：extras：｛key：value｝
图片.png
子接收：currentWebview().title
图片.png
MUI-AJAX
mui-ajax
ajax请求到的数据console是[object]，使用vue进行处理：创建vue实例进行使用。
创建了vue实力以后，就可以使用vue的data、methods、传参。
<body>
<div class="mui-content">
<ul class="mui-table-view">
<li v-for="item in list" class="mui-table-view-cell mui-media">
<a href="javascript:;" @tap="openDetail(item.id, item.title, item.body)">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
{{item.title}}
<p class="mui-ellipsis">{{item.body}}</p>
</div>
</a>
</li>
</ul>
</div>
<script src="../libs/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 创建vue实例
const vm = new Vue({
el: '.mui-content',
data: {
list: []
},
methods: {
openDetail (itemid, title, desc) {
mui.openWindow({
url: '/pages/pageChilds/detail.html',
extras: {
itemid,
title,
desc
}
})
}
}
})
// mui-ajax
mui.ajax('http://jsonplaceholder.typicode.com/posts',{
success:function(resp){
vm.list = resp
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
</script>
</body>
MUI上拉与下拉操作
- 下拉刷新
DOM结构无特殊要求，只需要指定一个下拉刷新容器标识即可 ：pullRefresh -
上拉加载更多
html：
图片.png
容器：
图片.png
代码如下：
<body>
<div class="mui-content">
<!--在刷新区域再加一层 <div id="listContainer"> 是为了解决'正在加载'跑到顶部的问题-->
<!--使用vue来渲染的时候，要注意，滚动容器一定要在循环体的最外层-->
<div id="listContainer">
<ul class="mui-table-view">
<li v-for="item in list" class="mui-table-view-cell mui-media">
<a href="javascript:;" @tap="openDetail(item.id, item.title, item.body)">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
{{item.title}}
<p class="mui-ellipsis">{{item.body}}</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../libs/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const refresh = ()=> {
// mui-ajax
mui.ajax('http://jsonplaceholder.typicode.com/posts',{
success:function(resp){
vm.list = resp;
mui('#listContainer').pullRefresh().endPulldown();
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
mui('#listContainer').pullRefresh().endPulldown();
}
});
};
const loadMore = ()=> {
// mui-ajax
mui.ajax('http://jsonplaceholder.typicode.com/posts',{
success:function(resp){
vm.list = vm.list.concat(resp);
mui('#listContainer').pullRefresh().endPulldown();
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
mui('#listContainer').pullRefresh().endPulldown();
}
});
}
mui.init({
pullRefresh : {
container:"#listContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
down : {
style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
height:'50px',//可选,默认50px.下拉刷新控件的高度,
range:'100px', //可选 默认100px,控件可下拉拖拽的范围
offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
auto: true,//可选,默认false.首次加载自动上拉刷新一次
callback :refresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
},
up : {
height:50,//可选.默认50.触发上拉加载拖动距离
auto:true,//可选,默认false.自动上拉加载一次
contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback :loadMore //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
}
}
});
// 创建vue实例
const vm = new Vue({
el: '.mui-content',
data: {
list: []
},
methods: {
openDetail (itemid, title, desc) {
mui.openWindow({
url: '/pages/pageChilds/detail.html',
extras: {
itemid,
title,
desc
}
})
}
}
})
</script>
</body>
MUI与VUE的配合使用
-
在mui里面使用vue
下载vue.js文件，在需要用到vue的页面引入(<script src="../libs/vue.js" type="text/javascript" charset="utf-8"></script>)。
创建vue实例，就可以使用vue了。
图片.png
-
在vue里使用mui
单独引入mui的css就可以使用mui的样式了。
MUI的缺点
-
header和nav的css使用的是固定定位。padding：44px 0 50px；（上 左右 下）。
-
mui使用了h5+的webView，但是要使用h5+的api，要在plusReady里面调用，而plusReady的console不能在浏览器打印（因为是原生的），必须在hbuilder的真机运行模式（真机运行或模拟器运行），才能在builder的控制台打印日志。
图片.png
-
如果console打印的是一个对象或数组，它不能显示对象或数组的内容。打印的是 [object object]，不方便调试。
图片.png
1）将ajax请求回来的数据打印出具体数据？解决办法，使用vue
图片.png
将vue.js里面的内容全部存储到mui项目中，引入vue，创建vue实例。
图片.png
附：mui_dome
