鸿蒙OS&UniApp 实现精美的用户登录和注册页面#三方框架 #Uniapp

UniApp 实现精美的用户登录和注册页面

媒介

在开辟鸿蒙APP时，登录注册页面作为用户与应用交互的第一道门槛，其体验与质量往往决定了用户的第一印象。客岁我接手了一个电商小程序项目，产物司理特别强调要做一个既雅观又实用的登录注册页面。经过一番摸索和实践，我用UniApp实现了一套完整的登录注册流程，今天就把这个过程分享给各人。
设计思路

一个好的登录注册页面应该具备以下特点：

• 简洁雅观 - 视觉上吸引用户
  
• 交互流畅 - 包括动画过渡、表单验证反馈等
  
• 功能完整 - 常规登录、手机验证码登录、第三方登录等
  
• 兼容适配 - 适应不同设备尺寸
  

基于这些思量，我采用了卡片式设计、渐变色背景，并加入适当的动效，让整个页面既现代又不失实用性。
页面结构

我们的登录注册体系包罗三个主要页面：

• 登录页面 - 支持账号密码登录和手机验证码登录
  
• 注册页面 - 新用户注册表单
  
• 忘记密码页面 - 用于密码找回
  

下面我们逐一实现这些页面。
登录页面实现

首先来看登录页面的结构代码：

1. <template>
2.   <view class="login-container">
3.     <!-- 背景 -->
4.     <view class="bg-wrapper">
5.       <image class="bg-image" src="/static/images/login-bg.jpg" mode="aspectFill"></image>
6.       <view class="bg-mask"></view>
7.     </view>
8.    
9.     <!-- 顶部Logo -->
10.     <view class="logo-box">
11.       <image class="logo" src="/static/images/logo.png" mode="widthFix"></image>
12.       <text class="slogan">探索移动应用的无限可能</text>
13.     </view>
14.    
15.     <!-- 登录表单 -->
16.     <view class="login-form">
17.       <view class="tab-header">
18.         <view
19.           class="tab-item"
20.           :class="{ active: loginType === 'password' }"
21.           @tap="switchLoginType('password')"
22.         >
23.           账号登录
24.         </view>
25.         <view
26.           class="tab-item"
27.           :class="{ active: loginType === 'sms' }"
28.           @tap="switchLoginType('sms')"
29.         >
30.           短信登录
31.         </view>
32.         <view class="tab-line" :style="tabLineStyle"></view>
33.       </view>
34.       
35.       <!-- 账号密码登录 -->
36.       <view v-if="loginType === 'password'" class="form-content">
37.         <view class="input-item">
38.           <uni-icons type="person" size="20" color="#999"></uni-icons>
39.           <input
40.             class="input"
41.             type="text"
42.             placeholder="请输入账号/手机号"
43.             v-model="account"
44.           />
45.         </view>
46.         <view class="input-item">
47.           <uni-icons type="locked" size="20" color="#999"></uni-icons>
48.           <input
49.             class="input"
50.             :type="showPassword ? 'text' : 'password'"
51.             placeholder="请输入密码"
52.             v-model="password"
53.           />
54.           <view class="eye-icon" @tap="togglePasswordVisibility">
55.             <uni-icons :type="showPassword ? 'eye' : 'eye-slash'" size="20" color="#999"></uni-icons>
56.           </view>
57.         </view>
58.       </view>
59.       
60.       <!-- 手机验证码登录 -->
61.       <view v-else class="form-content">
62.         <view class="input-item">
63.           <uni-icons type="phone" size="20" color="#999"></uni-icons>
64.           <input
65.             class="input"
66.             type="number"
67.             maxlength="11"
68.             placeholder="请输入手机号"
69.             v-model="phone"
70.           />
71.         </view>
72.         <view class="input-item">
73.           <uni-icons type="chat" size="20" color="#999"></uni-icons>
74.           <input
75.             class="input"
76.             type="number"
77.             maxlength="6"
78.             placeholder="请输入验证码"
79.             v-model="smsCode"
80.           />
81.           <view
82.             class="code-btn"
83.             :class="{ disabled: counting }"
84.             @tap="sendSmsCode"
85.           >
86.             {{ codeText }}
87.           </view>
88.         </view>
89.       </view>
90.       
91.       <!-- 登录按钮 -->
92.       <view class="action-area">
93.         <button
94.           class="login-btn"
95.           :disabled="!isFormValid"
96.           :class="{ disabled: !isFormValid }"
97.           @tap="handleLogin"
98.         >
99.           登录
100.         </button>
101.         
102.         <view class="additional-links">
103.           <navigator url="/pages/auth/register" class="link-item">注册账号</navigator>
104.           <navigator url="/pages/auth/forgot-password" class="link-item">忘记密码</navigator>
105.         </view>
106.       </view>
107.       
108.       <!-- 第三方登录 -->
109.       <view class="third-party-login">
110.         <view class="divider">
111.           <view class="line"></view>
112.           <text class="text">其他登录方式</text>
113.           <view class="line"></view>
114.         </view>
115.         
116.         <view class="icons-row">
117.           <view class="icon-item" @tap="thirdPartyLogin('wechat')">
118.             <image src="/static/images/wechat.png" mode="widthFix"></image>
119.           </view>
120.           <view class="icon-item" @tap="thirdPartyLogin('apple')">
121.             <image src="/static/images/apple.png" mode="widthFix"></image>
122.           </view>
123.         </view>
124.       </view>
125.     </view>
126.    
127.     <!-- 底部隐私政策 -->
128.     <view class="privacy-policy">
129.       登录即表示您同意<text class="policy-link" @tap="openPrivacyPolicy">《用户协议》</text>和<text class="policy-link" @tap="openPrivacyPolicy">《隐私政策》</text>
130.     </view>
131.   </view>
132. </template>

