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: {

                        autoShow: true, //自动显示等待框，默认为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',

                            ProjectName: vText

                        });

                    }

                }

                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",

                        ProjectName: vText

                    },

                    waiting: {

                        autoShow: true, //自动显示等待框，默认为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