关于MUI⼀个很实⽤的前端框架
我是先把他的基本能实现的功能先做了⼀个简单的了解。下⾯⼤家跟着我看：
⼀、Mui的组件
mui的组件都很原⽣⽐如拓展阅读，操作表，折叠⾯板，你需要那个组件就把那个组件拷贝下来，例如你需要折叠⾯板
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse">
<a class="mui-navigate-right" href="#">⾯板1</a>
<div class="mui-collapse-content">
<p>⾯板1⼦内容</p>
</div>
</li>
</ul>
还有单选框，轮播图，数字⾓标，消息框，卡⽚视图，透明状态栏，右滑，左滑，等等组件，再将你想要使⽤的模板复制下来，粘贴到你想要想放进去的地⽅即可。
⼆、MUI的窗⼝
MUI的窗⼝包括页⾯的初始化，创建⼦页⾯，打开新页⾯，打开带原声带导航栏的新页⾯，关闭页⾯，预加载等。
不管你是打⼀个新页⾯还是创建⼀个新页⾯它⾥⾯都会夹杂着你想要的动画效果，⽐如下拉刷新，下拉刷新打开⼀个新页⾯。
下⾯拿着页⾯初始化来举⼀个例⼦：
在app开发中，若要使⽤，必须等plusready事件发⽣后才能正常使⽤，mui将该事件封装成了mui.plusReady()⽅法，涉及到HTML5+的api，建议都写在mui.plusReady⽅法中。如下为打印当前页⾯URL的⽰例：mui.plusReady(function(){
console.log("当前页⾯URL："+plus.webview.currentWebview().getURL());
});
扩展阅读
mui插件初始化
当DOM准备就绪时，指定⼀个函数来执⾏。
创建⼦页⾯
在mobile app开发过程中，经常会出现共⽤的导航栏或者选项卡，每次打开页⾯都需要重新渲染，⽽且容易出现卡头卡尾的现象。并且此时若使⽤局部滚动，在android⼿机上会
出现滚动不流畅的问题；
mui现在提供两种解决⽅案:
第⼀种（官⽅推荐）：在plus环境下，使⽤原⽣titleNView以及原⽣tabbar来替换页⾯的导航栏或者选项卡。在页⾯打开时，渲染已经完成，让你的应⽤更接近原⽣app。具体做
法：原⽣titleNView参考mui.openWindow的，原⽣tabbar⽰例参考
第⼆种：通过双webview模式解决，此种情况适⽤于需要上下拉刷新的列表页⾯。将需要滚动的区域通过单独的webview实现，完全使⽤原⽣滚动。
具体做法则是：将⽬标页⾯分解为主页⾯和内容页⾯，主页⾯显⽰卡头卡尾区域，⽐如顶部导航、底部选项卡等；内容页⾯显⽰具体需要滚动的内容，然后在主页⾯中调⽤
mui.init⽅法初始化内容页⾯。
mui.init({
subpages:[{
url:your-subpage-url,//⼦页⾯HTML地址，⽀持本地地址和⽹络地址
id:your-subpage-id,//⼦页⾯标志
styles:{
top:subpage-top-position,//⼦页⾯顶部位置
bottom:subpage-bottom-position,//⼦页⾯底部位置
width:subpage-width,//⼦页⾯宽度，默认为100%
height:subpage-height,//⼦页⾯⾼度，默认为100%
......
},
extras:{}//额外扩展参数
}]
});
参数说明：styles表⽰窗⼝属性，参考；特别注意，height和width两个属性，即使不设置，也默认按100%计算；因此若设置了top值为⾮"0px"的情况，
建议同时设置bottom值，否则5+ runtime根据⾼度100%计算，可能会造成页⾯真实底部位置超出屏幕范围的情况；left、right同理。
做web app，⼀个⽆法避开的问题就是转场动画；web是基于链接构建的，从⼀个页⾯点击链接跳转到
另⼀个页⾯，如果通过有刷新的打开⽅式，⽤户要⾯对⼀个空⽩的页⾯等
待；如果通过⽆刷新的⽅式，⽤Javascript移⼊DOM节点（常见的SPA解决⽅案），会碰到很⾼的性能挑战：DOM节点繁多，页⾯太⼤，转场动画不流畅甚⾄导致浏览器崩溃；
mui的解决思路是：单webview只承载单个页⾯的dom，减少dom层级及页⾯⼤⼩；页⾯切换使⽤原⽣动画，将最耗性能的部分交给原⽣实现.
mui.openWindow({
url:new-page-url,
id:new-page-id,
styles:{
top:newpage-top-position,//新页⾯顶部位置
bottom:newage-bottom-position,//新页⾯底部位置
width:newpage-width,//新页⾯宽度，默认为100%
height:newpage-height,//新页⾯⾼度，默认为100%
......
},
extras:{
.....//⾃定义扩展参数，可以⽤来处理页⾯间传值
},
createNew:false,//是否重复创建同样id的webview，默认为false：不重复创建，直接显⽰
show:{
autoShow:true,//页⾯loaded事件发⽣后⾃动显⽰，默认为true
aniShow:animationType,//页⾯显⽰动画，默认为”slide-in-right“；
duration:animationTime//页⾯动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
},
waiting:{
autoShow:true,//⾃动显⽰等待框，默认为true
title:'正在加载...',//等待对话框上显⽰的提⽰内容
options:{
width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容⾃动计算合适宽度
height:waiting-dialog-height,//等待框背景区域⾼度，默认根据内容⾃动计算合适⾼度
......
}
参数：
styles
窗⼝参数，参考；特别注意，height和width两个属性，即使不设置，也默认按100%计算；因此若设置了top值为⾮"0px"的情况，建议同时设置bottom值，否则5+ runtime根据⾼度100%计算，可能会造成页⾯真实底部位置超出屏幕范围的情况；left、right同理。
extras
新窗⼝的额外扩展参数，可⽤来处理页⾯间传值；例如：
var webview = mui.openWindow({
url:'info.html',
extras:{
name:'mui'  //扩展参数
}
});
console.log(webview.name);//输出mui字
注意：扩展参数仅在打开新窗⼝时有效，若⽬标窗⼝为预加载页⾯，则通过mui.openWindow⽅法打开时传递的extras参数⽆效。
createNew
是否重复创建相同id的webview；
为优化性能、避免app中重复创建webview，mui v1.7.0开始增加createNew参数，默认为false；判断逻辑如下：
createNew参数为为true，则不判断重复，每次都新建webview；
createNew参数为为fasle，则先查当前App中是否已存在同样id的webview，若存在则直接显⽰；否则新创建并根据show参数执⾏显⽰逻辑；
注意：plusReady事件仅在webview⾸次创建时触发，使⽤mui.openWindow⽅法多次打开已存在的同样id的webview时，是不会重复触发plusReady事件的；因此若业务写在plusReady事件中，可能会出现执⾏结果和预期不⼀致的情况；此时可通过触发；案例参考：;
show
窗⼝显⽰控制参数，具体参数如下：
autoShow：⽬标窗⼝loaded事件发⽣后，是否⾃动显⽰，默认为true；若为false，则仅创建但不显⽰webview；若⽬标页⾯为预加载页⾯，则该参数⽆效；
aniShow表⽰页⾯显⽰动画，⽐如从右侧划⼊、从下侧划⼊等，具体可参考
duration：显⽰Webview窗⼝动画的持续时间，单位为ms
waiting
系统等待框参数
mui框架在打开新页⾯时等待框的处理逻辑为：
显⽰等待框-->创建⽬标页⾯webview-->⽬标页⾯loaded事件发⽣-->关闭等待框；
因此，只有当新页⾯为新创建页⾯（webview）时，会显⽰等待框，否则若为预加载好的页⾯，则直接显⽰⽬标页⾯，不会显⽰等待框。waiting中的具体参数：
autoShow：是否⾃动显⽰等待框，默认为true；若为false，则不显⽰等待框；注意：若waiting框的au
toShow为true，但⽬标页⾯不⾃动显⽰，则需在⽬标页⾯中通过如下代码关闭等待框：plus.nativeUI.closeWaiting();
title：等待框上的提⽰⽂字
options表⽰等待框显⽰参数，⽐如宽⾼、背景⾊、提⽰⽂字颜⾊等，具体可参考
⽰例1：Hello mui中，点击⾸页右上⾓的图标，会打开关于页⾯，实现代码如下：
//tap为mui封装的单击事件，可参考⼿势事件章节
//打开关于页⾯
mui.openWindow({
url: 'examples/info.html',
id:'info'
});
})
因没有传⼊styles参数，故默认全屏显⽰；也没有传⼊show参数，故使⽤slide-in-right动画，新页⾯从右侧滑⼊。
⽰例2：从A页⾯打开B页⾯，B页⾯为⼀个需要从服务端加载的列表页⾯，若在B页⾯loaded事件发⽣时就将其显⽰出来，因服务器数据尚未加载完毕，
列表页⾯为空，⽤户体验不好；可通过如下⽅式改善⽤户体验（最好的⽤户体验应该是通过的⽅式）：第⼀步，B页⾯loaded事件发⽣后，不⾃动显⽰；
//A页⾯中打开B页⾯，设置show的autoShow为false，则B页⾯在其loaded事件发⽣后，不会⾃动显⽰；
mui.openWindow({
url: 'B.html',
show:{
autoShow:false
}
});
第⼆步，在B页⾯获取列表数据后，再关闭等待框、显⽰B页⾯
//B页⾯onload从服务器获取列表数据；
//从服务器获取数据
....
//业务数据获取完毕，并已插⼊当前页⾯DOM；
//注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后；
mui.plusReady(function(){
//关闭等待框
plus.nativeUI.closeWaiting();
//显⽰当前页⾯
mui.currentWebview.show();
});
}
三、MUI的事件
mui的事件包括事件绑定，事件取消，事件触发，⼿势事件。⾃定义事件。
除了可以使⽤addEventListener()⽅法监听某个特定元素上的事件外，也可以使⽤.on()⽅法实现批量元素的事件绑定。
.on( event , selector , handler )
event
Type:
需监听的事件名称，例如：'tap'
selector
Type:
选择器
handler
Type: (  event )
事件触发时的回调函数，通过回调中的event参数可以获得事件详情
⽰例
点击新闻列表，获取当前列表项的id，并将该id传给新闻详情页⾯，然后打开新闻详情页⾯
mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
//获取id
var id = Attribute("id");
//传值给详情页⾯，通知加载新数据
mui.fire(detail,'getDetail',{id:id});
//打开新闻详情
mui.openWindow({
id:'detail',
url:'detail.html'
});
})
使⽤on()⽅法绑定事件后，若希望取消绑定，则可以使⽤off()⽅法。off()⽅法根据传⼊参数的不同，有不同的实现逻辑。
version added: 2.0.0.off( event , selector , handler )
event
Type:
需取消绑定的事件名称，例如：'tap'
selector
Type:
选择器
handler
Type:
之前绑定到该元素上的事件函数，不⽀持匿名函数
version added: 2.0.0.off( event , selector)
event
Type:
需取消绑定的事件名称，例如：'tap'
selector
Type:
选择器
version added: 2.2.0.off( event )
event
Type:
需取消绑定的事件名称，例如：'tap'
version added: 2.2.0.off( )
空参数，删除该元素上所有事件
⽰例前端页面模板
off(event,selector,handle)适⽤于取消对应选择器上特定事件所执⾏的特定回调，例如：
//点击li时，执⾏foo_1函数
mui("#list").on("tap","li",foo_1);
//点击li时，执⾏foo_2函数
mui("#list").on("tap","li",foo_2);
function foo_1(){
console.log("foo_1 execute");
}
function foo_2(){
console.log("foo_2 execute");
}
//点击li时，不再执⾏foo_1函数，但会继续执⾏foo_2函数
mui("#list").off("tap","li",foo_1);
off(event,selector)适⽤于取消对应选择器上特定事件的所有回调，例如：
//点击li时，执⾏foo_1函数
mui("#list").on("tap","li",foo_1);
//点击li时，执⾏foo_2函数
mui("#list").on("tap","li",foo_2);
function foo_1(){
console.log("foo_1 execute");
function foo_2(){
console.log("foo_2 execute");
}
//点击li时，foo_2、foo_2两个函数均不再执⾏
mui("#list").off("tap","li");
off(event)适⽤于取消当前元素上绑定的特定事件的所有回调，例如：
//点击li时，执⾏foo_1函数
mui("#list").on("tap","li",foo_1);
//点击p时，执⾏foo_3函数
mui("#list").on("tap","p",foo_3);
function foo_1(){
console.log("foo_1 execute");
}
function foo_3(){
console.log("foo_3 execute");
}
//点击li时，不再执⾏foo_1函数；点击p时，也不再执⾏foo_3函数
mui("#list"
off()适⽤于取消当前元素上绑定的所有事件回调，例如：
//点击li时，执⾏foo_1函数
mui("#list").on("tap","li",foo_1);
//双击li时，执⾏foo_4函数
mui("#list").on("doubletap","li",foo_4);
/
/点击p时，执⾏foo_3函数
mui("#list").on("tap","p",foo_3);
function foo_1(){
console.log("foo_1 execute");
}
function foo_3(){
console.log("foo_3 execute");
}
function foo_4(){
console.log("foo_4 execute");
}
/
/点击li时，不再执⾏foo_1函数；点击p时，也不再执⾏foo_3函数；双击li时，也不再执⾏foo_4函数；
mui("#list").off();
使⽤igger()⽅法可以动态触发特定DOM元素上的事件。
.trigger( element , event , data )
element
Type:
触发事件的DOM元素
event
Type:
事件名字，例如：'tap'、'swipeleft'
data
Type:
需要传递给事件的业务参数
⽰例
⾃动触发按钮的点击事件：
var btn = ElementById("submit");
//监听点击事件
btn.addEventListener("tap",function () {
console.log("tap event trigger");
});
//触发submit按钮的点击事件
部分mui控件监听的事件⽆法通过igger触发
⽐如⽆法实现⾃动触发mui返回图标，实现关闭当前页⾯的功能，该部分逻辑正在优化中
在开发移动端的应⽤时，会⽤到很多的⼿势操作，⽐如滑动、长按等，为了⽅便开放者快速集成这些⼿势，mui内置了常⽤的⼿势事件，⽬前⽀持的⼿势事件见如下列表：分类参数描述
点击tap单击屏幕doubletap双击屏幕
长按longtap长按屏幕hold按住屏幕release离开屏幕
滑动swipeleft向左滑动swiperight向右滑动swipeup向上滑动swipedown向下滑动
拖动dragstart开始拖动drag拖动中dragend拖动结束
⼿势事件配置
根据使⽤频率，mui默认会监听部分⼿势事件，如点击、滑动事件；为了开发出更⾼性能的moble App，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(){
console.log("你正在向左滑动");
});
若多个元素执⾏相同逻辑，则建议使⽤。
在App开发中，经常会遇到页⾯间传值的需求，⽐如从新闻列表页进⼊详情页，需要将新闻id传递过去； Html5Plus规范设计了⽅法来解决该问题；但evalJS⽅法仅接收字符串参数，涉及多个参数时，需要开发⼈员⼿动拼字符串；为简化开发，mui框架在evalJS⽅法的基础上，封装了⾃定义事件，通过⾃定义事件，⽤户可以轻松实现多webview间数据传递。
仅能在5+ App及流应⽤中使⽤
因为是多webview之间传值，故⽆法在⼿机浏览器、中使⽤；
监听⾃定义事件
添加⾃定义事件监听操作和标准js事件监听类似，可直接通过window对象添加，如下：
window.addEventListener('customEvent',function(event){
//通过event.detail可获得传递过来的参数内容
....
});
触发⾃定义事件
通过mui.fire()⽅法可触发⽬标窗⼝的⾃定义事件：
.fire( target , event , data )
target
Type:
需传值的⽬标webview
event
Type:
⾃定义事件名称
data
Type:
json格式的数据
⽬标webview必须触发loaded事件后才能使⽤⾃定义事件
若新创建⼀个webview，不等该webview的loaded事件发⽣，就⽴即使⽤webview.evalJS()或mui.fire(webview,'eventName',{})，则可能⽆效；案例参考：
⽰例
假设如下场景：从新闻列表页⾯进⼊新闻详情页⾯，新闻详情页⾯为共⽤页⾯，通过传递新闻ID通知详情页⾯需要显⽰具体哪个新闻，详情页⾯再动态向服务器请求数据，mui 要实现类似需求可通过如下步骤实现：
在列表页⾯中预加载详情页⾯（假设为detail.html）
列表页⾯在点击新闻标题时，⾸先，获得该新闻id，触发详情页⾯的newsId事件，并将新闻id作为事件参数传递过去；然后再打开详情页⾯；
详情页⾯监听newsId⾃定义事件
列表页⾯代码如下：
//初始化预加载详情页⾯
mui.init({
preloadPages:[{
id:'detail.html',
url:'detail.html'
}
]
});
var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', 'a', function(e) {
var id = Attribute('id');
//获得详情页⾯
if(!detailPage){
detailPage = WebviewById('detail.html');
}
//触发详情页⾯的newsId事件
mui.fire(detailPage,'newsId',{
id:id
});
//打开详情页⾯
mui.openWindow({
id:'detail.html'
});
});
详情页⾯代码如下：
/
/添加newId⾃定义事件监听

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。