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

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

👨‍💻 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 = thisif(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() {}
})

🦖运行结果的显示：

结束语🥇

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