阅读量:2
👨💻个人主页：@开发者-曼亿点
👨💻 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() { } }) 🦖运行结果的显示：
结束语🥇
以上就是微信小程序之列表渲染
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是曼亿点创作的动力💖💖💖
