MUI APP关于页面之间的传值，plusready和自定义事件
Posted 南宫萧尘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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：[email protected]
日期：2016-04-03
以上是关于MUI APP关于页面之间的传值，plusready和自定义事件的主要内容，如果未能解决你的问题，请参考以下文章