MUI框架之函数调用

Mui框架中的函数就是最基础的js的函数调用,基础的东西这个不在说,这里总结下我的一些理解和需要注意的地方,因为才开始接触这个框架理解有可能会有偏差,欢迎指正。

一、调用时机

页面在载入过程中,开始载入css和js,就是这些script里面的函数都只是载入,并不会调用,和c++等函数是一样的。

<script type="text/javascript"></script>

而进入页面之后,就会想cocos的onEnter()函数一样开始载入init这个函数,init之后如果初始化完成,就会调用plusReady函数,而其他的函数则是通过点击或者其他操作来调用。

二、例子分析

就比如这个页面的demo

Simulator Screen Shot 2016年9月25日 上午5.07.27.png

这个页面里面的代码如下

<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方法

Simulator Screen Shot 2016年9月25日 上午5.07.17.png

如果设置对象错误,设置成侧边栏test2的,那么遮罩层就是test2的,就会变成下面这样的,是不会响应maskclick方法的,注意区分

Simulator Screen Shot 2016年9月25日 上午5.14.49.png

页面传值是使用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++这些都是一个道理,主要就是先确认是不是函数是系统固定时机调用,再看绑定的事件响应的是哪个函数即可找到函数。

Last modification:January 1st, 1970 at 08:00 am
如果看了这个文章可以让你少加会班,可以请我喝杯可乐
已打赏名单
微信公众号

Leave a Comment