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&nbsp;isopen&nbsp;=&nbsp;false;
var&nbsp;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();

&nbsp;//显示遮罩层
//ws.setStyle({mask:&quot;rgba(0,0,0,0.5)&quot;});    
//&nbsp;点击关闭遮罩层
ws.addEventListener(&quot;maskClick&quot;,function(){
        menuControl();
        },false);

       });
      
       function menuControl(){
       console.log("@@@@@");
       if (!isopen) {
       // 显示遮罩层

        ws.setStyle({mask:&quot;rgba(0,0,0,0.5)&quot;});

       console.log("打开");
       menuTest.show();

        isopen&nbsp;=&nbsp;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);

&lt;/script&gt;

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

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数据传值的<br/>

extras:{
       "username":"hu",
       "password":"Damon"
       },

在第一个test页面传值,然后第二个test2页面直接提取即可<br/>

<script type="text/javascript">

mui.plusReady(function&nbsp;(e)&nbsp;{
    var&nbsp;s&nbsp;=&nbsp;mui.currentWebview.username;
    var&nbsp;m&nbsp;=&nbsp;plus.webview.currentWebview().password;
    console.log(&quot;username:&quot;+s+&quot;&nbsp;&nbsp;password:&nbsp;&quot;+m);

// mui.confirm(m,s,["q","p"],function (e) {
// console.log(e.index);
// });

    document.write(&quot;D&lt;br/&gt;&nbsp;LOVE&lt;br/&gt;&nbsp;L&lt;br&gt;&quot;);
            
});

</script>

这样就会得到传过来的数据了,而mui.confirm是修改确认弹窗的,e.index表示点击的哪个按钮,是q还是p。<br/>

注意:

mui在头文件会引用自己的js和css文件<br/>

 <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
如果觉得我的文章对你有用,请随意打赏: ☞已打赏列表