Mui框架中的函数就是最基础的js的函数调用，基础的东西这个不在说，这里总结下我的一些理解和需要注意的地方，因为才开始接触这个框架理解有可能会有偏差，欢迎指正。
一、调用时机
页面在载入过程中，开始载入css和js，就是这些script里面的函数都只是载入，并不会调用，和c++等函数是一样的。
<script type="text/javascript"></script>
而进入页面之后，就会想cocos的onEnter()函数一样开始载入init这个函数，init之后如果初始化完成，就会调用plusReady函数，而其他的函数则是通过点击或者其他操作来调用。
二、例子分析
就比如这个页面的demo
这个页面里面的代码如下
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-bars" style="color: #D94640"></a>
<h1 class="mui-title" style="color: #555555;">标题2</h1>
</header>
<script type="text/javascript">
var menuTest;
var isopen = false;
var ws;
mui.init({
subpages:[
{
url:"html/test.html",
id:"html/test.html",
styles:{
top:"45px",
bottom:"60px"
}
}],
gestureConfig:{
doubletap: true, //默认为false
}
});
mui.plusReady(function () {
menuTest = mui.preload({
url:"html/test2.html",
id:"html/test2.html",
extras:{
"username":"hu",
"password":"Damon"
},
styles:{
width:"70%",
// mask:"rgba(0,0,0,0.5)"
}
});
ws=plus.webview.currentWebview();
//显示遮罩层
//ws.setStyle({mask:"rgba(0,0,0,0.5)"});
// 点击关闭遮罩层
ws.addEventListener("maskClick",function(){
menuControl();
},false);
});
function menuControl(){
console.log("@@@@@");
if (!isopen) {
// 显示遮罩层
ws.setStyle({mask:"rgba(0,0,0,0.5)"});
console.log("打开");
menuTest.show();
isopen = true;
return;
} else{
menuTest.hide();
ws.setStyle({mask:"none"});
isopen = false;
console.log("关闭");
return;
}
};
// mui(".mui-bar").on("tap",".mui-icon-bars",menuControl);
document.querySelector(".mui-icon-bars").addEventListener('tap',menuControl);
</script>
</body>首先init里面开始初始化主界面test.html，包括设置test页面的样式，而plusReady则是在初始化之后，预加载test2.html页面，test2页面就是划出来的侧边栏的页面。ws就是当前的窗口，就是主界面test
主界面的流程就是：界面init，添加主界面test.html 》 Plusready，预加载侧边栏test2.html，主界面增加点击遮罩层时(maskClick)的响应函数menuControl()。
主界面中，通过document.querySelector(".mui-icon-bars")查找到左上角的按钮，也可以通过mui.on上面的这个方式查找，还可以通过document.querySelector(".mui-icon.mui-icon-bars")更准确的定位，反正目的就是找到左上角的按钮，并且增加点击函数menuControl。
因为默认初始化init的时候，双击是不可使用的，如果想使用双击，就需要设置双击可用
gestureConfig:{
doubletap: true, //默认为false
}然后再绑定左上角的双击，这样双击才会有效果
document.querySelector(".mui-icon-bars").addEventListener('doubletap',menuControl);遮罩层是通过设置mask属性来设置颜色和透明度的，注意这个设置的是test的界面的遮罩层，所以出来的效果是这样的，这样点击遮罩层，才会响应maskclick方法
如果设置对象错误，设置成侧边栏test2的，那么遮罩层就是test2的，就会变成下面这样的，是不会响应maskclick方法的，注意区分
页面传值是使用extras这个json数据传值的
extras:{
"username":"hu",
"password":"Damon"
},在第一个test页面传值，然后第二个test2页面直接提取即可
<script type="text/javascript">
mui.plusReady(function (e) {
var s = mui.currentWebview.username;
var m = plus.webview.currentWebview().password;
console.log("username:"+s+" password: "+m);
// mui.confirm(m,s,["q","p"],function (e) {
// console.log(e.index);
// });
document.write("D<br/> LOVE<br/> L<br>");
});
</script>这样就会得到传过来的数据了，而mui.confirm是修改确认弹窗的，e.index表示点击的哪个按钮，是q还是p。
注意：
mui在头文件会引用自己的js和css文件
<script src="js/mui.min.js"></script> <!-- <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>--> <link href="css/mui.min.css" rel="stylesheet"/>
如果你在调用mui方法，提示mui是一个没定义的变量的话，就检查下js文件是否有引入，但是mui会有两个js和css文件分别是
mui.min.js
mui.js
mui.min.css
mui.css
其中两个js文件和两个css文件内容是一样的，只是一个压缩了，一个没有压缩便于阅读的区别，使用的时候引用一个即可，不要重复引用，否则会出现响应tap点击事件的时候，你点击一次结果响应了两次这个情况，上次找了半天问题所在。
三、总结
总之说了这么多，js的函数和c++这些都是一个道理，主要就是先确认是不是函数是系统固定时机调用，再看绑定的事件响应的是哪个函数即可找到函数。
版权属于：东哥笔记 - DongGe.org
本文链接：https://blog.dongge.org/365.html
本文采用知识共享署名4.0 国际许可协议进行许可。转载或大段使用必须添加本文链接，否则您将构成侵权！
微信公众号: 东哥org
