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

曼亿点2024-07-14 13:36

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

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

👨‍💻 本文由 曼亿点 原创

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

⭐🅰⭐

---

文章目录

⭐前言⭐

在当今数字化的时代，微信小程序以其便捷、高效和轻量的特点，成为了人们获取服务和信息的重要途径。而登录和注册功能作为小程序与用户建立连接的关键环节，不仅关乎用户体验，更是保障数据安全和个性化服务的基础。

实现微信小程序的登录和注册功能，旨在为用户提供一种无缝、流畅的交互方式，让他们能够轻松地进入小程序的世界，享受到专属的服务和内容。通过精心设计的登录和注册流程，我们致力于在保障用户隐私的前提下，准确识别用户身份，为其提供个性化的推荐、定制化的设置以及安全可靠的信息存储。

无论是新用户初次踏入小程序的大门，还是老用户的再次归来，登录和注册功能都将成为他们与小程序之间信任与便捷的桥梁，为用户开启一段精彩的数字化体验之旅。

🎶一、实现注册界面

在微信小程序的生态中，注册界面是用户与小程序建立深度关联的起点。它如同一张邀请函，诚挚地邀请用户踏入一个充满可能的数字领域。

精心构建的注册界面，旨在为用户提供流畅、便捷且安全的注册体验。我们深知，每一位用户的时间都无比珍贵，因此致力于以最简捷的流程、最清晰的指引，让用户能够轻松完成注册，开启个性化的小程序之旅。

注册界面不仅是用户信息的收集入口，更是传递信任与友好的窗口。通过人性化的设计，我们力求消除用户在注册过程中的疑虑和困惑，为他们营造一个安心、舒适的环境，使其愿意将个人信息托付给我们，从而畅享小程序所提供的独特服务和价值。

(1)logs.wxml

javascript 复制代码 
<!--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

javascript 复制代码 
.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

javascript 复制代码 
// 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

javascript 复制代码 
<!--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

javascript 复制代码 
/* 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

javascript 复制代码 
// 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() {

  }
})

🦖运行结果的显示：

结束语🥇

以上就是微信小程序之列表渲染

持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序

你们的支持就是曼亿点创作的动力💖💖💖

相关推荐
待3 小时前
躺平成长-代码开发，利用kimi开发小程序（09）
小程序
待6 小时前
微信小程序运营日记（第四天）
微信小程序·小程序
guanpinkeji6 小时前
旧衣回收小程序：提高回收效率，扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
说私域8 小时前
完美日记营销模式对开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序的启示
人工智能·小程序
qq22951165028 小时前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
说私域8 小时前
传统媒体终端移动化发展新趋势：融合开源 AI 智能名片与 S2B2C 商城小程序的创新探索
人工智能·小程序·零售
DK七七8 小时前
当今陪玩系统小程序趋势，陪玩系统源码搭建后的适用于哪些平台
小程序·php·uniapp
程序员入门进阶10 小时前
基于微信的追星小程序+ssm(lw+演示+源码+运行）
微信·小程序
YMZN9116 小时前
基于SSM+微信小程序的订餐管理系统（点餐2）
小程序
一只不会编程的猫18 小时前
微信小程序配置
微信小程序·小程序
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）05红米手机使用google play06【经验分享】Ubuntu22.04安装微信(linux官方版)07【AIGC】重塑未来的科技巨轮08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09RAG 实践- Ollama+RagFlow 部署本地知识库10Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO