黔优媒体网-软文媒体自助发稿平台!
  1. 行业资讯
  2. 正文

微信小程序开发登录验证功能

来源:黔优媒体网   时间:2024-09-19

本篇文章介绍了微信小程序开发登录验证功能的方法,希望对学习小程序开发的朋友有帮助!

微信小程序开发登录验证功能

需求描述:

对于部分页面添加登录验证,用户未登录的情况下,进入页面,页面自动转向登录页面。登录验证成功后,回调到登录发起页面。

推荐学习:小程序开发

实现思路:

创建全局变量用于存储当前登录用户对象(userInfo)、全局方法用于验证登录有效性(checkLoginInfo())、全局方法用于获取当前页面的全路径(getCurrentUrl())。

针对需要添加登录限制的页面page.onLoad事件,调用checkLoginInfo()方法,判断当前登录状态。如未登录,页面转向登录页面。

登录验证通过后,将登录信息存储到全局变量userInfo,跳转回登录发起页面。

关键代码及注意事项:

app.js

data:{
 userInfo:null,//用户登录存储对象
 loginUrl:../login/login,
checkLoginInfo:function(url){//验证登录状态
 if(this.data.userInfo==null){
 return url;
 }else{
 return ;
getCurrentUrl:function(){//获取当前页面全路径
 var url=getCurrentPages()[getCurrentPages().length-1].__route__;
 url=url.replace(eapdomain/src/pages,..);//替换路径全路径。修改该路径为相对路径
 return url;
}

注意:在getCurrentUrl方法中,最后返回url时,又调用了replace方法。因为wx.redirectTo的url参数要求为相对路径。所以在这里转换了一下。

login.js

var app=getApp();
Page({
 data:{
 backUrl:null,
 loginName:null,
 passWord:null
 onLoad:function(options){
 this.setData({
 backUrl:null
 // 页面初始化 options为页面跳转所带来的参数
 //console.log(options.backUrl);
 this.setData({
 backUrl:options.backUrl
 inputClick:function(event){
 //动态 对 paga.data 进行赋值
 //id与 数据项 一一对应
 var objId=event.currentTarget.id;
 var paraObj={};
 paraObj[objId]=event.detail.value;
 this.setData(paraObj);
 //console.log(event.currentTarget.id);
 //console.log(this.data);
 onReady:function(){
 // 页面渲染完成
 onShow:function(){
 // 页面显示
 onHide:function(){
 // 页面隐藏
 onUnload:function(){
 // 页面关闭
 loginClick:function(){
 var loginName=this.data.loginName;
 var passWord=this.data.passWord;
 if(loginName!=null passWord!=null){
 var backUrl=this.data.backUrl;
 // wx.redirectTo({
 // url:\ #39;eapdomain/src/pages/pageCreate/pageCreate\ #39;
 // })
 app.data.userInfo={
 loginName:loginName,
 passWord:passWord
 wx.redirectTo({
 url: backUrl
 // wx.redirectTo({
 // //目的页面地址
 // url: \ #39;pages/logs/index\ #39;,
 // success: function(res){},
 // })
 }else{
 this.setData({
 loginName:null,
 passWord:null
})

这里inputClick事件。根据前台控件id为page.data数据进行赋值。

PHP中文网,大量thinkphp教程,欢迎学习!

以上就是微信小程序开发登录验证功能的详细内容,更多请关注php中文网其它相关文章!

微信app下载

微信是一款手机通信软件,支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊,还能根据地理位置找到附近的人,带给大家全新的移动沟通体验,有需要的小伙伴快来保存下载体验吧!


【免责申明】黔优媒体网以上展示内容来源于用户自主上传、合作媒体、企业机构或网络收集整理,版权争议与本站无关,文章涉及见解与观点不代表黔优媒体网官方立场,请读者仅做参考,本文标题:微信小程序开发登录验证功能;欢迎转载,转载时请说明出处。若您认为本文侵犯了您的版权信息,或您发现该内容有任何违法/违规的内容,请您立即联系我们及时修正或删除。(邮箱号: kefu@qianu.com)
此操作需要登录,请先登录~
免费注册会员,尽享国内领先平台!