微信小程序登录案例

作者:燕歆波

导读:昨天早上来的早,闲来无事,就写了微信小程序的登录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()
  },

微信小程序登录案例

猜你喜欢