首页 > 代码库 > mui实现自动登录
mui实现自动登录
<!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="http://www.mamicode.com/css/mui.min.css" rel="stylesheet" />
<script src="http://www.mamicode.com/js/pub.js" type="text/javascript" charset="utf-8"></script>
<style>
body {
height: 100%;
background: #fff;
}
.mui-content {
height: 100%;
padding: 0;
background: #fff;
}
img {
margin-top: 30px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<!--<h1 class="mui-title">欢迎光临</h1>-->
<a id=‘done‘ class="mui-btn mui-btn-link mui-pull-right mui-btn-blue mui-disabled" href="http://www.mamicode.com/setting_iandtop.html">
<span class="mui-icon mui-icon-list"></span>
</a>
</header>
<div class="mui-content">
<center><img src="http://www.mamicode.com/images/iandtop.png" /></center><br><br>
<form id=‘login-form‘ class="mui-input-group">
<div class="mui-input-row">
<label>账号</label>
<input id=‘account‘ type="text" value=http://www.mamicode.com/‘‘ class="mui-input-clear mui-input" placeholder="工号/手机号/邮箱">
</div>
<div class="mui-input-row">
<label>密码</label>
<input id=‘password‘ type="password" value="" class="mui-input-clear mui-input" placeholder="请输入密码">
</div>
</form>
<form class="mui-input-group">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
自动登录
<div id="autoLogin" class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
</form>
<div class="mui-content-padded">
<button id=‘btnLogin‘ class="mui-btn mui-btn-block mui-btn-primary" style="height:40px;padding:0 10px;">登 录</button>
<!--<br/>
<div class="link-area">
<a id=‘reg‘ href="http://www.mamicode.com/register.html">注册账号</a> <span class="spliter">|</span>
<a id=‘forgetPassword‘>忘记密码</a>
</div>-->
</div>
<!--<div class="mui-content-padded oauth-area">
<a href="http://www.mamicode.com/setting_iandtop.html">设置服务器地址</a>
</div>-->
</div>
</body>
<script src="http://www.mamicode.com/js/mui.min.js"></script>
<script src="http://www.mamicode.com/js/pub.js"></script>
<script type="text/javascript" charset="utf-8">
(function(mui, doc) {
var suserName = document.getElementById(‘account‘);
var spassWord = document.getElementById(‘password‘);
var subLogin = document.getElementById(‘btnLogin‘);
var autoSwitch = document.getElementById("autoLogin");
var url = OCS.getUrl();
mui.init({
swipeBack: true //启用右滑关闭功能
});
// 所有方法都放到这里
mui.plusReady(function() {
subLogin.addEventListener(‘tap‘, function(event) {
postData(suserName.value, spassWord.value);
});
autoSwitch.addEventListener("toggle", function(event) {
window.localStorage.setItem(OCS.token.SWITCH_STATE, event.detail.isActive);
});
autoLogin();
});
function autoLogin() {
autoSwitch.value = http://www.mamicode.com/window.localStorage.getItem(OCS.token.SWITCH_STATE);
suserName.value = http://www.mamicode.com/window.localStorage.getItem(OCS.token.TOKEN_USER);
spassWord.value = http://www.mamicode.com/window.localStorage.getItem(OCS.token.TOKEN_PW);
if(autoSwitch.value =http://www.mamicode.com/= ‘true‘ || autoSwitch.value == true) {
mui("#autoLogin").switch().toggle();
postData(suserName.value, spassWord.value);
}
}
function postData(name, password) {
mui.post(url + ‘Login‘, {
psncode: name,
password: password
}, function(data) {
window.localStorage.setItem(OCS.token.TOKEN_USER, suserName.value);
window.localStorage.setItem(OCS.token.TOKEN_PW, spassWord.value);
window.localStorage.setItem(OCS.token.TOKEN_TOKEN, data.resultData);
if(data.success + "" != "true") { //如果登陆失败，提示
mui.alert(data.msg);
} else {
mui.post(url + ‘IPI‘, {
token: data.resultData
}, function(dataIPI) {
window.localStorage.setItem(OCS.person.id, dataIPI.resultData.id);
window.localStorage.setItem(OCS.person.addr, dataIPI.resultData.addr);
window.localStorage.setItem(OCS.person.birthdate, dataIPI.resultData.birthdate);
window.localStorage.setItem(OCS.person.email, dataIPI.resultData.email);
window.localStorage.setItem(OCS.person.sex, dataIPI.resultData.sex);
window.localStorage.setItem(OCS.person.usedname, dataIPI.resultData.usedname);
window.localStorage.setItem(OCS.person.mobile, dataIPI.resultData.mobile);
window.localStorage.setItem(OCS.person.psnname, dataIPI.resultData.psnname);
}, ‘json‘);
mui.openWindow({
url: "index.html"
});
}
}, ‘json‘);
}
})(mui, document);
</script>
<script type="text/javascript">
var first = null;
var showMenu = false;
mui.back = function() {
if(showMenu) {
closeMenu();
} else {
//首次按键，提示‘再按一次退出应用’
if(!first) {
first = new Date().getTime();
mui.toast(‘再按一次退出应用‘);
setTimeout(function() {
first = null;
}, 1000);
} else {
if(new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}
}
};
var slider = mui("#slider");
slider.slider({
interval: 3000
});
</script>
</html>
mui实现自动登录