复制代码

上面的模板看起来代码挺多，但结构非常清晰。接下来实现逻辑部分：

1. <script>
2. export default {
3.   data() {
4.     return {
5.       loginType: 'password', // 登录类型：password-密码登录，sms-短信登录
6.       account: '',
7.       password: '',
8.       phone: '',
9.       smsCode: '',
10.       showPassword: false,
11.       counting: false, // 是否正在倒计时
12.       countDown: 60, // 倒计时秒数
13.       codeText: '获取验证码'
14.     };
15.   },
16.   computed: {
17.     tabLineStyle() {
18.       return {
19.         transform: this.loginType === 'password' ? 'translateX(0)' : 'translateX(100%)'
20.       };
21.     },
22.     isFormValid() {
23.       if (this.loginType === 'password') {
24.         return this.account.trim() && this.password.trim();
25.       } else {
26.         return this.phone.trim().length === 11 && this.smsCode.trim().length === 6;
27.       }
28.     }
29.   },
30.   methods: {
31.     // 切换登录方式
32.     switchLoginType(type) {
33.       this.loginType = type;
34.     },
35.    
36.     // 切换密码可见性
37.     togglePasswordVisibility() {
38.       this.showPassword = !this.showPassword;
39.     },
40.    
41.     // 发送短信验证码
42.     sendSmsCode() {
43.       if (this.counting) return;
44.       
45.       // 验证手机号
46.       if (!this.validatePhone()) {
47.         return;
48.       }
49.       
50.       // 开始倒计时
51.       this.counting = true;
52.       this.countDown = 60;
53.       this.codeText = `${this.countDown}秒后重发`;
54.       
55.       const timer = setInterval(() => {
56.         this.countDown--;
57.         this.codeText = `${this.countDown}秒后重发`;
58.         
59.         if (this.countDown <= 0) {
60.           clearInterval(timer);
61.           this.counting = false;
62.           this.codeText = '获取验证码';
63.         }
64.       }, 1000);
65.       
66.       // 发送验证码请求
67.       this.requestSmsCode();
68.     },
69.    
70.     // 验证手机号
71.     validatePhone() {
72.       if (!/^1[3-9]\d{9}$/.test(this.phone)) {
73.         uni.showToast({
74.           title: '请输入正确的手机号',
75.           icon: 'none'
76.         });
77.         return false;
78.       }
79.       return true;
80.     },
81.    
82.     // 请求发送验证码
83.     requestSmsCode() {
84.       // 实际项目中这里应该调用API发送验证码
85.       uni.showLoading({ title: '发送中...' });
86.       
87.       setTimeout(() => {
88.         uni.hideLoading();
89.         uni.showToast({
90.           title: '验证码已发送',
91.           icon: 'success'
92.         });
93.       }, 1500);
94.     },
95.    
96.     // 处理登录
97.     handleLogin() {
98.       if (!this.isFormValid) return;
99.       
100.       uni.showLoading({ title: '登录中...' });
101.       
102.       // 登录验证逻辑
103.       setTimeout(() => {
104.         uni.hideLoading();
105.         
106.         // 模拟登录成功
107.         uni.setStorageSync('token', 'demo_token_' + Date.now());
108.         uni.setStorageSync('userInfo', {
109.           id: 1,
110.           nickname: '测试用户',
111.           avatar: '/static/images/avatar.png'
112.         });
113.         
114.         uni.showToast({
115.           title: '登录成功',
116.           icon: 'success',
117.           duration: 1500,
118.           success: () => {
119.             // 延迟跳转，让用户看到成功提示
120.             setTimeout(() => {
121.               uni.switchTab({
122.                 url: '/pages/home/home'
123.               });
124.             }, 1500);
125.           }
126.         });
127.       }, 2000);
128.     },
129.    
130.     // 第三方登录
131.     thirdPartyLogin(type) {
132.       uni.showToast({
133.         title: `正在尝试${type === 'wechat' ? '微信' : '苹果'}登录`,
134.         icon: 'none'
135.       });
136.       
137.       // 这里应该调用对应的第三方登录API
138.       // 微信登录示例
139.       if (type === 'wechat' && uni.getSystemInfoSync().platform !== 'devtools') {
140.         uni.login({
141.           provider: 'weixin',
142.           success: (loginRes) => {
143.             console.log('微信登录成功', loginRes);
144.             // 获取用户信息
145.             uni.getUserInfo({
146.               provider: 'weixin',
147.               success: (infoRes) => {
148.                 console.log('获取用户信息成功', infoRes);
149.                 // 将用户信息传给后端进行登录验证
150.                 // this.wxLoginToServer(loginRes.code, infoRes.userInfo);
151.               }
152.             });
153.           },
154.           fail: (err) => {
155.             console.error('微信登录失败', err);
156.           }
157.         });
158.       }
159.     },
160.    
161.     // 打开隐私政策
162.     openPrivacyPolicy() {
163.       uni.navigateTo({
164.         url: '/pages/common/privacy-policy'
165.       });
166.     }
167.   }
168. };
169. </script>

