登录模板页面样式（此页面包含账号和密码输入栏，具有自动登录功能）
模板的登录核心代码写在login.html页面中
(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));
登录模板源码分析源码首先读取本地存储的用户登录状态信息。 App.getSettings()读取用户是否开启自动登录状态，对应上图中的自动登录按钮； app.getState() 读取用户上次登录时本地存储的状态。 （其中app是导入的app.js，下面会介绍）
var settings = app.getSettings();
var state = app.getState();
然后检查登录状态/锁屏状态，settings.autoLogin检查自动登录h5登录界面模板，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);
}
如果有什么不对的地方h5登录界面模板，欢迎留言指正。