其实我是做后端开发的，今天搞了一下登录，实验成功，贴出代码，请大神赐教。
<!DOCTYPE html>
<html class="ui-page-login">
<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.css" rel="stylesheet" />
<style>
.ui-page-login,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.mui-content {
height: 100%;
}
.area {
margin: 20px auto 0px auto;
}
.mui-input-group {
margin-top: 10px;
}
.mui-input-group:first-child {
margin-top: 20px;
}
.mui-input-group label {
width: 22%;
}
.mui-input-row label~input,
.mui-input-row label~select,
.mui-input-row label~textarea {
width: 78%;
}
.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
top: 6px;
}
.mui-content-padded {
margin-top: 25px;
}
.mui-btn {
padding: 10px;
}
.link-area {
display: block;
margin-top: 25px;
text-align: center;
}
.spliter {
color: #bbb;
padding: 0px 8px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">登录</h1>
</header>
<div class="mui-content">
<form id='login-form' class="mui-input-group">
<div class="mui-input-row">
<label>账号</label>
<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
</div>
<div class="mui-input-row">
<label>密码</label>
<input id='password' type="password" 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='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
<!--<div class="link-area"><a id='reg'>注册账号</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>
</div>-->
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script src="js/mui.enterfocus.js"></script>
<script type="text/javascript" src="mvc/db/sqlite.js"></script>
<script type="text/javascript" src="mvc/dao/userDao.js"></script>
<script src="js/app.js"></script>
<script>
(function($, doc) {
$.init({
statusBarBackground: '#f7f7f7'
});
$.plusReady(function() {
plus.screen.lockOrientation("portrait-primary");
var settings = app.getSettings();
var state = app.getState();
var lo = JSON.parse(unescape(plus.storage.getItem("loginI")));
if(lo != null) {
var isActive = document.getElementById("autoLogin").classList.contains("mui-active");
if(!isActive) {
mui("#autoLogin").switch().toggle();
}
login(lo.account, lo.password);
}
// close splash
setTimeout(function() {
//关闭 splash
plus.navigator.closeSplashscreen();
}, 600);
//检查 "登录状态/锁屏状态" 结束
var loginButton = doc.getElementById('login');
var accountBox = doc.getElementById('account');
var passwordBox = doc.getElementById('password');
var autoLoginButton = doc.getElementById("autoLogin");
loginButton.addEventListener('tap', function(event) {
login(accountBox.value, passwordBox.value);
});
$.enterfocus('#login-form input', function() {
$.trigger(loginButton, 'tap');
});
//处理返回键
var backButtonPress = 0;
$.back = function(event) {
backButtonPress++;
if(backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('再按一次退出应用');
}
setTimeout(function() {
backButtonPress = 0;
}, 1000);
return false;
};
function login(a, p) {
if(a.trim() == "" || a.trim().length < 1) {
return plus.nativeUI.toast('账号不能为空');
}
if(p.trim() == "" || p.trim().length < 1) {
return plus.nativeUI.toast('密码不能为空');
}
if(plus.networkinfo.getCurrentType() != plus.networkinfo.CONNECTION_NONE) {
plus.nativeUI.showWaiting('正在进行系统登录身份验证，请稍后...', {
style: "black",
color: "#999",
background: "rgba(0,0,0,0.7)",
back: "none"
});
ymdao.execLoginSQL({
username: a,
password: p
}, function(response) {
try {
response = JSON.parse(response);
} catch(err) {
response = response;
}
plus.nativeUI.closeWaiting();
if(response.reqstate == 1) {
var user = null;
try {
user = JSON.parse(response.data || '{}');
} catch(e) {
user = response.data || '{}';
}
var state = app.getState();
state.account = user.UserName;
state.token = user.Id;
state.rolename = user.Role;
state.phone = user.Phone;
app.setState(state);
var isActive = autoLoginButton.classList.contains("mui-active");
//记住密码
console.log(isActive);
if(isActive) {
var l = {
account: a,
password: p
};
plus.storage.setItem("loginI", escape(JSON.stringify(l)));
}
try {
if(state.rolename.indexOf('采购员') >= 0) {
clicked('purchase.html', false, false);
} else if(state.rolename.indexOf('分园') >= 0) {
clicked('main.html', false, false);
} else {
plus.storage.clear();
return plus.nativeUI.toast('无登录权限', {
duration: 'long'
});
}
} catch(e) {
plus.storage.clear();
return plus.nativeUI.toast('用户角色不存在', {
duration: 'long'
});
}
} else {
plus.storage.clear();
return plus.nativeUI.toast('登录失败', {
duration: 'long'
});
}
});
} else {
return plus.nativeUI.toast('当前系统未联网', {
duration: 'long'
});
}
};
});
}(mui, document));
</script>
</body>
</html>
2 个回复
farce
等待有人回答，并给实例 嘿嘿。。。
k***@cotlife.cn
其实我是做后端开发的，今天搞了一下登录，实验成功，贴出代码，请大神赐教。
<!DOCTYPE html>
<html class="ui-page-login">
</html>