微信小程序如何实现登陆和注册功能?

  • 开发
  • 20

在这里插入图片描述

👨‍💻个人主页：@开发者-曼亿点

👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍💻 本文由 曼亿点 原创

👨‍💻 收录于专栏：微信小程序开发

⭐🅰⭐

— 请添加图片描述

文章目录

⭐前言⭐

  在当今数字化的时代，微信小程序以其便捷、高效和轻量的特点，成为了人们获取服务和信息的重要途径。而登录和注册功能作为小程序与用户建立连接的关键环节，不仅关乎用户体验，更是保障数据安全和个性化服务的基础。
  实现微信小程序的登录和注册功能，旨在为用户提供一种无缝、流畅的交互方式，让他们能够轻松地进入小程序的世界，享受到专属的服务和内容。通过精心设计的登录和注册流程，我们致力于在保障用户隐私的前提下，准确识别用户身份，为其提供个性化的推荐、定制化的设置以及安全可靠的信息存储。
  无论是新用户初次踏入小程序的大门，还是老用户的再次归来，登录和注册功能都将成为他们与小程序之间信任与便捷的桥梁，为用户开启一段精彩的数字化体验之旅。

🎶一、实现注册界面

  在微信小程序的生态中，注册界面是用户与小程序建立深度关联的起点。它如同一张邀请函，诚挚地邀请用户踏入一个充满可能的数字领域。
  精心构建的注册界面，旨在为用户提供流畅、便捷且安全的注册体验。我们深知，每一位用户的时间都无比珍贵，因此致力于以最简捷的流程、最清晰的指引，让用户能够轻松完成注册，开启个性化的小程序之旅。
  注册界面不仅是用户信息的收集入口，更是传递信任与友好的窗口。通过人性化的设计，我们力求消除用户在注册过程中的疑虑和困惑，为他们营造一个安心、舒适的环境，使其愿意将个人信息托付给我们，从而畅享小程序所提供的独特服务和价值。

(1)logs.wxml

<!--logs.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/zhang.png" class="ph"></image> -->
       <input id='account' placeholder="请输入账号" type="number" bindinput="accountInput"/>
     </view>
     <!-- 密码 -->
     <view class=passwordCs">
       <!-- <image src="/images/mi.png" class="ps"></image> -->
       <input id='pwd' placeholder="请输入密码" type="password" bindinput=passwordInput" />
     </view>
     <!-- 登录按钮 -->
     <view class="denglu" bindtap="login">
       <button class="btn-dl" type="primary" bindtap="goadmin">登录</button>
     </view>
   </view>
 </view>

(2)logs.wxss


.v1{
  display: block;
  position:absolute;
  width: 100%;
  background-color: rgb(243, 227, 227);
}
/* 白色区域 */
.v1 .v2{
  position: relative;
  margin-top: 150rpx;
  left: 100rpx; 
  width: 545rpx;
  height: 600rpx;
  background-color: rgb(230, 198, 198);
  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:480rpx ;
  height: 90rpx ;
  background-color: white;
  
}
/* 手机图标 */
.v1 .v2 .phoneCs .ph{
  margin-top: 5rpx;
  margin-left: 30rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 手机号输入框 */
.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:480rpx ;
  height: 90rpx ;
  background-color:white;

}
/* 密码图标 */
.v1 .v2 .passwordCs .ps{
  margin-top: 5rpx;
  margin-left: 30rpx;
  width: 55rpx;
  height: 55rpx;
}
/* 眼睛 图标*/
.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: 480rpx;
  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: 5rpx;
}

