• MUI APP关于页面之间的传值,plusready和自定义事件


                最近在用MUI开发这个APP,发现有时候这个plusready不起作用,表现在,这个页面如果重复打开,这个plusready就进不去,然后上一个页面传过来的值,就没法接收了。这个经过MUI官方确认,是有可能发生的,所以,这里面的话,就需要通过自定义事件,来确保这个值能正确传递。

                首先,我先演示一下,通常我们页面之间的传值的方法,如下:
                参数生成页面:
                    mui.openWindow({
                        id'lightMapMain.html',
                        url'lightMapMain.html',
                        show{
                            aniShow'pop-in'
                        },
                        extras{//extras里面的就是参数了
                            entrance"mapDetail",
                            ProjectName"工程名称"
                        },
                        waiting{
                            autoShowtrue//自动显示等待框,默认为true
                        }
                    }); 
                参数接收页面:
                //plusReady事件后,在里面接收参数
                mui.plusReady(function() {
                    var wv plus.webview.currentWebview();
                    var vText wv.ProjectName;//这样就能接收到上个页面传过来的值了
                    document.getElementById("lbProjectName").innerHTML vText;                
                });  
     
    通常我们传参就这么进行,但是由于这个页面,多次打开,发生了类似缓存的现象,所以,有时候这个plusReady不能保证每次都能执行。所以,我根据而官方的提示,增加了一个自定义事件,来实现这个情况,实现方法如下(我是双管齐下,plusReady也获取值,自定义事件也获取值)
     
                好,下面演示我的方法(下面这个监听一个按钮,然后打开一个页面):
                var vBtnCtrl document.getElementById("btnCtrl");
                vBtnCtrl.addEventListener("tap"function() {
                    var vNextPage null;
                    //获得下一个页面
                    if (vNextPage == null) {
                        vNextPage plus.webview.getWebviewById('lightMapMain.html');//这个是下一个页面的ID,第一次,他肯定为空,所以,这里面这个fire方法,是不会执行的。
                        if (vNextPage != null) {
                            //触发下一个页面的自定义事件
                            mui.fire(vNextPage, 'DIY_DATA', {
                                entrance'mapDetail',
                                ProjectNamevText
                            });
                        }
                    }
                    var vCurrentWebView plus.webview.currentWebview();
                    if (vCurrentWebView != null) {
                        vCurrentWebView.hide('none');
                    }
                    //上面这个代码是隐藏当前窗口,我这个是浮动的子窗口,到了下一个页面之后,我要把它隐藏起来,否则等下我返回,这个子窗口还在,就影响体验了。如果你们是整个页面的窗口,那么这个代码可以注释掉。
                    mui.openWindow({
                        id'lightMapMain.html',//这个ID与上面的自定义事件传参的ID需要一致,因为第一次打开这个页面,上面是获取不到webview的,但是,你这次打开之后,下次再回到这个页面的时候,由于我们之前打开过这个页面,所以,那个自定义事件就会触发了。
                        url'lightMapMain.html',
                        show{
                            aniShow'pop-in'
                        },
                        extras{//这里面是传参了,想我们前面说到的
                            entrance"mapDetail",
                            ProjectNamevText
                        },
                        waiting{
                            autoShowtrue//自动显示等待框,默认为true
                        }
                    });
                })  
     
    接下来,我们就到了参数接收页面,如下(首先,我们还是要在plusReady里面接收一次,因为你不能保证这次是初次打开这个页面还是第二次,所以,这个还是需要的。):
                //plusReady事件后,自动创建menu窗口;
                mui.plusReady(function() {
                    var wv plus.webview.currentWebview();
                    var vText wv.ProjectName;
                    document.getElementById("lbProjectName").innerHTML vText;
                });  
     
    但是如果这个是非首次打开的话,就会不一定进来plusReady了,所以,参数可能接收失败了,这里面,我们就要接收自定义事件传过来的参数了,就是前面我们的fire那里了。
    代码如下:
                //添加上一个页面自定义事件监听
                window.addEventListener('DIY_DATA'function(event) {
                    //获得事件参数
                    //`var id = event.detail.id;
                    var vText event.detail.ProjectName;
                    document.getElementById("lbProjectName").innerHTML vText;
                }); 
    这样,我们就能把这个参数获取到,双重保证,就冇问题啦,是不是。(如果你们需要谨慎一些,可以把这个自定义事件的监听延迟个300毫秒,保证接收的概率,因为如果是这个自定义事件优先执行了,然后他又去执行这个plusReady,那就会冲突了。所以,你们懂得。) 
     
    好了,本次教程到此结束,转载请保留原作者地址以及姓名(本人无偿分享经验,有偿接单制作APP,有需要可以联系我。);
     
    作者:南宫萧尘  
    E-mail:314791147@qq.com
    日期:2016-04-03
  • 相关阅读:
    Mootools遮罩层练习(原为网上的jquery写法)
    Notepad++ c编译环境 64
    Apache添加多端口
    数据库权限分配(远程共享数据库)(mysql)
    Zend studio13 导入已有php文件夹
    按钮js跳转到非表单提交页
    Sql case when 小例
    php 获取数组中的key值
    knit使用安装 ecstore knit位置 及调用路径
    python数据库操作
  • 原文地址:https://www.cnblogs.com/nangong/p/22c8fc0af4c1c8a1c91713d27e07d377.html
Copyright © 2020-2023  润新知