微信小程序登录案例

作者:燕歆波

---

导读:昨天早上来的早,闲来无事,就写了微信小程序的登录demo,下面来看一下；

主要步骤

 1. 在wxml中编写布局,输入用户名和输入密码,两个输入框，垂直排列 2. 在两个输入框下面有一个登录按钮,样式自定义 3. 在js中的data中定义两个变量username和password,初始值自定义 4. 给两个输入框监听的方法,不断监听输入的内容并且给username和password赋值 5. 编写登录按钮点击时的方法,我们要获取用户输入的用户名和用户密码，判断信息是否正确,还要设置userInfo,因为登陆成功后，我们直接从userInfo中获取用户信息。 6. 判断用户信息正确后,跳转页面。

编写布局

//container为竖向布局 <view class="container" > //container_col横向布局,存放输入用户名 <view class="container_col">     //输入框前面的提示文字       <text style="text-align:center; margin-right:10px;">用户名:</text>        //输入框       <input bindinput="userName" placeholder="{{username}}" />    </view> //container_col横向布局,存放输入密码    <view class="container_col">       <text style="text-align:center; margin-right:30px;">密码:</text>       <input bindinput="password" password="true"  type="password" placeholder="{{password}}" />    </view>//登录按钮,绑定btnLoginClick方法,实现跳转页面,和信息判断    <button bindtap="btnLoginClick" style="width:95%; height:40px; margin-top:40px;" plain="true" hover-class="button-hover" size="80%" type="primary" form-type="submit">登录</button></view>

监听输入框的改变，不断给变量赋值输入的内容

//定义两个变量用来接收输入的用户名和密码 data: {    。。。,    username:'请输入用户名',    password:'请输入密码'  },//监听方法,输入框已经绑定了监听的方法bindinput,注意为小写,因为还有一个方法是bindInput  userName:function(event){    console.log(event.detail.value)      this.setData({        username: event.detail.value      })  },  password:function(e){    console.log(e.detail.value)    this.setData({      password:e.detail.value    })  },

实现点击按钮登录

btnLoginClick:function(e){    //获取当前已经赋值的用户名和密码    var name = this.data.username;    var pass = this.data.password;    //此处定死了用户名和密码,如果不正确,给出提示    if(name != 'admin' || pass != 111111){        wx.showToast({          title: '不存在此用户',          duration:2000        })    }else{//信息正确弹出检测账户的提示框      wx.showLoading({        title: '检测中',      })      //信息正确,给userInfo赋值      app.globalData.userInfo = { username: this.data.username, password: this.data.password }      //将用户名和密码缓存下来,留着实现不用重复登录        wx.setStorageSync("username",this.data.username)      wx.setStorageSync("password",this.data.password)      //跳转页面,并且关闭当前页面      wx.redirectTo({        url: '../user/user'      })    }  }

这里提一个知识点,就是，navigateTo，redirectTo和navigateBack的区别:

wx.navigateTo(OBJECT)保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。wx.redirectTo(OBJECT)关闭当前页面，跳转到应用内的某个页面。wx.navigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

跳转后,我们在user页面打印出当前的用户名!
首先在js中定义变量username,

 data:{    username:null  },

在加载页面时获取用户信息:

 onLoad:function(options){    if (app.globalData.userInfo == null){       wx.showToast({         title: '获取信息失败',       })    }else{       this.setData({         username: app.globalData.userInfo.username       })    }  }

在页面上显示用户信息：

<view class="container">   <view>{{username}}</view></view>

这样,就实现了登陆跳转!

可是每次刷新，都要重新登陆,所以,我们来解决这个问题，刚才,我们在用户登录时,缓存了用户信息,那么,我们可以再页面加载的时候,判断是否有用户信息,如果有就直接登录,如果没有在登录:
在onLoad方法中实现这些:

   onLoad:function(options){      //获取缓存的信息      var usernames = wx.getStorageSync("username")      var passwords = wx.getStorageSync("password")      //判断用户名是否为null,如果为null,默认显示'请输入用户名'      if(usernames == null){          usernames = '请输入用户名'      }       //判断密码是否为null,如果为null,默认显示'请输入密码'      if(passwords == null){        passwords = '请输入密码'      }      this.setData({        username:usernames,        password:passwords      })    //调用btnLoginClick方法,因为此方法中就是验证用户信息正确和        //       实现登录的代码      this.btnLoginClick()  },