微信小程序简洁登录页面和注册页面（附源码）

hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

🦁作者简介：一名喜欢分享和记录学习的在校大学生
💥个人主页：code袁的博客
💥 个人QQ：2647996100
🐯 个人wechat：code8896
code袁系列专栏导航
1.《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.《微信小程序开发》本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.《vue开发系列全程线路》本专栏分享自己的vue的学习历程。

非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨ 

1.登录页面

1.1 登录流程

登录的具体流程
1.当用户输入密码和账号后首先检验账号和密码是否为空
2.若不为空，则将输入的账号发送到后端，首先判断账号是否存在
3.若账号存在，则开始判断对应的密码是否正确。
4.若账号和密码都正确则显示登录成功。

1.2 代码

1.2.1 login.wxml

<view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">
 
 <!-- v2父容器  子view使用绝对布局 -->
   <view class="v2">
     <view class="dltext" style="width: 232rpx; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">登录</view>
  
     <!-- 手机号 -->
     <view class="phoneCs">
       <image src="../../images/account.png" class="ph"></image>
       <input placeholder="请输入账号" type="number" bindinput="phone" />
     </view>
     <!-- 密码 -->
     <view class=passwordCs">
       <image src="../../images/password.png" class="ps"></image>
       <input placeholder="请输入密码" type="password" bindinput="password" />
     </view>
     <!-- 登录按钮 -->
     <view class="denglu">
       <button class="btn-dl" type="primary" bindtap="goadmin">登录</button>
       <view class="register" bindtap="register">
         去注册
     </view>
     </view>
   </view>
 </view>
  

  

1.2.2 login.css

