以下为index.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>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
<div style="text-align: right;">
<a class="mui-icon mui-icon-paperplane" href="html/login.html"></a>
<a href="html/login.html"></a>
</div>
</header>
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="image/4.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="image/1.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="image/2.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="image/3.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="image/4.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="image/1.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
var slider = mui("#slider");
slider.slider({
interval: 1000
});
mui.plusReady(function () {
plus.storage.setItem("user",'{"username":"admin","password":" admin"}');
})
</script>
</html>
以下为login.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" />
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">登录</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input id="username" type="text" class="mui-input-clear" placeholder="请输入用户名"/>
</div>
<div class="mui-input-row">
<label>密码</label>
<input id="password" type="password" class="mui-input-password" placeholder="请输入密码"/>
</div>
<div class="mui-button-row">
<button id="login" type="button" class="mui-btn mui-btn-blue">登录</button>
<a href="../index.html">
<button type="button" class="mui-btn mui-btn-blue" >取消</button>
</a>
</div>
</form>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/vue.min.js" type="text/javascript"></script>
<script src="../js/vue-resource.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
var usernameBox =document.querySelector("input[type='text']");
var passwordBox =document.querySelector("input[type='password']");
var userInfo = null;
mui.plusReady(function () {
userInfo = JSON.parse(plus.storage.getItem("user"));
})
document.querySelector("#login").addEventListener("tap",function(){
console.log(userInfo.username + "#" + userInfo.password);
if(usernameBox.value == userInfo.username&&passwordBox.value == userInfo.password){
mui.toast("登录成功")
}else{
plus.nativeUI.toast("信息不正确")
}
});
// mui.back();
// plus.webview.currentWebview().close();
</script>
</body>
</html>
以上代码有些许问题,以下为更新
index.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>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">首页</h1>
<a id="header" class="mui-icon mui-icon-person mui-pull-right"></a>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="html/news.html">
<img src="image/1.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="html/news.html">
<img src="image/2.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="image/3.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="image/4.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="image/1.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="image/2.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
</div>
<script type="text/javascript" charset="UTF-8">
mui.init();
localStorage.setItem("user", '{"username":"admin","password":"admin"}');
mui("header").on("tap", "a", function() {
console.log("tap login btn");
});
document.getElementById('header').addEventListener('tap', function() {
mui.openWindow({
url: "html/login.html",
id: "login.html",
});
});
</script>
</body>
</html>
login.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" />
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
.oauth-area {
position: absolute;
bottom: 20px;
height: 50px;
width: 100%;
left: 0;
text-align: center;
}
.oauth-area .oauth-btn {
border: 1px solid #ddd;
display: inline-block;
height:50px;
width:50px;
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: center;
border-radius: 30px;
margin:0 10px;
}
</style>
</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 id="app" class="mui-content">
<div class="mui-content-padded">
<form class="mui-input-group">
<div class="mui-input-row">
<label>账号</label>
<input id="username" type="text" class="mui-input-clear" placeholder="请输入">
</div>
<div class="mui-input-row">
<label>密码</label>
<input id="password" type="password" class="mui-input-password" placeholder="请输入">
</div>
<div style="margin: 10px 20px;">
<button id="login" type="button" class="mui-btn mui-btn-blue mui-btn-block" style="padding: 8px 25px;">登录</button>
</div>
<div class="mui-button-row">
<a id="reg" class="mui-btn-link"></a>
<a id="forget" class="mui-btn-link"></a>
</div>
</form>
</div>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
var usernameBox = document.getElementById("username");
var passwordBox = document.getElementById("password");
var userInfo = JSON.parse(localStorage.getItem("user"));
document.querySelector("#login").addEventListener("tap", function() {
if (usernameBox.value == userInfo.username && passwordBox.value == userInfo.password) {
mui.toast("登录成功");
setTimeout(function() {
mui.back()
}, 500);
} else {
mui.toast("信息不正确")
}
})
// plus.webview.currentWebview().close();
</script>
</body>
</html>
以下为需要的配置文件及图片文件列表