这个涉及到对webview的控制，我做了个demo，你可以参考一下。
首页：
<!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" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">电话</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">邮件</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
<div class="mui-content">
<button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="btn_login">登录</button>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function() {
// 事件，打开登录页
document.getElementById("btn_login").addEventListener("tap", function() {
mui.openWindow({
url: "login.html",
id: "login"
});
});
});
</script>
</body>
</html>
然后是登录页：
<!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" />
</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">
<div class="mui-input-group">
<div class="mui-input-row">
<input type="text" class="mui-input-clear" placeholder="账号">
</div>
</div>
<div class="mui-input-group">
<div class="mui-input-row">
<input type="text" class="mui-input-clear" placeholder="密码">
</div>
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-blue">登录</button>
<button type="button" class="mui-btn mui-btn-green" id="btn_register">注册</button>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function() {
// 事件，打开注册页
document.getElementById("btn_register").addEventListener("tap", function() {
mui.openWindow({
url: "register.html",
id: "register"
});
});
});
</script>
</body>
</html>
最后是注册页：
<!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" />
</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">
<div class="mui-input-group">
<div class="mui-input-row">
<input type="text" class="mui-input-clear" placeholder="账号">
</div>
</div>
<div class="mui-input-group">
<div class="mui-input-row">
<input type="text" class="mui-input-clear" placeholder="密码">
</div>
</div>
<div class="mui-button-row">
<button type="button" class="mui-btn mui-btn-green" id="btn_submit">提交</button>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="UTF-8">
mui.init();
mui.plusReady(function() {
// 事件，切换（注意是切换）回首页
document.getElementById("btn_submit").addEventListener("tap", function() {
// 根据id关闭指定的webview
// http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.close
plus.webview.close("login", "none");
// 关闭当前页
// http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview
// http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.close
// http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeClose
plus.webview.currentWebview().close("slide-out-right");
});
});
</script>
</body>
</html>
通过mui.openWindow()打开的页面，都是一个webviewObject，类似这种页面切换的场景，通常都是通过对webview的控制来实现的。具体的，可以多阅读下文档，另外上面我也给出了部分链接地址，可以结合文档一起看下。
3 个回复
最佳回复
Trust - 少说废话
这个涉及到对webview的控制，我做了个demo，你可以参考一下。
首页：
然后是登录页：
最后是注册页：
通过mui.openWindow()打开的页面，都是一个webviewObject，类似这种页面切换的场景，通常都是通过对webview的控制来实现的。具体的，可以多阅读下文档，另外上面我也给出了部分链接地址，可以结合文档一起看下。
老向
首页检测是否登陆，如果没登陆，用mui.openWindow()调出登陆页面，登陆页面上的注册连接用mui.openWindow()调出注册页面，注册完成调用mui.back()关闭当前页返回登陆页面，登页页面登陆成功！给首页发送自定义事件，并用mui.back()关闭登陆页面返回首页，首页上监听自定义事件，刷新当前页面。
lufei
收藏