版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LzzMandy/article/details/85294347
主页面中打开新窗口设置：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<script src="js/mui.min.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<div class="mui-content mui-content-padded">
<button id="btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>
</div>
<script type="text/javascript">
mui.init();
var btn_obj = document.getElementById('btn');
btn_obj.addEventListener('tap', function() {
//打开新窗口
mui.openWindow({
url: 'child1.html', //需要打开页面的url地址
id: 'child1', //需要打开页面的url页面id
styles: {
top: '0px', //新页面顶部位置
bottom: '0px', //新页面底部位置
// width: "50%", //新页面宽度，默认为100%
// height: "50%", //新页面高度，默认为100% ......
},
extras: {
name: 'lzz',
age: '18',
//自定义扩展参数，可以用来处理页面间传值
},
show: { //控制打开页面的类型
autoShow: false,
//页面loaded事件发生后自动显示，默认为true
// aniShow: 'slide-in-right', //页面显示动画，默认为”slide-in-right“； 页面出现的方式 左右上下
// aniShow: 'pop-in', //主页面跟着一起动
aniShow: 'zoom-fade-out', //目前广泛使用的方式
duration: '400' //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
},
waiting: { // 控制 弹出转圈框的信息
autoShow: true, //自动显示等待框，默认为true
title: '加载中...', //等待对话框上显示的提示内容
options: {
width: '100px', //等待框背景区域宽度，默认根据内容自动计算合适宽度
height: '100px', //等待框背景区域高度，默认根据内容自动计算合适高度 ......
}
}
});
});
</script>
</body>
</html>
新页面中接收参数和模拟显示新页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
// 模拟定时器,模拟5s钟之后再执行
setTimeout(function() {
mui.plusReady(function() {
var self = plus.webview.currentWebview();
var name1 = self.name;
var age1 = self.age;
console.log(name1);
console.log(age1);
//1,关闭等待框
plus.nativeUI.closeWaiting();
// 打开等待框
// plus.nativeUI.showWaiting("加载中...");//没有参数,只显示雪花图标
// 2,显示子页面内容
self.show("zoom-fade-out", 500) //参数表示以什么方式显示
});
}, 5000);
</script>
</body>
</html>