mui登录模板源码解

登录模板页面样式（该页面包含账户、密码输入栏，具有自动登录功能）

模板的登录核心代码写在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 splashsetTimeout(function() {//关闭 splashplus.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);}

如有不对，欢迎留言指正

mui登录模板源码解相关推荐

各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码
各种风格登录页响应式html5模板 Admin后台管理系统模板手机wap登录页html模板html会员登录页面模板源码70多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码 ...
thinkphp多城市房产系统源码程序_Thinkphp多城市版房产系统模板源码 php开源房产源码+手机版...
Thinkphp多城市版房产系统模板源码 php免费开源房产源码+手机版本套程序的完善修复版已发布->TPfang房产程序源码,有兴趣的朋友可以去下载了哦! 本源码的原名是:开源TPfang房 ...
素材模板源码资源下载站源码-带用户中心和VIP充值系统等
介绍: 多功能素材模板源码资源下载站源码,带用户中心和VIP充值系统,后台管理+素材下载+积分金币下载服务器操作系统用Linux centos 7.2 先安装宝塔,宝塔官网(https://www. ...
超好看倒计时特效单页html模板源码下载
源码介绍: 超好看倒计时特效单页html模板源码下载超好看的苍穹倒计时特效单页HTML模板页面挺简约蛮好看的,可以参考学习一下! 使用简单,将下载源码解压到服务器, 修改主要文件,即可打开使用了. ...
一个比较不错的swapidc模板源码
简介: 模板安装步骤说明 1.下载模板源码 2.打开你上传swapidc源码的主机 3.上传源码压缩包至/templates/文件夹下,没有目标文件夹先创建. 4.解压压缩包,并删除压缩包. 5.回到 ...
emlog模板-蓝叶博客模板源码-清新大气模板，适合做博客和资源一体！亲测
简介: emlog模板-蓝叶博客模板源码这套模板还是挺不错的,挺大气,具体看演示站. 演示地址 http://lanyes.org/ 解压密码:www.dkewl.com@lanyefd ...
html后台管理模板(源码)
文章目录 1.后台管理模板风格1 1.1 界面效果展示 1.1.1 登录界面 1.1.2 主界面 1.1.3 左侧菜单隐藏 1.1.4 右侧功能菜单 1.1.5 顶部隐藏功能 1.1.6 进度条 1. ...
网页成品——手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品
HTML5期末大作业:手表商城网站设计--手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
用php写的亲亲鲜花网站_PHP最新鲜花礼品商城网站整站源码(自适应手机端) 鲜花商城dedecms模板源码...
资源描述 PHP最新鲜花礼品商城网站整站源码(自适应手机端) 鲜花商城dedecms模板源码模板介绍: 织梦最新内核开发的模板,该模板属于鲜花网.鲜花商城类企业都可使用! 这款模板使用范围极广,不仅 ...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课 ...

mui登录模板源码解

登录模板页面样式（该页面包含账户、密码输入栏，具有自动登录功能）

模板的登录核心代码写在login.html页面里

登录模板源码分析

源码中首先是读取本地存储的用户登录状态信息，其中app.getSettings()读取用户是否开启自动登录状态，对应上图中的自动登录按钮；app.getState()读取用户上一次登陆时存储在本地的状态。（其中app为引入的app.js，将在下面介绍）

跳转到主页面的代码如下

用户初次登录，或者没有设置自动登录，则需要用户输入用户名、密码登录。得到用户输入的用户名、密码在app.js中进行校验，校验成功，则执行toMain()跳转到主页面。

下面的代码块，将用户是否自动登录存储在本地

app.js源码分析

这段代码为对用户输入的账号、密码进行校验

以下代码块用于读取和设置用户存储在本地的登录状态信息

以下代码块用于读取和设置用户应用本地配置，包括上文提到的自动登录信息

如有不对，欢迎留言指正

mui登录模板源码解相关推荐

最新文章

热门文章