登录模板页面样式(该页面包含账户、密码输入栏,具有自动登录功能)
模板的登录核心代码写在login.html页面里
<script>
(function($, doc) {
$.init({
statusBarBackground: '#f7f7f7'
});
$.plusReady(function() {
plus.screen.lockOrientation("portrait-primary");
var settings = app.getSettings();
var state = app.getState();
var mainPage = plus.webview.getWebviewById("main");
var main_loaded_flag = false;
if(!mainPage){
mainPage = $.preload({
"id": 'main',
"url": 'main.html'
});
}else{
main_loaded_flag = true;
}
mainPage.addEventListener("loaded",function () {
main_loaded_flag = true;
});
var toMain = function() {
//使用定时器的原因:
//可能执行太快,main页面loaded事件尚未触发就执行自定义事件,此时必然会失败
var id = setInterval(function () {
if(main_loaded_flag){
clearInterval(id);
$.fire(mainPage, 'show', null);
mainPage.show("pop-in");
}
},20);
};
//检查 "登录状态/锁屏状态" 开始
if (settings.autoLogin && state.token && settings.gestures) {
$.openWindow({
url: 'unlock.html',
id: 'unlock',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
} else if (settings.autoLogin && state.token) {
toMain();
} else {
app.setState(null);
//第三方登录
var authBtns = ['qihoo', 'weixin', 'sinaweibo', 'qq']; //配置业务支持的第三方登录
var auths = {};
var oauthArea = doc.querySelector('.oauth-area');
plus.oauth.getServices(function(services) {
for (var i in services) {
var service = services[i];
auths[service.id] = service;
if (~authBtns.indexOf(service.id)) {
var isInstalled = app.isInstalled(service.id);
var btn = document.createElement('div');
//如果微信未安装,则为不启用状态
btn.setAttribute('class', 'oauth-btn' + (!isInstalled && service.id === 'weixin' ? (' disabled') : ''));
btn.authId = service.id;
btn.style.backgroundImage = 'url("images/' + service.id + '.png")'
oauthArea.appendChild(btn);
}
}
$(oauthArea).on('tap', '.oauth-btn', function() {
if (this.classList.contains('disabled')) {
plus.nativeUI.toast('您尚未安装微信客户端');
return;
}
var auth = auths[this.authId];
var waiting = plus.nativeUI.showWaiting();
auth.login(function() {
waiting.close();
plus.nativeUI.toast("登录认证成功");
auth.getUserInfo(function() {
plus.nativeUI.toast("获取用户信息成功");
var name = auth.userInfo.nickname || auth.userInfo.name;
app.createState(name, function() {
toMain();
});
}, function(e) {
plus.nativeUI.toast("获取用户信息失败:" + e.message);
});
}, function(e) {
waiting.close();
plus.nativeUI.toast("登录认证失败:" + e.message);
});
});
}, function(e) {
oauthArea.style.display = 'none';
plus.nativeUI.toast("获取登录认证失败:" + e.message);
});
}
// 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");
var regButton = doc.getElementById('reg');
var forgetButton = doc.getElementById('forgetPassword');
loginButton.addEventListener('tap', function(event) {
var loginInfo = {
account: accountBox.value,
password: passwordBox.value
};
app.login(loginInfo, function(err) {
if (err) {
plus.nativeUI.toast(err);
return;
}
toMain();
});
});
$.enterfocus('#login-form input', function() {
$.trigger(loginButton, 'tap');
});
autoLoginButton.classList[settings.autoLogin ? 'add' : 'remove']('mui-active')
autoLoginButton.addEventListener('toggle', function(event) {
setTimeout(function() {
var isActive = event.detail.isActive;
settings.autoLogin = isActive;
app.setSettings(settings);
}, 50);
}, false);
regButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'reg.html',
id: 'reg',
preload: true,
show: {
aniShow: 'pop-in'
},
styles: {
popGesture: 'hide'
},
waiting: {
autoShow: false
}
});
}, false);
forgetButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'forget_password.html',
id: 'forget_password',
preload: true,
show: {
aniShow: 'pop-in'
},
styles: {
popGesture: 'hide'
},
waiting: {
autoShow: false
}
});
}, false);
//
window.addEventListener('resize', function() {
oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
}, false);
//
var backButtonPress = 0;
$.back = function(event) {
backButtonPress++;
if (backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('再按一次退出应用');
}
setTimeout(function() {
backButtonPress = 0;
}, 1000);
return false;
};
});
}(mui, document));
</script>
登录模板源码分析
源码中首先是读取本地存储的用户登录状态信息,其中app.getSettings()读取用户是否开启自动登录状态,对应上图中的自动登录按钮;app.getState()读取用户上一次登陆时存储在本地的状态。(其中app为引入的app.js,将在下面介绍)
var settings = app.getSettings();
var state = app.getState();
接着检查登录状态/锁屏状态,settings.autoLogin检查自动登录,state.token为用户上一次存储在本地的信息,settings.gestures检查是否启动手势登录。当用户设置自动登录,手势登录,且上一次登录成功,则执行if语句;否则,如果用户设置自动登录,且上一次登录成功,则自动登录,跳转到主页面。(对手势登录感兴趣的同学可以自行阅读源码)
//检查 "登录状态/锁屏状态" 开始
if (settings.autoLogin && state.token && settings.gestures) {
$.openWindow({
url: 'unlock.html',
id: 'unlock',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
} else if (settings.autoLogin && state.token) {
toMain();
}
跳转到主页面的代码如下
var toMain = function() {
//使用定时器的原因:
//可能执行太快,main页面loaded事件尚未触发就执行自定义事件,此时必然会失败
var id = setInterval(function () {
if(main_loaded_flag){
clearInterval(id);
$.fire(mainPage, 'show', null);
mainPage.show("pop-in");
}
},20);
};
用户初次登录,或者没有设置自动登录,则需要用户输入用户名、密码登录。得到用户输入的用户名、密码在app.js中进行校验,校验成功,则执行toMain()跳转到主页面。
//检查 "登录状态/锁屏状态" 结束
var loginButton = doc.getElementById('login');
var accountBox = doc.getElementById('account');
var passwordBox = doc.getElementById('password');
var autoLoginButton = doc.getElementById("autoLogin");
var regButton = doc.getElementById('reg');
var forgetButton = doc.getElementById('forgetPassword');
loginButton.addEventListener('tap', function(event) {
var loginInfo = {
account: accountBox.value,
password: passwordBox.value
};
app.login(loginInfo, function(err) {
if (err) {
plus.nativeUI.toast(err);
return;
}
toMain();
});
});
下面的代码块,将用户是否自动登录存储在本地
autoLoginButton.addEventListener('toggle', function(event) {
setTimeout(function() {
var isActive = event.detail.isActive;
settings.autoLogin = isActive;
app.setSettings(settings);
}, 50);
}, false);
app.js源码分析
这段代码为对用户输入的账号、密码进行校验
/**
* 用户登录
**/
owner.login = function(loginInfo, callback) {
callback = callback || $.noop;
loginInfo = loginInfo || {};
loginInfo.account = loginInfo.account || '';
loginInfo.password = loginInfo.password || '';
if (loginInfo.account.length < 5) {
return callback('账号最短为 5 个字符');
}
if (loginInfo.password.length < 6) {
return callback('密码最短为 6 个字符');
}
var users = JSON.parse(localStorage.getItem('$users') || '[]');
var authed = users.some(function(user) {
return loginInfo.account == user.account && loginInfo.password == user.password;
});
if (authed) {
return owner.createState(loginInfo.account, callback);
} else {
return callback('用户名或密码错误');
}
};
以下代码块用于读取和设置用户存储在本地的登录状态信息
/**
* 获取当前状态
**/
owner.getState = function() {
var stateText = localStorage.getItem('$state') || "{}";
return JSON.parse(stateText); };
/**
* 设置当前状态
**/
owner.setState = function(state) {
state = state || {};
localStorage.setItem('$state', JSON.stringify(state));
//var settings = owner.getSettings();
//settings.gestures = '';
//owner.setSettings(settings);
};
以下代码块用于读取和设置用户应用本地配置,包括上文提到的自动登录信息
/**
* 获取应用本地配置
**/
owner.setSettings = function(settings) {
settings = settings || {};
localStorage.setItem('$settings', JSON.stringify(settings));
}
/**
* 设置应用本地配置
**/
owner.getSettings = function() {
var settingsText = localStorage.getItem('$settings') || "{}";
return JSON.parse(settingsText);
}
如有不对,欢迎留言指正