/* pages/login/login.wxss *//* 最大的父元素 */
.v1{
  display: block;
  position:absolute;
  width: 100%;
  background-color: white;
}
/* 白色区域 */
.v1 .v2{
  position: relative;
  margin-top: 150rpx;
  left: 50rpx; 
  width: 545rpx;
  height: 600rpx;
  background-color: white;
  border-radius: 50rpx;
}
/* 白色区域内的登录文本 */
.v1 .v2 .dltext{
  margin-top: 50rpx;
  position: absolute;
  margin-left:50rpx;
  width: 150rpx;
  height: 100rpx;
  font-size: 60rpx;
  font-family: Helvetica;
  color: #000000;
  line-height: 100rpx;
  letter-spacing: 2rpx;
}
/* 手机图片+输入框+下划线的父容器view */
.v1 .v2 .phoneCs{
  margin-top: 200rpx;
  margin-left: 25rpx;
  position: absolute;
  display: flex;
  width:600rpx ;
  height: 90rpx ;
  background-color: rgb(250, 248, 248);
  border-radius: 50rpx;
  
}
/* 手机图标 */
.v1 .v2 .phoneCs .ph{
  margin-top: 20rpx;
  margin-left: 30rpx;
  width: 45rpx;
  height: 45rpx;
}
/* 手机号输入框 */
.v1 .v2 .phoneCs input{
  width: 400rpx;
  font-size: 30rpx ;
  margin-top: 25rpx;
  margin-left: 30rpx;
}
/* 密码图标+输入框+小眼睛图标+下划线父容器view */
.v1 .v2 .passwordCs{
  margin-top: 350rpx;
  margin-left: 25rpx;
  position: absolute;
  display: flex;
  width:600rpx ;
  height: 90rpx ;
  border-radius: 50rpx;
  background-color: rgb(250, 248, 248);

}
/* 密码图标 */
.v1 .v2 .passwordCs .ps{
  margin-top: 20rpx;
  margin-left: 30rpx;
  width: 50rpx;
  height: 50rpx;
}
/* 眼睛 图标*/
.v1 .v2 .passwordCs .eye{
  margin-top: 10rpx;
  margin-left: 65rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 密码输入框 */
.v1 .v2 .passwordCs input{
  width: 400rpx;
  font-size: 30rpx ;
  margin-top: 25rpx;
  margin-left: 30rpx;
}
/* 登录按钮容器view */
.v1 .v2 .denglu{
  width: 600rpx;
  height: 80rpx;
  position: absolute;
  margin-top:515rpx;
  margin-left:25rpx;
  
}
/* 登录按钮 */
.v1 .v2 .denglu button{
  padding: 0rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  width: 100%;
  height: 100%;
  border-radius: 50rpx;
}
.register{
  margin: 10rpx 0;
  color: rgb(84, 206, 247);
}

1.2.3 login.js

//index.js
//获取应用实例
const app = getApp()
 let username=''
 let password=''
Page({
  data: {
    username: '',
    password: '',
    clientHeight:''
  },
  onLoad(){
    var that=this
    wx.getSystemInfo({ 
      success: function (res) { 
        console.log(res.windowHeight)
          that.setData({ 
              clientHeight:res.windowHeight
        }); 
      } 
    }) 
  },
  //协议
  goxieyi(){
   wx.navigateTo({
     url: '/pages/oppoint/oppoint',
   })
  },
  //获取输入款内容
  content(e){
    username=e.detail.value
  },
  password(e){
    password=e.detail.value
  },
  //登录事件
  goadmin(){
    let flag = false  //表示账户是否存在,false为初始值
    if(username=='')
    {
      wx.showToast({
        icon:'none',
        title: '账号不能为空',
      })
    }else if(password==''){
      wx.showToast({
        icon:'none',
        title: '密码不能为空',
      })
    }else{
      wx.cloud.database().collection('adminShop')
      .get({
        success:(res)=>{
          console.log(res.data)
          let admin=res.data
          for (let i = 0; i < admin.length; i++) {  //遍历数据库对象集合
            if (username === admin[i].username) { //账户已存在
              flag=true;
              if (password !== admin[i].password) {  //判断密码正确与否
                wx.showToast({  //显示密码错误信息
                  title: '密码错误！！',
                  icon: 'error',
                  duration: 2500
                });
               break;
              } else {
                wx.showToast({  //显示登录成功信息
                  title: '登陆成功！！',
                  icon: 'success',
                  duration: 2500
                })
                flag=true;
                wx.setStorageSync('admin', password)
               wx.navigateTo({
                 url: '/pages/admin/admin',
               })
                break;
              }
            }
          };
          if(flag==false)//遍历完数据后发现没有该账户
          {
            wx.showToast({
              title: '该用户不存在',
              icon: 'error',
              duration: 2500
            })
          }
        }
      })
    }
  },
})
 

2.注册页面

2.1 注册流程

1.当用户未输入手机号时，点击注册会提醒用户未输入手机号。
2.当用户输入手机号后js中会通过正则校验检验用户输入的手机号是否合法。
3.当用户发送验证码后会给后台传入用户的手机号通过短信平台给用户发送短信验证码。
4.当用户输入的验证码和后端传过来的验证码不一致时。会提醒用户输入的验证码不正确。
5.只用当用户的输入的验证码不为空且正确的情况下会将用户的手机发送给后端进行近一步的操作。

1.2 代码

2.2.1 register.wxml

<view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">
 
 <!-- v2父容器  子view使用绝对布局 -->
   <view class="v2">
     <view class="dltext" style="width: 232rpx; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">注册</view>
  
     <!-- 手机号 -->
     <view class="phoneCs">
       <image src="../../images/account.png" class="ph"></image>
       <input placeholder="请输入账号" type="number" bindinput="phone" />
     </view>
     <!-- 密码 -->
     <view class=passwordCs">
       <image src="../../images/password.png" class="ps"></image>
       <input placeholder="请输入验证码"  bindinput="code" />
       <view class="code" bindtap="sendCode">发送验证码</view>
     </view>
     <!-- 登录按钮 -->
     <view class="denglu">
       <button class="btn-dl" type="primary" bindtap="goadmin">注册</button>
     </view>
   </view>
 </view>
  

2.2.2 register.css

/* pages/login/login.wxss *//* 最大的父元素 */
.v1{
  display: block;
  position:absolute;
  width: 100%;
  background-color: white;
}
/* 白色区域 */
.v1 .v2{
  position: relative;
  margin-top: 150rpx;
  left: 50rpx; 
  width: 545rpx;
  height: 600rpx;
  background-color: white;
  border-radius: 50rpx;
}
/* 白色区域内的登录文本 */
.v1 .v2 .dltext{
  margin-top: 50rpx;
  position: absolute;
  margin-left:50rpx;
  width: 150rpx;
  height: 100rpx;
  font-size: 60rpx;
  font-family: Helvetica;
  color: #000000;
  line-height: 100rpx;
  letter-spacing: 2rpx;
}
/* 手机图片+输入框+下划线的父容器view */
.v1 .v2 .phoneCs{
  margin-top: 200rpx;
  margin-left: 25rpx;
  position: absolute;
  display: flex;
  width:600rpx ;
  height: 90rpx ;
  background-color: rgb(250, 248, 248);
  border-radius: 50rpx;

  
}
/* 手机图标 */
.v1 .v2 .phoneCs .ph{
  margin-top: 20rpx;
  margin-left: 30rpx;
  width: 45rpx;
  height: 45rpx;
}
/* 手机号输入框 */
.v1 .v2 .phoneCs input{
  width: 600rpx;
  font-size: 30rpx ;
  margin-top: 25rpx;
  margin-left: 30rpx;
}
/* 密码图标+输入框+小眼睛图标+下划线父容器view */
.v1 .v2 .passwordCs{
  margin-top: 350rpx;
  margin-left: 25rpx;
  position: absolute;
  display: flex;
  width:600rpx ;
  height: 90rpx ;
  background-color: rgb(250, 248, 248);
  border-radius: 50rpx;

}
.v1 .v2 .code{
  width: 200rpx;
  line-height: 90rpx;
  margin: 0 auto;
}
/* 密码图标 */
.v1 .v2 .passwordCs .ps{
  margin-top: 20rpx;
  margin-left: 30rpx;
  width: 55rpx;
  height: 50rpx;
}
/* 眼睛 图标*/
.v1 .v2 .passwordCs .eye{
  margin-top: 5rpx;
  margin-left: 65rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 密码输入框 */
.v1 .v2 .passwordCs input{
  width: 400rpx;
  font-size: 30rpx ;
  margin-top: 25rpx;
  margin-left: 30rpx;
}
/* 登录按钮容器view */
.v1 .v2 .denglu{
  width: 600rpx;
  height: 80rpx;
  position: absolute;
  margin-top:515rpx;
  margin-left:25rpx;
}
/* 登录按钮 */
.v1 .v2 .denglu button{
  padding: 0rpx;
  line-height: 70rpx;
  font-size: 30rpx;
  width: 100%;
  height: 100%;
  border-radius: 50rpx;
}

2.2.3 register.js

// pages/login/register.js
const {code,addUser} =require('../../api/login')
Page({

  /**
   * 页面的初始数据
   */
  data: {
  phone:'',
  code:'',
  code1:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  phone(e){
    this.setData({
      phone:e.detail.value
    })
  },
  code(e){
    this.setData({
      code1:e.detail.value
    })
  },

  sendCode(){
    if(this.data.phone!=''){
      //发送验证码
      let phone={
        phone:this.data.phone
      }
     code(phone).then(res=>{
      this.setData({
        code:res.data
      })
     })
    }else{
      wx.showToast({
        title: '手机号不能为空',
        icon:'none'
      })
    }
  },
  goadmin(){
    if(this.data.phone==''){
      wx.showToast({
        title: '手机号不能为空呀',
        icon:'none'
      })
    }else if(this.data.code!=this.data.code1){
      wx.showToast({
        title: '验证码错误',
        icon:'none'
      })
    }else{
      //添加用户
      let phone={
        phone:this.data.phone
      }
      addUser(phone).then(res=>{
        console.log(res)
        wx.showToast({
          title: '注册成功',
          icon:'none'
        })
        wx.navigateTo({
          url: '../login/login',
        })
      })
 
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */

注：用到的图标

3.总结

小程序的页面的简洁可以给用户带来很好的体验。
当用户在输入信息后逻辑层通过for循环来遍历数据库的中数据。
好了，今天的分享就到这里了。点个赞吧

4.课设 / 毕设案例

1.基于微信小程序的图书馆预约系统的设计与实现
2.基于微信小程序的实验室预约系统的设计与开发
3.基于微信小程序的番茄时钟的设计与实现（课设&毕设）
4.基于微信小程序的自习室预约系统的设计与实现
5.基于Uni-app的体育场馆预约系统的设计与实现
6.基于微信小程序的在线答题小程序设计与实现

🎉写在最后

🍻伙伴们，如果你已经看到了这里，觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦！手动码字，如有错误，欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~