mui框架学习
MUI背景介绍
MUI是一套前端框架,由DCLOUD公司研发而成,提供大量H5和js语言组成的组件,大大提高了开发效率,可以用于开发web端应用、web app等应用。
MUI API简介
窗口方面api
关闭页面
- 点击包含.mui-action-back类的控件
- 在屏幕内,向右快速滑动
- Android手机按下back按键
//第一种方式
<button type="button" class='mui-btn mui-btn-danger mui-action-back'>关闭</button>
//第二种方式 默认没有启动,如需启动如下
mui.init({
swipeBack:true //启用右滑关闭功能
});
除了如上三种操作外,也可以直接调用mui.back()方法,执行窗口关闭逻辑;
mui.back()仅处理窗口逻辑,若希望在窗口关闭之前再处理一些其它业务逻辑,则可将业务逻辑抽象成一个具体函数,然后注册为mui.init方法的beforeback参数;beforeback的执行逻辑为:
- 执行beforeback参数对应的函数若返回false,则不再执行mui.back()方法;
- 否则(返回true或无返回值),继续执行mui.back()方法;
示例:
mui.init({
beforeback: function(){
//获得列表界面的webview
var list = plus.webview.getWebviewById('list');
//触发列表界面的自定义事件(refresh),从而进行数据刷新
mui.fire(list,'refresh');
//返回true,继续页面关闭逻辑
return true;
}
});
预加载
所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验。mui提供两种方式实现页面预加载。
方式一:通过mui.init方法中的preloadPages参数进行配置
mui.init({
preloadPages:[
{
url:prelaod-page-url,
id:preload-page-id,
styles:{},//窗口参数
extras:{},//自定义扩展参数
subpages:[{},{}]//预加载页面的子页面
}
],
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
});
该种方案使用简单、可预加载多个页面,但不会返回预加载每个页面的引用,若要获得对应webview引用,还需要通过plus.webview.getWebviewById方式获得;另外,因为mui.init是异步执行,执行完mui.init方法后立即获得对应webview引用,可能会失败,
方式二:通过mui.preload方法预加载
var page = mui.preload({
url:new-page-url,
id:new-page-id,//默认使用当前页面的url作为id
styles:{},//窗口参数
extras:{}//自定义扩展参数
});
通过mui.preload()方法预加载,可立即返回对应webview的引用,但一次仅能预加载一个页面;若需加载多个webview,则需多次调用mui.preload()方法;
事件管理
事件绑定
- document找寻id方式绑定 --- document.getElementById("id").onclick(function());
- 添加事件回调 --- elementObject.addEventListener(eventName,handle,useCapture);
- 使用mui框架进行事件绑定
使用.on()方法实现批量元素的事件绑定,方法介绍:
![](http://upload-images.jianshu.io/upload_images/4442190-ee3afa4b31b3ccf7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
示例
mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
//获取id
var id = this.getAttribute("id");
//传值给详情页面,通知加载新数据
mui.fire(detail,'getDetail',{id:id});
//打开新闻详情
mui.openWindow({
id:'detail',
url:'detail.html'
});
})
事件取消
取消绑定,则可以使用off()方法。 off()方法根据传入参数的不同,有不同的实现逻辑。
![](http://upload-images.jianshu.io/upload_images/4442190-6b0bb2f84d13e899.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
事件触发
使用mui.trigger()方法可以动态触发特定DOM元素上的事件。
![](http://upload-images.jianshu.io/upload_images/4442190-98410616a98d5a5b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
触发自定义事件
可以进行一些网页的跳转,mui.fire()
![](http://upload-images.jianshu.io/upload_images/4442190-95e90f3ec230994c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
手势事件
移动端开发时,会有一些手势事件,点击tap,双击doubletap等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,目前支持的手势事件见如下列表:
分类 | 参数 | 描述 |
---|---|---|
点击 | tap | 单机屏幕 |
点击 | doubletap | 双击屏幕 |
长按 | longtap | 长按屏幕 |
长按 | hold | 按住屏幕 |
长按 | release | 离开屏幕 |
滑动 | swipeleft | 向左滑动 |
滑动 | swiperight | 向右滑动 |
滑动 | swipeup | 向上滑动 |
滑动 | swipedown | 向下滑动 |
拖动 | dragstart | 开始拖动 |
拖动 | drag | 拖动 |
拖动 | dragend | 结束拖动 |
监听上述动作
mui框架默认会监听部分手势动作,如果需要监听你想要的动作,需要在初始化配置动作,mui.init的gestureConfig参数,如下代码:
mui.init({
gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:false,//默认为false,不监听
release:false//默认为false,不监听
}
});
注意:dragstart、drag、dragend共用drag开关,swipeleft、swiperight、swipeup、swipedown共用swipe开关
事件管理总结
- 单个元素上的事件监听,建议使用addEventListener(),如elem.addEventListener("swipeleft",function()}
- 多个元素上的事件监听,建议使用mui.on事件进行绑定
从上面的api都会或多或少的了解部分mui提供的js函数,如mui.init(),但是只是了解函数的部分参数,下面将具体介绍下面一些函数的配置参数及功能
mui.init()
直接上代码,浅显易懂
mui.init({
//子页面
subpages: [{
//...
}],
//预加载
preloadPages:[
//...
],
//下拉刷新、上拉加载
pullRefresh : {
//...
},
//手势配置
gestureConfig:{
//...
},
//侧滑关闭
swipeBack:true, //Boolean(默认false)启用右滑关闭功能
//监听Android手机的back、menu按键
keyEventBind: {
backbutton: false, //Boolean(默认true)关闭back按键监听
menubutton: false //Boolean(默认true)关闭menu按键监听
},
//处理窗口关闭前的业务
beforeback: function() {
//... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看
},
//设置状态栏颜色
statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
})
mui()
mui使用css选择器获取HTML元素,返回mui对象数组。
mui("p"):选取所有
元素
mui("p.title"):选取所有包含.title类的
元素
若要将mui对象转化成dom对象,可使用如下方法(类似jquery对象转成dom对象):
//obj1是mui对象
var obj1 = mui("#title");
//obj2是dom对象
var obj2 = obj1[0];
each()
each既是一个类方法,同时也是一个对象方法,两个方法适用场景不同;换言之,你可以使用mui.each()去遍历数组或json对象,也可以使用mui(selector).each()去遍历DOM结构。
![](http://upload-images.jianshu.io/upload_images/4442190-5f6364a44d2cee0f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
each遍历数组
var array = [1,2,3]
mui.each(array,function(index,item){
console.log(item*item);
})
each遍历HTML输入标签
<div class="mui-input-group">
<div class="mui-input-row">
<label>字段1:</label>
<input type="text" class="mui-input-clear" id="col1" placeholder="请输入">
</div>
<div class="mui-input-row">
<label>字段2:</label>
<input type="text" class="mui-input-clear" id="col2" placeholder="请输入">
</div>
<div class="mui-input-row">
<label>字段3:</label>
<input type="text" class="mui-input-clear" id="col3" placeholder="请输入">
</div>
</div>
提交时校验三个字段均不能为空,若为空则提醒并终止业务逻辑运行,使用each()方法循环校验,如下:
var check = true;
mui(".mui-input-group input").each(function () {
//若当前input为空,则alert提醒
if(!this.value||trim(this.value)==""){
var label = this.previousElementSibling;
mui.alert(label.innerText+"不允许为空");
check = false;
return false;
}
});
//校验通过,继续执行业务逻辑
if(check){
//.....
}
extend()
将两个对象合并成一个对象
extend示例
![](http://upload-images.jianshu.io/upload_images/4442190-05ac21583a4bf0c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
var target = {
company:"dcloud",
product:{
mui:"小巧、高效"
}
}
var obj1 = {
city:"beijing",
product:{
HBuilder:"飞一样的编码"
}
}
mui.extend(target,obj1);
//输出:{"company":"dcloud","product":{"HBuilder":"飞一样的编码"},"city":"beijing"}
console.log(JSON.stringify(target));
extend()深度合并
var target = {
company:"dcloud",
product:{
mui:"小巧、高效"
}
}
var obj1 = {
city:"beijing",
product:{
HBuilder:"飞一样的编码"
}
}
//支持深度合并
mui.extend(true,target,obj1);
//输出:{"company":"dcloud","product":{"mui":"小巧、高效","HBuilder":"飞一样的编码"},"city":"beijing"}
console.log(JSON.stringify(target));
OS
我们经常会有通过navigator.userAgent判断当前运行环境的需求,mui对此进行了封装,通过调用mui.os.XXX即可
![](http://upload-images.jianshu.io/upload_images/4442190-e922eb1906d70b75.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
plus
mui提供的plus可以很方便的访问系统的原声东西,如手机devices,还有webview等
mui网络访问
mui框架基于htm5plus的XMLHttpRequest,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型; 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。
简单用法
> mui.ajax( url [,settings] )
url:请求发送的目标地址
settings:key/value格式的json对象,用来配置ajax请求参数,支持的参数如下:
data:发送到服务器的业务数据;
type:请求方式,目前仅支持'GET'和'POST',默认为'GET'方式;
dataType:预期服务器返回的数据类型;如果不指定,mui将自动根据HTTP包的MIME头信息自动判断;
支持设置的dataType可选值:
"xml": 返回XML文档
"html": 返回纯文本HTML信息;
"script": 返回纯文本JavaScript代码
"json": 返回JSON数据
"text": 返回纯文本字符串
success:Type: Functon(Anything data,String textStatus,XMLHttpRequest xhr)
请求成功时触发的回调函数,该函数接收三个参数:
data:服务器返回的响应数据,类型可以是json对象、xml对象、字符串等;
textStatus:状态描述,默认值为'success'
xhr:xhr实例对象
error:Type: Functon(XMLHttpRequest xhr,String type,String errorThrown)请求失败时触发的回调函数;
该函数接收三个参数:
xhr:xhr实例对象
type:错误描述,可取值:"timeout", "error", "abort", "parsererror"、"null"
errorThrown:可捕获的异常对象
timeout:Type: Number,请求超时时间(毫秒),默认值为0,表示永不超时;若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调;
headers:Type: Object,格式为:{'Content-Type':'application/json'},
mui.ajax(url,{
data:{
username:'username',
password:'password'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
success:function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
mui.post( url [,data] [,success] [,dataType] )
mui.post()方法是对mui.ajax()的一个简化方法,直接使用POST请求方式向服务器发送数据、且不处理timeout和异常(若需处理异常及超时,请使用mui.ajax()方法)
mui.post('http://server-name/login.php',{
username:'username',
password:'password'
},function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
...
},'json'
);
> mui.get( url [,data] [,success] [,dataType] )
mui.get()方法和mui.post()方法类似,只不过是直接使用GET请求方式向服务器发送数据、且不处理timeout和异常(若需处理异常及超时,请使用mui.ajax()方法)。如下为获得某服务器新闻列表的代码片段,服务器以json格式返回数据列表:
mui.get('http://server-name/list.php',
{category:'news'},
function(data){
//获得服务器响应
...
},'json'
);
> mui.getJSON( url [,data] [,success] )
mui.getJSON()方法是在mui.get()方法基础上的更进一步简化,限定返回json格式的数据,其它参数和mui.get()方法一致,如上获得新闻列表的代码换成mui.getJSON()方法后,更为简洁,如下:
mui.getJSON('http://server-name/list.php',
{category:'news'},
function(data){
//获得服务器响应
...
}
);
mui组件
除上面的api之外,mui还提供了很多封装好的html组件,使用非常简单,在Hbuilder ide里面只需要敲m就会显示出支持的组件,使用非常方便,这里就不具体介绍使用方法了,如需了解详情,请点击一下链接访问
作者:jackzhouyu
链接:http://www.jianshu.com/p/90211087d875
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。