UniApp登录注册页面实战：从零搭建到接口联调（附完整代码）

UniApp登录注册页面实战从零搭建到接口联调在移动应用开发中登录注册功能是几乎所有应用的基础模块。作为开发者我们不仅需要实现功能还要考虑用户体验、安全性和性能优化。本文将带你从零开始构建一个完整的UniApp登录注册系统涵盖页面设计、逻辑实现、接口对接等全流程。1. 项目准备与环境搭建在开始编码前我们需要做好基础准备工作。首先确保你已经安装了HBuilderX这是DCloud官方推荐的UniApp开发工具。创建一个新的UniApp项目选择默认模板即可。关键依赖安装npm install dcloudio/uni-ui # UniApp官方UI组件库 npm install crypto-js # 加密库用于密码加密 npm install jsencrypt # RSA加密在manifest.json中配置基础信息特别是App模块配置中需要勾选加密通信和网络请求权限。对于微信小程序平台还需要在微信公众平台配置合法域名。提示开发阶段可以在manifest.json中关闭域名校验方便本地调试但上线前务必开启并配置正确的域名。2. 登录页面设计与实现2.1 页面布局登录页面通常包含以下核心元素应用Logo/名称用户名输入框密码输入框验证码区域可选登录按钮注册/忘记密码链接template view classlogin-container view classheader image src/static/logo.png modeaspectFit/image text classtitle欢迎回来/text /view view classform-container view classinput-group uni-icons typeperson size20 color#999/uni-icons input v-modelloginForm.username placeholder请输入用户名/手机号 blurvalidateUsername / /view view classinput-group uni-icons typelocked size20 color#999/uni-icons input v-modelloginForm.password placeholder请输入密码 password blurvalidatePassword / /view view classcaptcha-group v-ifshowCaptcha input v-modelloginForm.captcha placeholder验证码 / image :srccaptchaUrl clickrefreshCaptcha/image /view button classlogin-btn :disabled!formValid clickhandleLogin 登录 /button /view view classfooter text clicknavigateTo(register)立即注册/text text clicknavigateTo(forgot)忘记密码/text /view /view /template2.2 样式设计使用SCSS编写样式确保多端适配.login-container { padding: 40rpx; height: 100vh; display: flex; flex-direction: column; .header { flex: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; image { width: 150rpx; height: 150rpx; margin-bottom: 20rpx; } .title { font-size: 36rpx; color: #333; } } .form-container { flex: 3; .input-group { display: flex; align-items: center; padding: 20rpx; margin-bottom: 30rpx; border-bottom: 1rpx solid #eee; input { flex: 1; margin-left: 20rpx; height: 60rpx; font-size: 28rpx; } } .captcha-group { display: flex; align-items: center; input { flex: 2; } image { flex: 1; height: 80rpx; margin-left: 20rpx; } } .login-btn { margin-top: 60rpx; background-color: #007aff; color: white; border-radius: 50rpx; [disabled] { opacity: 0.6; } } } .footer { flex: 1; display: flex; justify-content: space-between; padding: 0 40rpx; color: #999; font-size: 24rpx; } }2.3 逻辑实现登录页面的JavaScript部分需要处理表单验证、登录逻辑和状态管理script import { encryptPassword } from /utils/crypto import { mapActions } from vuex export default { data() { return { loginForm: { username: , password: , captcha: }, showCaptcha: false, captchaUrl: , formValid: false } }, computed: { // 实时验证表单 formValid() { return this.loginForm.username this.loginForm.password (!this.showCaptcha || this.loginForm.captcha) } }, methods: { ...mapActions([login]), // 用户名验证 validateUsername() { if (!this.loginForm.username) { uni.showToast({ title: 请输入用户名, icon: none }) return false } return true }, // 密码验证 validatePassword() { if (!this.loginForm.password) { uni.showToast({ title: 请输入密码, icon: none }) return false } return true }, // 刷新验证码 async refreshCaptcha() { const res await this.$api.getCaptcha() this.captchaUrl res.data.url this.loginForm.captchaToken res.data.token }, // 处理登录 async handleLogin() { if (!this.validateUsername() || !this.validatePassword()) return try { uni.showLoading({ title: 登录中... }) const params { ...this.loginForm, password: encryptPassword(this.loginForm.password) } await this.login(params) uni.hideLoading() uni.switchTab({ url: /pages/home/index }) } catch (error) { uni.hideLoading() // 需要验证码时显示验证码区域 if (error.code NEED_CAPTCHA) { this.showCaptcha true this.refreshCaptcha() } uni.showToast({ title: error.message || 登录失败, icon: none }) } }, navigateTo(page) { uni.navigateTo({ url: /pages/auth/${page} }) } } } /script3. 注册页面开发注册页面与登录页面结构类似但需要更多字段验证和逻辑处理。3.1 注册表单设计template view classregister-container view classform-container view classinput-group uni-icons typeperson size20 color#999/uni-icons input v-modelregisterForm.username placeholder请输入用户名 blurvalidateField(username) / /view view classinput-group uni-icons typephone size20 color#999/uni-icons input v-modelregisterForm.mobile placeholder请输入手机号 typenumber blurvalidateField(mobile) / /view view classinput-group uni-icons typelocked size20 color#999/uni-icons input v-modelregisterForm.password placeholder请输入密码 password blurvalidateField(password) / /view view classinput-group uni-icons typelocked size20 color#999/uni-icons input v-modelregisterForm.confirmPassword placeholder请确认密码 password blurvalidatePasswordMatch / /view view classcaptcha-group input v-modelregisterForm.smsCode placeholder短信验证码 / button classsms-btn :disabledsmsCountdown 0 clicksendSmsCode {{ smsCountdown 0 ? ${smsCountdown}s后重试 : 获取验证码 }} /button /view view classagreement checkbox-group changetoggleAgreement checkbox :checkedagreed / text我已阅读并同意/text text classlink clickshowAgreement(service)《用户协议》/text text和/text text classlink clickshowAgreement(privacy)《隐私政策》/text /checkbox-group /view button classregister-btn :disabled!formValid clickhandleRegister 注册 /button /view /view /template3.2 注册逻辑实现script import { encryptPassword } from /utils/crypto import { validateMobile, validatePassword } from /utils/validate export default { data() { return { registerForm: { username: , mobile: , password: , confirmPassword: , smsCode: }, agreed: false, smsCountdown: 0, formValid: false } }, watch: { // 监听表单变化 registerForm: { deep: true, handler() { this.checkFormValid() } }, agreed() { this.checkFormValid() } }, methods: { // 字段验证 validateField(field) { switch (field) { case username: if (!this.registerForm.username) { this.showError(请输入用户名) return false } if (this.registerForm.username.length 4) { this.showError(用户名至少4个字符) return false } break case mobile: if (!validateMobile(this.registerForm.mobile)) { this.showError(请输入正确的手机号) return false } break case password: if (!validatePassword(this.registerForm.password)) { this.showError(密码需6-20位且包含字母和数字) return false } break } return true }, // 密码一致性验证 validatePasswordMatch() { if (this.registerForm.password ! this.registerForm.confirmPassword) { this.showError(两次输入的密码不一致) return false } return true }, // 检查表单是否有效 checkFormValid() { this.formValid this.registerForm.username validateMobile(this.registerForm.mobile) validatePassword(this.registerForm.password) this.registerForm.password this.registerForm.confirmPassword this.registerForm.smsCode this.agreed }, // 发送短信验证码 async sendSmsCode() { if (!validateMobile(this.registerForm.mobile)) { this.showError(请输入正确的手机号) return } try { await this.$api.sendSmsCode({ mobile: this.registerForm.mobile, scene: register }) this.startCountdown() uni.showToast({ title: 验证码已发送 }) } catch (error) { this.showError(error.message || 发送验证码失败) } }, // 开始倒计时 startCountdown() { this.smsCountdown 60 const timer setInterval(() { this.smsCountdown-- if (this.smsCountdown 0) { clearInterval(timer) } }, 1000) }, // 处理注册 async handleRegister() { if (!this.formValid) return try { uni.showLoading({ title: 注册中... }) const params { ...this.registerForm, password: encryptPassword(this.registerForm.password) } delete params.confirmPassword await this.$api.register(params) uni.hideLoading() uni.showToast({ title: 注册成功 }) // 注册成功后自动登录 setTimeout(() { uni.reLaunch({ url: /pages/home/index }) }, 1500) } catch (error) { uni.hideLoading() this.showError(error.message || 注册失败) } }, toggleAgreement(e) { this.agreed e.detail.value.length 0 }, showAgreement(type) { uni.navigateTo({ url: /pages/webview/index?type${type} }) }, showError(message) { uni.showToast({ title: message, icon: none }) } } } /script4. 接口联调与安全处理4.1 API请求封装创建一个统一的请求工具request.jsimport store from /store import { getToken } from /utils/auth const BASE_URL process.env.VUE_APP_BASE_API export const request (options {}) { return new Promise((resolve, reject) { uni.request({ url: BASE_URL options.url, method: options.method || GET, data: options.data || {}, header: { Content-Type: application/json, Authorization: Bearer ${getToken()}, ...options.headers }, success: (res) { if (res.statusCode 200) { if (res.data.code 0) { resolve(res.data.data) } else { // 特殊错误码处理 if (res.data.code 401) { store.dispatch(user/logout) uni.reLaunch({ url: /pages/auth/login }) } reject(res.data) } } else { reject(res.data) } }, fail: (err) { reject(err) } }) }) } // 封装常用方法 export const get (url, params, options {}) { return request({ url, method: GET, data: params, ...options }) } export const post (url, data, options {}) { return request({ url, method: POST, data, ...options }) }4.2 登录注册API实现创建api/auth.js处理认证相关接口import { post } from /utils/request export const login (data) { return post(/auth/login, data) } export const register (data) { return post(/auth/register, data) } export const getCaptcha () { return get(/auth/captcha) } export const sendSmsCode (data) { return post(/auth/sms, data) } export const logout () { return post(/auth/logout) } export const getUserInfo () { return get(/user/info) }4.3 安全措施实现密码加密工具utils/crypto.jsimport CryptoJS from crypto-js import { publicKey } from /config // AES加密 export const encryptPassword (password) { const key CryptoJS.enc.Utf8.parse(16BytesLengthKey!) const iv CryptoJS.enc.Utf8.parse(16BytesLengthIV!) const encrypted CryptoJS.AES.encrypt( CryptoJS.enc.Utf8.parse(password), key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 } ) return encrypted.toString() } // RSA加密用于敏感数据传输 export const rsaEncrypt (data) { const encrypt new JSEncrypt() encrypt.setPublicKey(publicKey) return encrypt.encrypt(data) }Token管理utils/auth.jsconst TOKEN_KEY auth_token const USER_KEY user_info export const getToken () { return uni.getStorageSync(TOKEN_KEY) } export const setToken (token) { uni.setStorageSync(TOKEN_KEY, token) } export const removeToken () { uni.removeStorageSync(TOKEN_KEY) } export const getUserInfo () { const user uni.getStorageSync(USER_KEY) return user ? JSON.parse(user) : null } export const setUserInfo (user) { uni.setStorageSync(USER_KEY, JSON.stringify(user)) } export const removeUserInfo () { uni.removeStorageSync(USER_KEY) }5. 性能优化与常见问题解决5.1 性能优化策略图片资源优化使用WebP格式减小图片体积合理使用雪碧图减少HTTP请求实现懒加载请求优化// 接口防抖处理 export const debounceRequest (fn, delay 500) { let timer null return function(...args) { if (timer) clearTimeout(timer) timer setTimeout(() { fn.apply(this, args) }, delay) } }数据缓存策略// 带缓存的请求 export const cachedRequest async (key, fn, expire 3600) { const cache uni.getStorageSync(key) const now Date.now() if (cache now - cache.timestamp expire * 1000) { return cache.data } const data await fn() uni.setStorageSync(key, { data, timestamp: now }) return data }5.2 常见问题解决方案问题1表单重复提交解决方案使用提交状态锁data() { return { submitting: false } }, methods: { async handleSubmit() { if (this.submitting) return this.submitting true try { await submitForm() } finally { this.submitting false } } }问题2页面跳转动画卡顿解决方案预加载页面// 在登录页预加载主页 onLoad() { uni.preloadPage({ url: /pages/home/index }) }问题3键盘弹出遮挡输入框解决方案使用uni.onKeyboardHeightChange监听键盘高度onLoad() { uni.onKeyboardHeightChange(res { if (res.height 0) { // 滚动到可视区域 this.scrollToView input- this.currentFocus } }) }6. 多端适配与测试6.1 平台差异处理// 环境判断 const isWeapp process.env.UNI_PLATFORM mp-weixin const isH5 process.env.UNI_PLATFORM h5 const isApp process.env.UNI_PLATFORM app // 平台特定代码 if (isWeapp) { // 微信小程序特有逻辑 } else if (isApp) { // App特有逻辑 }6.2 测试要点功能测试正常登录/注册流程错误输入处理验证码发送与验证Token过期处理兼容性测试| 平台 | 测试设备/浏览器 | 主要问题 | 解决方案 | |-------------|---------------------|-----------------------|---------------------| | 微信小程序 | 各版本微信 | 登录态维持 | 检查session有效期 | | H5 | Chrome/Safari | 路由跳转 | 统一使用uni导航方法 | | App | iOS/Android真机 | 键盘弹起 | 调整页面滚动位置 |性能测试指标页面加载时间 ≤ 1s接口响应时间 ≤ 500ms内存占用 ≤ 100MB7. 进阶功能扩展7.1 第三方登录集成// 微信登录示例 export const wechatLogin () { return new Promise((resolve, reject) { uni.login({ provider: weixin, success: async (res) { try { const result await post(/auth/wechat, { code: res.code }) resolve(result) } catch (error) { reject(error) } }, fail: (err) { reject(err) } }) }) }7.2 生物识别认证// 指纹/面容识别 export const biometricAuth () { return new Promise((resolve, reject) { uni.checkIsSupportSoterAuthentication({ success: (res) { if (res.supportMode.includes(fingerPrint)) { uni.startSoterAuthentication({ requestAuthModes: [fingerPrint], challenge: login, authContent: 请验证指纹, success: resolve, fail: reject }) } else { reject(new Error(设备不支持指纹识别)) } }, fail: reject }) }) }7.3 多语言支持创建语言包lang/index.jsexport default { en: { login: { title: Welcome Back, username: Username, password: Password, button: Login } }, zh: { login: { title: 欢迎回来, username: 用户名, password: 密码, button: 登录 } } }在页面中使用template view text{{ $t(login.title) }}/text input :placeholder$t(login.username) / /view /template script import { mapState } from vuex export default { computed: { ...mapState([language]) }, methods: { $t(key) { const keys key.split(.) return keys.reduce((obj, k) obj[k], this.$lang[this.language]) } } } /script