复制代码

末了是样式部分，一个漂亮的UI很大程度上取决于CSS：

1. <style lang="scss">
2. .login-container {
3.   position: relative;
4.   width: 100%;
5.   min-height: 100vh;
6.   display: flex;
7.   flex-direction: column;
8.   align-items: center;
9.   overflow: hidden;
10. }
12. // 背景样式
13. .bg-wrapper {
14.   position: absolute;
15.   top: 0;
16.   left: 0;
17.   width: 100%;
18.   height: 100%;
19.   z-index: -1;
20.   
21.   .bg-image {
22.     width: 100%;
23.     height: 100%;
24.   }
25.   
26.   .bg-mask {
27.     position: absolute;
28.     top: 0;
29.     left: 0;
30.     width: 100%;
31.     height: 100%;
32.     background: linear-gradient(to bottom, rgba(29, 36, 52, 0.5), rgba(29, 36, 52, 0.8));
33.   }
34. }
36. // Logo区域
37. .logo-box {
38.   margin-top: 80rpx;
39.   display: flex;
40.   flex-direction: column;
41.   align-items: center;
42.   
43.   .logo {
44.     width: 180rpx;
45.     margin-bottom: 20rpx;
46.   }
47.   
48.   .slogan {
49.     font-size: 28rpx;
50.     color: #ffffff;
51.     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
52.   }
53. }
55. // 登录表单
56. .login-form {
57.   width: 85%;
58.   margin-top: 80rpx;
59.   background-color: rgba(255, 255, 255, 0.95);
60.   border-radius: 16rpx;
61.   padding: 40rpx 30rpx;
62.   box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
63.   
64.   // 标签头部
65.   .tab-header {
66.     display: flex;
67.     position: relative;
68.     border-bottom: 1px solid #f2f2f2;
69.     margin-bottom: 50rpx;
70.    
71.     .tab-item {
72.       flex: 1;
73.       text-align: center;
74.       font-size: 32rpx;
75.       color: #666;
76.       padding-bottom: 20rpx;
77.       transition: all 0.3s;
78.       
79.       &.active {
80.         color: #3b7aff;
81.         font-weight: 500;
82.       }
83.     }
84.    
85.     .tab-line {
86.       position: absolute;
87.       bottom: 0;
88.       left: 0;
89.       width: 50%;
90.       height: 4rpx;
91.       background-color: #3b7aff;
92.       border-radius: 4rpx;
93.       transition: all 0.3s ease;
94.     }
95.   }
96.   
97.   // 表单内容
98.   .form-content {
99.     margin-bottom: 50rpx;
100.    
101.     .input-item {
102.       display: flex;
103.       align-items: center;
104.       height: 100rpx;
105.       border-bottom: 1rpx solid #eee;
106.       margin-bottom: 30rpx;
107.       
108.       .input {
109.         flex: 1;
110.         height: 100%;
111.         font-size: 30rpx;
112.         padding-left: 20rpx;
113.       }
114.       
115.       .eye-icon {
116.         padding: 0 10rpx;
117.       }
118.       
119.       .code-btn {
120.         width: 200rpx;
121.         height: 70rpx;
122.         line-height: 70rpx;
123.         background: #3b7aff;
124.         color: #fff;
125.         font-size: 26rpx;
126.         text-align: center;
127.         border-radius: 35rpx;
128.         
129.         &.disabled {
130.           background: #cccccc;
131.         }
132.       }
133.     }
134.   }
135.   
136.   // 操作区域
137.   .action-area {
138.     .login-btn {
139.       width: 100%;
140.       height: 90rpx;
141.       line-height: 90rpx;
142.       background: linear-gradient(135deg, #4b8eff, #3b7aff);
143.       color: #fff;
144.       font-size: 32rpx;
145.       border-radius: 45rpx;
146.       margin-bottom: 30rpx;
147.       
148.       &.disabled {
149.         background: linear-gradient(135deg, #cccccc, #aaaaaa);
150.       }
151.     }
152.    
153.     .additional-links {
154.       display: flex;
155.       justify-content: space-between;
156.       font-size: 26rpx;
157.       color: #666;
158.       margin-bottom: 40rpx;
159.       
160.       .link-item {
161.         padding: 10rpx;
162.       }
163.     }
164.   }
165.   
166.   // 第三方登录
167.   .third-party-login {
168.     margin-top: 30rpx;
169.    
170.     .divider {
171.       display: flex;
172.       align-items: center;
173.       margin-bottom: 40rpx;
174.       
175.       .line {
176.         flex: 1;
177.         height: 1rpx;
178.         background-color: #eee;
179.       }
180.       
181.       .text {
182.         padding: 0 20rpx;
183.         font-size: 26rpx;
184.         color: #999;
185.       }
186.     }
187.    
188.     .icons-row {
189.       display: flex;
190.       justify-content: center;
191.       
192.       .icon-item {
193.         width: 80rpx;
194.         height: 80rpx;
195.         margin: 0 40rpx;
196.         
197.         image {
198.           width: 100%;
199.           height: 100%;
200.         }
201.       }
202.     }
203.   }
204. }
206. // 底部隐私政策
207. .privacy-policy {
208.   position: absolute;
209.   bottom: 40rpx;
210.   font-size: 24rpx;
211.   color: rgba(255, 255, 255, 0.8);
212.   text-align: center;
213.   
214.   .policy-link {
215.     color: #4b8eff;
216.   }
217. }
218. </style>

复制代码

注册页面实现

注册页面与登录页面类似，但表单内容有所不同。这里我们简化一下代码，只展示关键部分：

1. <template>
2.   <view class="register-container">
3.     <!-- 背景和顶部与登录页类似 -->
4.    
5.     <view class="register-form">
6.       <view class="form-header">
7.         <text class="title">新用户注册</text>
8.         <text class="subtitle">加入我们，体验更多精彩</text>
9.       </view>
10.       
11.       <view class="form-content">
12.         <view class="input-item">
13.           <uni-icons type="phone" size="20" color="#999"></uni-icons>
14.           <input
15.             class="input"
16.             type="number"
17.             maxlength="11"
18.             placeholder="请输入手机号"
19.             v-model="form.phone"
20.           />
21.         </view>
22.         
23.         <view class="input-item">
24.           <uni-icons type="chat" size="20" color="#999"></uni-icons>
25.           <input
26.             class="input"
27.             type="number"
28.             maxlength="6"
29.             placeholder="请输入验证码"
30.             v-model="form.smsCode"
31.           />
32.           <view
33.             class="code-btn"
34.             :class="{ disabled: counting }"
35.             @tap="sendSmsCode"
36.           >
37.             {{ codeText }}
38.           </view>
39.         </view>
40.         
41.         <view class="input-item">
42.           <uni-icons type="locked" size="20" color="#999"></uni-icons>
43.           <input
44.             class="input"
45.             :type="showPassword ? 'text' : 'password'"
46.             placeholder="请设置6-20位密码"
47.             v-model="form.password"
48.           />
49.           <view class="eye-icon" @tap="togglePasswordVisibility">
50.             <uni-icons :type="showPassword ? 'eye' : 'eye-slash'" size="20" color="#999"></uni-icons>
51.           </view>
52.         </view>
53.         
54.         <view class="input-item">
55.           <uni-icons type="locked" size="20" color="#999"></uni-icons>
56.           <input
57.             class="input"
58.             :type="showPassword ? 'text' : 'password'"
59.             placeholder="请确认密码"
60.             v-model="form.confirmPassword"
61.           />
62.         </view>
63.       </view>
64.       
65.       <view class="action-area">
66.         <button
67.           class="register-btn"
68.           :disabled="!isFormValid"
69.           :class="{ disabled: !isFormValid }"
70.           @tap="handleRegister"
71.         >
72.           注册
73.         </button>
74.         
75.         <view class="login-link">
76.           已有账号？<text class="link" @tap="goToLogin">去登录</text>
77.         </view>
78.       </view>
79.     </view>
80.   </view>
81. </template>
83. <script>
84. export default {
85.   data() {
86.     return {
87.       form: {
88.         phone: '',
89.         smsCode: '',
90.         password: '',
91.         confirmPassword: ''
92.       },
93.       showPassword: false,
94.       counting: false,
95.       countDown: 60,
96.       codeText: '获取验证码'
97.     };
98.   },
99.   computed: {
100.     isFormValid() {
101.       return this.form.phone.length === 11 &&
102.              this.form.smsCode.length === 6 &&
103.              this.form.password.length >= 6 &&
104.              this.form.password === this.form.confirmPassword;
105.     }
106.   },
107.   methods: {
108.     // 密码可见性切换
109.     togglePasswordVisibility() {
110.       this.showPassword = !this.showPassword;
111.     },
112.    
113.     // 发送验证码（与登录页类似）
114.     sendSmsCode() {
115.       // 实现与登录页类似
116.     },
117.    
118.     // 处理注册
119.     handleRegister() {
120.       if (!this.isFormValid) return;
121.       
122.       // 表单验证
123.       if (this.form.password !== this.form.confirmPassword) {
124.         uni.showToast({
125.           title: '两次密码不一致',
126.           icon: 'none'
127.         });
128.         return;
129.       }
130.       
131.       uni.showLoading({ title: '注册中...' });
132.       
133.       // 模拟注册请求
134.       setTimeout(() => {
135.         uni.hideLoading();
136.         uni.showToast({
137.           title: '注册成功',
138.           icon: 'success',
139.           duration: 1500,
140.           success: () => {
141.             // 延迟跳转到登录页
142.             setTimeout(() => {
143.               uni.navigateTo({
144.                 url: '/pages/auth/login'
145.               });
146.             }, 1500);
147.           }
148.         });
149.       }, 2000);
150.     },
151.    
152.     // 跳转到登录页
153.     goToLogin() {
154.       uni.navigateBack();
155.     }
156.   }
157. };
158. </script>

复制代码

注册页面的样式可以参考登录页面，只需对一些细节进行调整即可。
实际效果与优化方案

在实际项目中，我们实现的登录注册页面已经投入利用，用户反馈非常好。不过在利用过程中也发现了一些题目和优化点：
1. 动画效果优化

为了让登录体验更流畅，我们加入了一些过渡动画：

1. // 切换标签时添加动画
2. switchLoginType(type) {
3.   // 添加动画类
4.   this.animating = true;
5.   setTimeout(() => {
6.     this.loginType = type;
7.     setTimeout(() => {
8.       this.animating = false;
9.     }, 300);
10.   }, 150);
11. }

复制代码

对应的CSS：

1. .form-content {
2.   transition: opacity 0.3s ease;
3.   opacity: 1;
4.   
5.   &.animating {
6.     opacity: 0;
7.   }
8. }

复制代码

2. 表单验证优化

在用户输入过程中实时验证并给出友爱提示：

1. <view class="input-item" :class="{ error: phoneError }">
2.   <uni-icons type="phone" size="20" color="#999"></uni-icons>
3.   <input
4.     class="input"
5.     type="number"
6.     maxlength="11"
7.     placeholder="请输入手机号"
8.     v-model="phone"
9.     @input="validatePhoneInput"
10.   />
11.   <text v-if="phoneError" class="error-tip">{{ phoneErrorMsg }}</text>
12. </view>

复制代码

1. validatePhoneInput() {
2.   if (this.phone && !/^1[3-9]\d{9}$/.test(this.phone)) {
3.     this.phoneError = true;
4.     this.phoneErrorMsg = '请输入正确的手机号';
5.   } else {
6.     this.phoneError = false;
7.     this.phoneErrorMsg = '';
8.   }
9. }

复制代码

3. 记着登录状态

用户体验优化，记着登录状态避免频仍登录：

1. // 登录成功后保存状态
2. handleLoginSuccess(userInfo, token) {
3.   // 保存用户信息和token
4.   uni.setStorageSync('token', token);
5.   uni.setStorageSync('userInfo', userInfo);
6.   uni.setStorageSync('loginTime', Date.now());
7.   
8.   // 如果用户勾选了"记住登录状态"
9.   if (this.rememberMe) {
10.     uni.setStorageSync('rememberMe', true);
11.   } else {
12.     uni.removeStorageSync('rememberMe');
13.   }
14. }

复制代码

在App启动时查抄登录状态：

1. // 在App.vue的onLaunch中
2. checkLoginStatus() {
3.   const token = uni.getStorageSync('token');
4.   const rememberMe = uni.getStorageSync('rememberMe');
5.   const loginTime = uni.getStorageSync('loginTime');
6.   const currentTime = Date.now();
7.   
8.   // 如果有token且选择了记住登录，或者登录时间在7天内
9.   if (token && (rememberMe || (currentTime - loginTime < 7 * 24 * 60 * 60 * 1000))) {
10.     // token验证
11.     this.verifyToken(token);
12.   } else {
13.     // 清除登录信息，跳转到登录页
14.     this.clearLoginInfo();
15.     uni.reLaunch({
16.       url: '/pages/auth/login'
17.     });
18.   }
19. }

复制代码

总结与心得

通过这次实践，我总结了几点关于实现好的登录注册页面的经验：

• 设计先行 - 在编码前先做好设计稿，确保视觉效果和交互流程
  
• 拆分组件 - 将复杂页面拆分为多个可复用组件，便于维护
  
• 验证健壮 - 表单验证要全面且给出友爱提示
  
• 安全思量 - 密码加密传输，防止中间人攻击
  
• 适配兼容 - 适配不同尺寸的设备，兼容不同平台
  

UniApp提供了很多实用组件和API，极大简化了我们的开辟过程。通过合理利用这些功能，我们可以或许快速实现一个既雅观又实用的登录注册体系。
希望这篇文章对你在UniApp中实现登录注册页面有所帮助。假如有任何题目或建议，欢迎在评论区交流！
参考资料

• UniApp官方文档：https://uniapp.dcloud.io/
  
• uni-ui组件库：https://ext.dcloud.net.cn/plugin?id=55
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告