(3)logs.js

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


  /**
   * 页面的初始数据
   */
  data: {
      account:'',
      password:''
  },


  accountInput:function (e) {
      this.data.account = e.detail.value
  },


  passwordInput:function (e) {
      this.data.password = e.detail.value
  },


  regist:function (e) {
      wx.navigateTo({
        url: '../enroll/enroll',
      })
  },


  goadmin:function (e) {
      var that = this
      if(that.data.account==''){
          wx.showModal({
            title:"提示",
            content:"请输入用户名/邮箱/手机号",
            showCancel:false,
            success(res){}
            })
      }else if(that.data.password==''){
          wx.showModal({
              title:"提示",
              content:"请输入密码",
              showCancel:false,
              success(res){}
              })
      }else{
        if (that.data.account=='123456'&&that.data.password=='123456') {
          wx.reLaunch({
            url: '/pages/index/index',
          })
        }else{
          wx.showModal({
            title:"提示",
            content:"账号或密码错误,请动动脑袋自行检查",
            showCancel:false,
            success(res){}
            })
        }
      }
  },


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


  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {


  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {


  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {


  },


  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {


  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {


  },


  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {


  },


  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {


  }
})

🦖 运行结果的显示：
在这里插入图片描述

🎶 二、实现登陆页面

  在微信小程序的架构中，登录界面是用户与小程序交互的首要关卡，也是建立信任和个性化服务的起点。它犹如一扇通往精彩数字世界的大门，精心设计的登录界面不仅能为用户带来便捷、高效的登录体验，更是保障用户信息安全和隐私保护的重要防线。
  我们致力于打造一个简洁明了、易于操作的登录界面，让用户在瞬间完成身份验证，无缝融入小程序所提供的丰富功能与服务之中。通过巧妙的布局、清晰的引导和友好的交互设计，无论是新用户的初次邂逅，还是老用户的日常回归，都能感受到我们对用户体验的极致追求。
  这个登录界面不仅仅是一个技术实现，更是我们对用户需求的深度理解和尊重的体现，是开启用户与小程序之间紧密连接和愉快互动的关键钥匙。

(1)user.wxml

<!--pages/users/users.wxml-->
<view class="top-box">
  <view>Hi</view>
  <view class="next-text">欢迎使用！</view>
</view>
<!-- 登录、注册 -->
<view class="center-box">
  <view class="nav">
    <view class="left {{current==1?'select':''}}" bindtap="click" data-code="1">
      <text>登录</text>
    </view>
    <view class="right {{current==0?'select':''}}" bindtap="click" data-code="0">
      <text>注册</text>
    </view>
  </view>
  <!-- 登录 -->
  <view class="input-box" hidden="{{current==0}}">
    <view class="wei-input">
      <icon type="waiting" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="请输入手机号/登录名"/>
    </view>
    <view class="wei-input">
      <icon type="success" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="请输入登录密码"/>
    </view>
    <view class="forget">
      <text>忘记密码</text>
    </view>
  </view>
  <!-- 注册 -->
  <view class="input-box" hidden="{{current==1}}">
    <view class="wei-input">
      <icon type="waiting" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="请输入手机号"/>
    </view>
    <view class="wei-input">
      <icon type="waiting" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="请输入6位验证码"/>
      <text class="input-code" bindtap="getCode">{{codeText}}</text>
    </view>
    <view class="wei-input">
      <icon type="success" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="请输入密码"/>
    </view>
    <view class="wei-input">
      <icon type="success" color="#44ADFB" size="16"></icon>
      <input class="input" auto-focus placeholder="请确认密码"/>
    </view>
  </view>
  <view class="sumbit-btn" >
    <button class="button" 
    style="background-color:#FF0000;font-size: 30rpx;" 
    type="primary">立即{{current==1?'登录':'注册'}}</button>
  </view>
</view>
<!-- 重影 -->
<view class="shadow shadow-1"></view><view class="shadow shadow-2"></view>
<!-- 说明 -->
<view class="bottom-box">
</view>

(2)user.wxss

/* pages/users/users.wxss */
page{
  height: 100%;
  background-color: white;
  margin: 0px;
  padding: 0px;
}
/* 顶部背景 */
.top-box{
  height: 30%;
  background: #FF0000;
  padding: 30rpx;
  color: white;
  font-weight: bold;
}
.next-text{
  margin-top: 15rpx;
}
/* 内容 */
.center-box{
  background-color: white;
  margin: -20% 20rpx 0rpx 20rpx;
  padding: 25rpx;
  border-radius: 15rpx;
  -webkit-filter: drop-shadow(0 0 8rpx #FF0000);
  filter: drop-shadow(0 0 8rpx #FF0000);
}
/* 导航 */
.nav{
  display: flex;
  text-align: center;
  font-size: 32rpx;
  margin-bottom: 8%;
}
.left{
  flex: 1;
  font-weight: bold;
}
.right{
  flex: 1;
  font-weight: bold;
}
.select{
  font-weight: bold;
  color: #33ccff;
}
.select text{
  padding-bottom: 5rpx;
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
  border-bottom: 5rpx solid #33ccff;
}
.wei-input{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f1f1f1;
}
.input-box{
  margin: 20rpx;
}
.input{
  padding-left: 20rpx;
  font-size: 30rpx;
}
.input-code{
  position: absolute;
  right: 40rpx;
  font-size: 26rpx;
  padding: 10rpx 15rpx;
  color: white;
  background-color: #FF0000;
  border-radius: 10rpx;
}
.forget{
  font-size: 26rpx;
  color: #FF0000;
  margin-top: 20rpx;
  text-align: right;
}
.sumbit-btn{
  margin: 6% 30rpx 30rpx 30rpx;
}
/* 重影 */
.shadow{
  box-shadow: 0rpx 0rpx 10rpx 0rpx #FF0000;
  border-radius: 25rpx;
  background-color: white;
}
.shadow-1{
  height: 40rpx;
  margin: -20rpx 50rpx 0 50rpx;
}
.shadow-2{
  position: relative;
  z-index: -888;
  height: 50rpx;
  margin: -30rpx 80rpx 0 80rpx;
}
/* 最底部 */
.bottom-box{
  position:fixed; 
  bottom: 10rpx;
  width:100%;
  font-size: 24rpx;
  color: gray;
  display: flex;
  justify-content: center;
}

(3)user.js

// pages/users/users.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    current:1,
    codeText:'获取验证码',
    counting:false,
  },
  // 登陆注册监听
  click(e){
    let index = e.currentTarget.dataset.code;
    this.setData({
      current:index
    })
  },
  //获取验证码 
  getCode(){
    var that = this;
    if (!that.data.counting) {
      wx.showToast({
        title: '验证码已发送',
      })
      //开始倒计时60秒
      that.countDown(that, 60);
    } 
  },
  //倒计时60秒
  countDown(that,count){
    if (count == 0) {
      that.setData({
        codeText: '获取验证码',
        counting:false
      })
      return;
    }
    that.setData({
      counting:true,
      codeText: count + '秒后重新获取',
    })
    setTimeout(function(){
      count--;
      that.countDown(that, count);
    }, 1000);
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

🦖运行结果的显示：
在这里插入图片描述

结束语🥇

以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
请添加图片描述

阅读全部

相关推荐

  2. 微信小程序实现一个简单的登录功能

    2024-07-14 12:38:04       52 阅读

  5. 微信小程序如何实现扫码一键连WiFi功能

    2024-07-14 12:38:04       36 阅读

  6. 如何为微信小程序添加地理位置标记和地点搜索功能

    2024-07-14 12:38:04       29 阅读

  7. 如何为微信小程序添加人脸识别和身份验证功能

    2024-07-14 12:38:04       32 阅读

  10. 微信小程序实现图片下载与保存功能

    2024-07-14 12:38:04       144 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-14 12:38:04       66 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-14 12:38:04       70 阅读

  9. 在Django里面运行非项目文件

    2024-07-14 12:38:04       57 阅读

  19. Python语言-面向对象

    2024-07-14 12:38:04       68 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-07-14 12:38:04       62 阅读

热门阅读

  1. Dubbo 的集群容错机制

    2024-07-14 12:38:04       19 阅读

  4. c++【入门】捡石头

    2024-07-14 12:38:04       20 阅读

  6. 详解 QAxObject

    2024-07-14 12:38:04       11 阅读

  10. windos安装qemu启动树莓派2b连接网卡和openssh-server

    2024-07-14 12:38:04       19 阅读

  11. ARM/Linux嵌入式面经（十五）：中科曙光

    2024-07-14 12:38:04       20 阅读

  12. C++ 中的返回值优化

    2024-07-14 12:38:04       20 阅读

  14. 2024/7/14 英语每日一段

    2024-07-14 12:38:04       20 阅读

  22. Python爬虫教程第一篇

    2024-07-14 12:38:04       24 阅读

  24. 使用druid对sql进行血缘解析

    2024-07-14 12:38:04       24 阅读

  26. Spring Boot项目的控制器貌似只能get不能post问题

    2024-07-14 12:38:04       32 阅读

  27. Django是干什么的？好用么？

    2024-07-14 12:38:04       25 阅读

  28. HTTPS 加密流程全解析

    2024-07-14 12:38:04       26 阅读

  30. 汽车工程师（DRE）-主从式网络管理与Autosar网络管理简要理解

    2024-07-14 12:38:04       23 阅读