mui：返回上级页面时的参数传递

在APP的开发过程中我们经常用到在下级页面填写数据，填完后返回上级页面提交的情况。比如在微信中我们修改了微信昵称之后，需要在返回到个人信息的界面显示出来。下面我们就以实例来为大家分享MUI点击返回按钮时的参数传递。

演示效果：（从A页面访问B页面，在B页面点击返回按钮把B页面填写的参数传递给A页面）

A页面源代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="../../css/mui.min.css" rel="stylesheet" />
<script src="../../../js/mui.min.js"></script>
<script src="../../../js/jquery.js"></script>
<script>
mui.init()
function plusReady(){
mui("body").on("tap",".jump",function(){
mui.openWindow({
url:"b.html",
id:"b"
})
})
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
//返回回来要执行的方法
function fun1(e){
var val=e.detail.inputVal
$(".a1 font").html(val)
}
//自定义窗体事件 doit 要和b页面定义的事件名称一致
window.addEventListener('doit',fun1);
</script>
</head>
<body>
<a href="javascript:void(0);" class="jump">跳转到B页面</a>
<div class="a1">返回回来的值是------<font style=" font-size:20px;color:#2AC845"></font></div>
<div style=" font-size:50px ; text-align: center; display: block; margin: 50px 0 0 0;">a.html页面</div>
</body>
</html>

B页面源代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="../../css/mui.min.css" rel="stylesheet" />
<script src="../../../js/mui.min.js"></script>
<script src="../../../js/jquery.js"></script>
<script>
mui.init()
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
function plusReady(){
mui("body").on("tap",".jump",function(){
var view=plus.webview.getWebviewById("HBuilder");//注意 HBuilder是上个页面的ID你自己要替换掉
mui.fire(view,'doit',{
inputVal:$("#text").val()
});
mui.back()
})
}
</script>
</head>
<body>
<input type="text" id="text">
<a href="javascript:void(0)" class="jump">返回</a>
<div style=" font-size:50px ; text-align: center; display: block; margin: 50px 0 0 0;">b.html页面</div>
</body>
</html>

更多关于mui页面参数传递的问题也可参考MUI官方文档：http://ask.dcloud.net.cn/article/63 敬请关注菠菜园其他精彩文章。