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

👨‍💻 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.jsPage({  /**   * 页面的初始数据   */  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.jsPage({  /**   * 页面的初始数据   */  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() {  }})

🦖运行结果的显示：

结束语🥇

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