js代码 (function(w){
// 空函数
function shield(){
return false;
}
document.addEventListener('touchstart',shield,false);//取消浏览器的所有事件,使得active的样式在手机上正常生效
document.oncontextmenu=shield;//屏蔽选择函数
// H5 plus事件处理
var ws=null,as='pop-in';
function plusReady(){
ws=plus.webview.currentWebview();
// Android处理返回键
plus.key.addEventListener('backbutton',function(){
back();
},false);
compatibleAdjust();
}
if(w.plus){
plusReady();
}else{
document.addEventListener('plusready',plusReady,false);
}
// DOMContentLoaded事件处理
var domready=false;
document.addEventListener('DOMContentLoaded',function(){
domready=true;
gInit();
document.body.onselectstart=shield;
compatibleAdjust();
},false);
// 处理返回事件
w.back=function(hide){
if(w.plus){
ws||(ws=plus.webview.currentWebview());
if(hide||ws.preate){
ws.hide('auto');
}else{
ws.close('auto');
}
}else if(history.length>1){
history.back();
}else{
w.close();
}
};
// 处理点击事件
var openw=null,waiting=null;
/**
- 打开新窗口
- @param {URIString} id : 要打开页面url
- @param {boolean} wa : 是否显示等待框
- @param {boolean} ns : 是否不自动显示
*/
w.clicked=function(id,wa,ns){
if(openw){//避免多次打开同一个页面
return null;
}
if(w.plus){
wa&&(waiting=plus.nativeUI.showWaiting());
var pre='';//'http://6/h5/';
openw=plus.webview.create(pre+id,id,{scrollIndicator:'none',scalable:false});
ns||openw.addEventListener('loaded',function(){//页面加载完成后才显示
// setTimeout(function(){//延后显示可避免低端机上动画时白屏
openw.show(as);
closeWaiting();
// },200);
},false);
openw.addEventListener('close',function(){//页面关闭后可再次打开
openw=null;
},false);
return openw;
}else{
w.open(id);
}
return null;
};
w.openDoc=function(t,c){
var d=plus.webview.getWebviewById('document');
if(d){
d.evalJS('updateDoc("'+t+'","'+c+'")');
}else{
d=plus.webview.create('/plus/doc.html','document',{zindex:9999,popGesture:'hide'},{preate:true});
d.addEventListener('loaded',function(){
d.evalJS('updateDoc("'+t+'","'+c+'")');
},false);
}
}
/** - 关闭等待框
*/
w.closeWaiting=function(){
waiting&&waiting.close();
waiting=null;
}
// 兼容性样式调整
var adjust=false;
function compatibleAdjust(){
if(adjust||!w.plus||!domready){
return;
} // iOS平台使用滚动的div
if('iOS'==plus.os.name){
var t=document.getElementById("dcontent");
t&&(t.className="sdcontent");
t=document.getElementById("content");
t&&(t.className="scontent");
//iOS8横竖屏切换div不更新滚动问题
var lasto=window.orientation;
window.addEventListener("orientationchange",function(){
var nowo=window.orientation;
if(lasto!=nowo&&(90==nowo||-90==nowo)){
dcontent&&(0==dcontent.scrollTop)&&(dcontent.scrollTop=1);
content&&(0==content.scrollTop)&&(content.scrollTop=1);
}
lasto=nowo;
},false);
}
adjust=true;
};
w.compatibleConfirm=function(){
plus.nativeUI.confirm('本OS原生层面不提供该控件,需使用mui框架实现类似效果。请点击“确定”下载Hello mui示例',function(e){
if(0==e.index){
plus.runtime.openURL("http://www.dcloud.io/hellomui/");
}
},"",["确定","取消"]);
}
// 通用元素对象
var dout=null,dcontent=null;
w.gInit=function(){
dout=document.getElementById("output");
dcontent=document.getElementById("dcontent");
};
// 清空输出内容
w.outClean=function(){
dout.innerText="";
dout.scrollTop=0;//在iOS8存在不滚动的现象
};
// 输出内容
w.outSet=function(s){
dout.innerText=s+"\n";
(0==dout.scrollTop)&&(dout.scrollTop=1);//在iOS8存在不滚动的现象
};
// 输出行内容
w.outLine=function(s){
dout.innerText+=s+"\n";
(0==dout.scrollTop)&&(dout.scrollTop=1);//在iOS8存在不滚动的现象
};
// 格式化时长字符串,格式为"HH:MM:SS"
w.timeToStr=function(ts){
if(isNaN(ts)){
return "--:--:--";
}
var h=parseInt(ts/3600);
var m=parseInt((ts%3600)/60);
var s=parseInt(ts%60);
return (ultZeroize(h)+":"+ultZeroize(m)+":"+ultZeroize(s));
};
// 格式化日期时间字符串,格式为"YYYY-MM-DD HH:MM:SS"
w.dateToStr=function(d){
return (d.getFullYear()+"-"+ultZeroize(d.getMonth()+1)+"-"+ultZeroize(d.getDate())+" "+ultZeroize(d.getHours())+":"+ultZeroize(d.getMinutes())+":"+ultZeroize(d.getSeconds()));
};
/** - zeroize value with length(default is 2).
- @param {Object} v
- @param {Number} l
-
@return {String}
*/
w.ultZeroize=function(v,l){
var z="";
l=l||2;
v=String(v);
for(var i=0;i<l-v.length;i++){
z+="0";
}
return z+v;
};
})(window);
页面代码
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>禧图信息服务平台-登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>
<script type="text/javascript" src="js/jQuery.md5.js" ></script>
</head><body >
<header class="mui-bar mui-bar-nav">
<!--<a class="mui-icon mui-icon-bars mui-pull-left"></a>-->
<!--<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>-->
<h1 class="mui-title">禧图信息服务平台</h1>
</header><div class="mui-content" > <div class="mui-content-padded" style="margin-top: 3rem;"> <div class="mui-input-group"> <div class="mui-input-row"> <label>工号:</label> <input type="text" id="UserName" class="mui-input-speech mui-input-clear" placeholder="请输入工号"> </div> <div class="mui-input-row"> <label>密码:</label> <input type="PassWord" id="PassWord" class="mui-input-clear" placeholder="请输入密码"> </div> <div class="mui-input-row"> <label>记住密码:</label> <div id="mySwitch" class="mui-switch mui-active"> <div class="mui-switch-handle"></div> </div> </div> </div> <div class="mui-button-row" style="margin-top: 10px;"> <button id="Login-btn" type="button" onclick="Login()" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 1rem 2rem;">登录</button> </div> </div> <div style=" margin-left: auto; margin-top: 30px; margin-right: auto; width: 142px;"> <img src="img/yuto.png" /> </div> <div style="position: absolute; bottom: 1rem; width: 100%; text-align: center;"> <h5>深圳市禧图纸制品有限公司 </h5> <h5 id="bb"></h5> <h5 id="zx"></h5> </div> </div> <script> //检查是否有网络 var wgtVer=null; var url='http://App.szyuto.com/'; mui.plusReady(function(){ plus.runtime.getProperty(plus.runtime.appid,function(inf){ wgtVer=inf.version; var v=plus.runtime.version;//本机版本号 document.getElementById("bb").innerHTML="APP版本: "+v+" wgt版本:"+wgtVer; }); GetOnLine(); //仅支持竖屏显示 //plus.screen.lockOrientation("portrait-primary"); //plus.screen.lockOrientation() //获取所有窗体,如果不是本窗体就全部关闭 var wvs=plus.webview.all(); //alert(wvs.length) for(var i=0;i<wvs.length;i++){ if(wvs[i].id!=plus.webview.getLaunchWebview().id) { console.log(wvs[i].id); wvs[i].close(); } } }); ///获取在线人数 function GetOnLine () { var Nurl=url+'Public/GetOnLine'; //console.log(Nurl); //简单get mui.get(Nurl,'',function (rs) { document.getElementById("zx").innerText="在线人数:"+rs; }) } //自动登陆 function AutoLogin() { //获取在本地的用户名密码数据 var n=document.getElementById("UserName"); n.value=plus.storage.getItem("UserName"); var p=document.getElementById("PassWord"); p.value=plus.storage.getItem("PassWord"); //如果用户名和密码都有的话,就进行登录验证 if(n.value!=""&&p.value!="") { SystemLogin(n.value,p.value); } } //登录系统 function Login () { //是否记住密码 var UserName = document.getElementById("UserName").value; var PassWord = document.getElementById("PassWord").value; if(UserName==""||PassWord=="") { //alert("请填写正确的用户名密码"); mui.toast('用户名和密码不能为空!');
// mui.alert('请填写正确的用户名密码', '禧图', function() {
// //info.innerText = '请填写正确的用户名密码';
// });
//plus.device.vibrate(30);
return;
}
//执行服务器密码验证
SystemLogin(UserName,PassWord);
}//验证系统 function SystemLogin(UserName,PassWord) { ///检查网络是否通畅 if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){ mui.toast('网络不给力,请重试!'); return false; } var PostDdata = { UserName: UserName, Password: escape($.md5(PassWord)), PasswordY: escape(PassWord) }; //这进行服务器验证 var Nurl=url+'Public/SystemLogin'; //发送数据 var wd= plus.nativeUI.showWaiting('正在登录...'); //简单get mui.get(Nurl,PostDdata,function (rs) { //关闭等待 wd.close(); if (parseInt(rs) == -1){ mui.toast("登录账户不存在") } else if (parseInt(rs) == 2) { mui.toast("登录账户被系统锁定") } else if (parseInt(rs) == 4) { mui.toast("登录密码错误") } else if (parseInt(rs) == 3) { //获取一下数据 Nurl=url+'Public/GetUserInfo'; //该方法会异步执行,所以登录需要放在里面 mui.get(Nurl,PostDdata,function (user) { var UserModel=eval("(" + user + ")");//转成JSON对象 plus.storage.setItem('UserModel', user); //用户信息存起来 GetUserAuthority(UserModel.Code,UserModel.UserId); //获取用户权限 //成功 var t= plus.webview.getLaunchWebview(); t.loadURL("index.html"); t.show("slide-in-right",500);//显示加动画 var isActive = document.getElementById("mySwitch").classList.contains("mui-active"); plus.storage.setItem("UserName", UserName ); //存到本地 if(isActive) { plus.storage.setItem("PassWord", PassWord ); } else { plus.storage.setItem("PassWord", "" ); } }) } else { mui.toast(rs) } }) } ///获取用户权限 function GetUserAuthority (Code,UserId) { var PostDdata = { GongHao: Code, UserId: UserId }; //获取一下数据 Nurl=url+'Public/GetUserAuthority'; //该方法会异步执行,所以登录需要放在里面 mui.ajax(Nurl,{ data:PostDdata, async: false, dataType:'html',//服务器返回json格式数据 type:'post',//HTTP请求类型 timeout:10000,//超时时间设置为10秒; success:function(rs){ //保存用户权限 plus.storage.setItem("UserAuthority", rs); }, error:function(xhr,type,errorThrown){ //异常处理; console.log(type); } }) }
</script>
</body>
</html>
1 个回复
贾斯丁比伯 (作者) - asp.net工程师
<!DOCTYPE html>
<html>
// mui.alert('请填写正确的用户名密码', '禧图', function() {
// //info.innerText = '请填写正确的用户名密码';
// });
//plus.device.vibrate(30);
return;
}
//执行服务器密码验证
SystemLogin(UserName,PassWord);
}