微信小程序登录页验证与页面跳转

微信小程序登录页实现验证登录和页面跳转

利用js实现验证登录和页面跳转，开发工具是微信开发者工具。

正文之前，本人发出加更挑战，本文点赞破20马上加更登录验证与页面跳转的plus版本（连接数据库哦）老铁们加油哈

wxml部分

登录页面的代码，需要再创建一个主页。

<view class="welcome">
<p>欢迎使用智能门禁系统</p>
</view>

<view class='login_block' >
  <view><span class="iconfont icon-geren"></span><input type='text' placeholder="请输入宿舍号" bindinput='inputUsr' class='input'></input></view>
  <view><span class="iconfont icon-mima1"></span><input password='true' placeholder="请输入通行密码" bindinput='inputPwd'class='input'></input></view>
  <button type='primary' bindtap='confirmPwd' class="confirm">确定</button>

</view>

wxss部分

页面的修饰部分，相当于css.

/* pages/login/index.wxss */
page{
    background-color: rgb(97, 145, 248);
  }
  
  .login_block{
    position: absolute;
    left: 0;right: 0;top: 0;bottom: 0;
    display:flex;
    justify-content: center;
    flex-direction: column;
  
    width: 86vw;
    height: 50vh;
    background-color: white;
    margin: auto;
    padding: 3vh 3vh;
    border: 1px solid rgb(202, 201, 201);
    border-radius: 20px;
  }
  
  .login_block .input{
      border:none;
      border-bottom: 1px solid #000000;
      margin: 2vh 2vh;
  }
  .login_block .confirm{
      height: 8vh;
      width:40vw;
      line-height: 8vh;
      margin-top: 4vh;
      background-color: rgb(123, 177, 177);
  
  }
  .welcome{
      display: flex;
      color: azure;
      justify-content: center;
      margin-top: 5vh;
  }

js部分

先设定账号为admin,密码为passsword,再利用if条件判断。
页面跳转的实现部分：

	wx.navigateTo({
	//url部分是页面的地址
        url: '../index/index',
      })

// pages/login/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        password_input:"",
        usr:"admin",
        key:"password",
    },
      inputUsr:function(e){
    this.setData({
        user_input: e.detail.value
      })
  },
  inputPwd:function(e){
    this.setData({
      password_input: e.detail.value
    })
  },

  confirmPwd:function(){
    var usr = this.data.user_input;
    var pwd = this.data.password_input;
    var that = this
    if(pwd==""||usr==""){
        wx.showToast({
          title: '请输入账号和密码',
          icon: 'none',
          duration: 2000
        })
    }
    else if(pwd != this.data.key||usr != this.data.usr){
      wx.showToast({
        title: '账号或密码错误',
        icon: 'none',
        duration: 2000
      })
    }else{
      wx.showToast({
        title: '验证通过',
        icon: 'success',
        duration: 2000
      })
      wx.setStorage({
        key: "password",
        data: pwd,
      })
      wx.navigateTo({
        url: '../index/index',
      })
    }
  }



})

新人上路，各位老铁觉有用给个赞。