微信小程序学习笔记--20170425--登录验证实现

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序学习笔记--20170425--登录验证实现相关的知识,希望对你有一定的参考价值。

    初探微信小程序已经有几天的时间,跟随极客学院某某老师(只关注技术未关注老师,还请谅解)。从微信小程序的框架结构及相关内容。下面以登录验证功能模块,展示近期学习的内容。

    需求描述:

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

    实现思路:

        创建全局变量用于存储当前登录用户对象(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.wxml

<!--eapdomain/src/pages/login/login.wxml--><view>
	<text>登录页面</text></view><view>
	<text>用户名</text>
	<input type="text" placeholder="请输入用户名" bindinput="inputClick" id="loginName"></input></view><view>
	<text>密码</text>
	<input type="password" placeholder="请输入密码" bindinput="inputClick" id="passWord"></input></view><view>
	<button type="primary" catchtap="loginClick">登录</button></view>

   

        login.js

// eapdomain/src/pages/login/login.jsvar 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:‘eapdomain/src/pages/pageCreate/pageCreate‘
      // })
      app.data.userInfo={
          loginName:loginName,
          passWord:passWord
        };

      wx.redirectTo({
        url: backUrl
      });    //   wx.redirectTo({
    // //目的页面地址
    //       url: ‘pages/logs/index‘,
    //       success: function(res){},
          
    //   })
    }else{      this.setData({
        loginName:null,
        passWord:null
      });
    }
  }
})

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

        只为实现功能,UI设计还有待提高。还请见谅。


本文出自 “洛山红茶的成长” 博客,请务必保留此出处http://85608547.blog.51cto.com/2093443/1919944

以上是关于微信小程序学习笔记--20170425--登录验证实现的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序-枯木学习笔记3-登录功能

微信小程序-枯木学习笔记4-欢迎页面

微信小程序-枯木学习笔记4-欢迎页面

微信小程序-枯木学习笔记4-欢迎页面

微信小程序学习笔记1

微信小程序的初次认识(手机验证码登录+item列表)