现在的登录页光能登进去已经不够了。用户打开小程序第一眼看到的就是这个页面它承担的是第一印象的活儿——能不能让人愿意把账号密码交出去很大程度取决于这一屏给人的感觉。这篇是uni-app 微信小程序之好看的 ui 登录页面系列的第五篇前面几篇分别试过卡片式、全屏图背景式、表单上下分离式、以及带滑块验证的版本这一版我想解决的是几个老问题渐变背景在小程序里怎么做得干净不透底、输入框的焦点反馈怎么做到位、以及真机上键盘顶起来之后布局怎么不塌。整套代码基于 uni-app Vue3 组合式 API微信小程序端实测可用同时兼容 H5 和 App 端适合正在做小程序从 0 到 1 的朋友也适合已经在写业务、想把登录页再打磨一遍的同学抄作业。1. 先想清楚这个登录页要好在哪1.1 登录页在业务里的真实权重很多人做登录页的心态是能用就行反正用户就填两下。但实际数据往往打脸登录页的流失率在所有页面里通常是排前三的。原因不复杂——用户在这个页面上是有求于你的状态他想快点进到主功能任何一点卡顿、任何一次校验失败、任何一个不知道点哪里的按钮都会让他直接退出。我做过一个粗略的观察把登录页从白底黑字基础表单改成有层级、有反馈、按钮明确的版本之后同一批投放渠道的注册转化大概能差出十几个百分点。这个差距不是来自视觉本身好看而是来自降低认知负担眼睛不用找手不用犹豫错了立刻知道错在哪。所以这一版我做三件事视觉上做减法把页面元素砍到只剩必要项背景负责氛围卡片负责内容中间不加任何多余的装饰线条。反馈上做加法输入框聚焦变色、错误提示内联展示、按钮有 loading 态、协议未勾选有明确提示。适配上做兜底状态栏高度动态取值、底部安全区留白、键盘弹起不遮挡输入框。1.2 这一版的设计定位与取舍前四篇里第二篇用的是全屏大图做背景视觉冲击力强但问题是包体积会被图片拖累一张 750x1624 的图压到 150KB 已经是极限再压就糊。第三篇用了纯色 卡片投影干净是干净但一千个小程序里九百个都长这样。这一版我选的是深色渐变 柔光斑 白色圆角卡片。为什么是这套组合深色渐变天然有高级感因为暗背景下内容的对比度更容易拉开白色卡片浮在上面视觉焦点非常明确。柔光斑就是几个大半径、低透明度、高斯模糊的圆形用来打破渐变的单调让背景有呼吸感而且它比图片便宜得多——纯 CSS 实现零资源体积。白色卡片则负责可读性。正文内容放在浅色底上字号可以小一点、行高可以松一点长时间看不累。这是深色背景 浅色容器的经典搭配在金融类、工具类小程序里被反复验证过。注意玻璃拟态毛玻璃虽然好看但微信小程序里backdrop-filter的支持很不稳定低端安卓机上经常直接失效变成一坨半透明灰。这一版我刻意避开了它用实色卡片 投影来模拟层次稳。2. 视觉方案拆解从草图到可落地的数值2.1 页面分区与视觉动线整个页面我分成四块从上到下依次是区域高度占比承载内容视觉作用状态栏占位动态系统状态栏避免内容被刘海遮挡品牌区约 25%Logo、欢迎语、副标题建立身份认同引导视线下移表单卡片约 55%输入框、按钮、第三方入口核心操作区底部协议剩余勾选框、协议链接合规必需视觉弱化视觉动线是标准的 Z 字型变体Logo 吸引第一眼 → 欢迎语承接 → 卡片左上角第一个输入框开始往下走 → 按钮收尾。这里有个小细节卡片顶部我留了 56rpx 的内边距而不是常规的 32rpx就是为了让第一个输入框离卡片边缘远一点用户的视线进入卡片后需要一个着陆点太挤会显得局促。2.2 配色体系为什么用深色渐变配白卡主背景渐变我用了两个色相接近但明度差明显的颜色从左上到右下过渡。具体取值建议你们按自己的品牌色调整我给一套通用安全的渐变起点#2B2E5A低饱和深蓝紫渐变终点#1A1B33接近黑的深靛光斑颜色#5B6BFF和#8B5CF6透明度 0.25 到 0.35卡片底色#FFFFFF主按钮渐变#5B6BFF→#8B5CF6正文主色#1A1B33辅助文字#8A8F9E分割线#EEF0F5错误色#F5453D关键点在于深色背景不要用纯黑。#000000在 OLED 屏上会和周围的系统 UI 割裂而且在渐变过渡时会显得很脏。用接近黑但有色调的深靛整体会协调很多。光斑的实现方式是用border-radius: 50%画圆然后加filter: blur(80rpx)。这里有个性能提醒blur 值不要超过 120rpx否则低端机的渲染压力会明显上升页面切换时会掉帧。2.3 尺寸规范速查表这套数值是我在几台不同尺寸的真机上比过之后定下来的可以直接用元素数值说明卡片左右边距48rpx两边对称留出呼吸感卡片圆角40rpx超过 48rpx 会显得太软卡片内边距56rpx 48rpx上大下小符合视线落点卡片投影0 24rpx 64rpx rgba(20, 22, 60, 0.18)偏移和模糊比为 1:2.6 最自然输入框高度96rpx低于 88rpx 点击区域偏小输入框字号30rpx小程序输入字号低于 28rpx 会触发缩放输入框间距40rpx太近会误触太远会散主按钮高度96rpx和输入框保持一致主按钮圆角48rpx全圆角和卡片形成对比底部协议字号24rpx低于这个值看不清关于输入框字号这里必须强调一下iOS 上 input 的字号如果小于 16px聚焦时页面会自动放大。在 uni-app 里 30rpx 在 375 宽的屏幕上约等于 15px踩在临界点上。保险起见我用了 30rpx 并且在input上加了:adjust-positiontrue实测 iPhone 上不会触发缩放。如果你用的是 28rpx记得给页面加meta里的user-scalableno或者干脆调到 32rpx。3. 动手实现一份可以直接跑的完整代码3.1 目录结构与基础配置我习惯把登录页放在pages/login/下面静态资源单独放pages/ login/ index.vue static/ logo.png如果不想用图片 Logo直接用 CSS 画一个圆角方块里面放首字母也完全够用还能省一个网络请求。我这份代码就是这么干的方便你们直接复制运行。页面配置里记得关掉原生导航栏否则会多一条白色的标题栏出来跟深色背景打架{ navigationStyle: custom, navigationBarTextStyle: white, backgroundColor: #1A1B33 }navigationStyle: custom之后状态栏就归你自己管了所以必须动态取高度这个下面会讲。3.2 模板层结构与语义先上完整模板template view classlogin !-- 背景层渐变 光斑 -- view classbg view classblob blob-a/view view classblob blob-b/view /view !-- 状态栏占位 -- view classstatus-bar :style{ height: statusBarHeight px }/view !-- 品牌区 -- view classbrand view classlogo-box text classlogo-charU/text /view text classbrand-title欢迎回来/text text classbrand-sub登录后即可同步你的全部数据/text /view !-- 表单卡片 -- view classcard !-- 账号 -- view classfield :class{ is-focus: active account, is-error: errors.account } view classfield-main input classfield-input v-modelform.account typetext placeholder手机号或用户名 placeholder-classph :maxlength32 confirm-typenext focusactive account bluronBlur(account) / view v-ifform.account classclear-btn clickform.account text classclear-icon×/text /view /view view classfield-line/view /view !-- 密码 -- view classfield :class{ is-focus: active password, is-error: errors.password } view classfield-main input classfield-input v-modelform.password :password!showPwd placeholder请输入密码 placeholder-classph :maxlength20 confirm-typedone focusactive password bluronBlur(password) confirmhandleLogin / view classeye-btn clickshowPwd !showPwd text classeye-text{{ showPwd ? 隐藏 : 显示 }}/text /view /view view classfield-line/view /view !-- 错误提示 -- view v-iferrorTip classerror-tip text classerror-text{{ errorTip }}/text /view !-- 辅助行 -- view classassist-row text classassist-link clickgoRegister注册新账号/text text classassist-link clickgoForgot忘记密码/text /view !-- 主按钮 -- view classsubmit-btn :class{ is-loading: loading } hover-classsubmit-btn-hover :hover-stay-time80 clickhandleLogin text classsubmit-text{{ loading ? 登录中 : 登 录 }}/text /view !-- 第三方 -- view classthird view classthird-line/view text classthird-label其他方式登录/text view classthird-line/view /view view classthird-btns view classthird-btn hover-classthird-btn-hover clickhandleThird(wechat) text classthird-char微/text /view view classthird-btn hover-classthird-btn-hover clickhandleThird(phone) text classthird-char码/text /view /view /view !-- 协议 -- view classagreement view classcheck-box :class{ is-checked: agreed } clickagreed !agreed text v-ifagreed classcheck-mark✓/text /view text classagreement-text 我已阅读并同意 text classagreement-link click.stopopenDoc(user)《用户协议》/text 和 text classagreement-link click.stopopenDoc(privacy)《隐私政策》/text /text /view /view /template有几点值得说一下。密码的显示隐藏我用了input :password!showPwd这个属性而不是在小程序里动态切换type。原因是微信小程序的 input 组件在type从text切到password的过程中部分基础库版本会把已输入的内容清空。用password属性做布尔切换就稳定得多这个坑我在第四篇里踩过。第三方登录按钮我用微和码两个字代替了图标实际项目里你们肯定要换成对应的图标资源。这么做是为了让这份代码能直接跑起来不用先去搞定图标包。3.3 样式层关键片段逐条说明样式部分只挑核心的讲完整代码在后面统一给出。背景渐变不要用background-image加图片直接用linear-gradient.bg { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; background: linear-gradient(160deg, #2B2E5A 0%, #1A1B33 100%); overflow: hidden; }角度选 160deg 而不是常见的 135deg是因为 135deg 的光感太标准稍微偏一点会更有方向性模拟一种左上角有光源的感觉。光斑的写法.blob { position: absolute; border-radius: 50%; filter: blur(100rpx); opacity: 0.3; } .blob-a { width: 520rpx; height: 520rpx; background: #5B6BFF; left: -160rpx; top: -120rpx; } .blob-b { width: 420rpx; height: 420rpx; background: #8B5CF6; right: -120rpx; top: 420rpx; opacity: 0.22; }这里filter: blur()在小程序里是支持的但要注意如果父元素有overflow: hiddenblur 的边缘会出现硬切。我给.bg加了overflow: hidden防止光斑溢出撑出滚动条同时光斑位置刻意做到屏幕外这样硬切边就看不到了。输入框的线条动画是整个页面里我最满意的部分.field-line { height: 2rpx; background: #EEF0F5; border-radius: 2rpx; transform: scaleX(1); transition: background-color 0.25s ease; } .field.is-focus .field-line { background: linear-gradient(90deg, #5B6BFF, #8B5CF6); } .field.is-error .field-line { background: #F5453D; }用background渐变代替宽度动画是为了避开小程序里 width 过渡的性能问题。颜色过渡比尺寸过渡省得多而且视觉上的点亮感是一样的。卡片投影这一条特别说一下.card { position: relative; z-index: 1; margin: 0 48rpx; padding: 56rpx 48rpx 48rpx; background: #FFFFFF; border-radius: 40rpx; box-shadow: 0 24rpx 64rpx rgba(20, 22, 60, 0.18); }投影的rgba里我用了20, 22, 60这个带蓝调的深色而不是纯黑。纯黑投影在白卡下面会泛灰蓝调投影和背景的深靛色是一个色系融合得更自然。这个技巧在深色背景上尤其明显。3.4 逻辑层校验规则与登录流程逻辑我用组合式 API 写完整代码script setup import { ref, reactive, computed } from vue import { onLoad } from dcloudio/uni-app const BASE_URL https://your-api.example.com const statusBarHeight ref(20) const active ref() const showPwd ref(false) const loading ref(false) const agreed ref(false) const errorTip ref() const form reactive({ account: , password: }) const errors reactive({ account: , password: }) onLoad(() { try { const info uni.getSystemInfoSync() statusBarHeight.value info.statusBarHeight || 20 } catch (e) { statusBarHeight.value 20 } }) const PHONE_RE /^1[3-9]\d{9}$/ const USERNAME_RE /^[a-zA-Z][a-zA-Z0-9_]{3,19}$/ function validateAccount() { const v form.account.trim() if (!v) { errors.account 请输入手机号或用户名 return false } if (!PHONE_RE.test(v) !USERNAME_RE.test(v)) { errors.account 格式不正确请检查后重试 return false } errors.account return true } function validatePassword() { const v form.password if (!v) { errors.password 请输入密码 return false } if (v.length 8 || v.length 20) { errors.password 密码长度需为 8-20 位 return false } errors.password return true } function onBlur(key) { active.value if (key account) validateAccount() if (key password) validatePassword() } function requestLogin(payload) { return new Promise((resolve, reject) { uni.request({ url: BASE_URL /api/v1/auth/login, method: POST, data: payload, timeout: 10000, header: { Content-Type: application/json }, success: (res) { if (res.statusCode 200 res.data res.data.code 0) { resolve(res.data.data) } else { const msg (res.data res.data.message) || 登录失败请稍后重试 reject(new Error(msg)) } }, fail: () reject(new Error(网络连接失败请检查网络)) }) }) } async function handleLogin() { if (loading.value) return errorTip.value const okA validateAccount() const okP validatePassword() if (!okA || !okP) { errorTip.value errors.account || errors.password return } if (!agreed.value) { uni.showToast({ title: 请先阅读并同意用户协议, icon: none }) return } loading.value true try { const data await requestLogin({ account: form.account.trim(), password: form.password, device: miniprogram }) uni.setStorageSync(access_token, data.token) uni.setStorageSync(token_expire, Date.now() (data.expiresIn || 7200) * 1000) uni.showToast({ title: 登录成功, icon: success, duration: 800 }) setTimeout(() { uni.switchTab({ url: /pages/index/index }) }, 800) } catch (err) { errorTip.value err.message || 登录失败 } finally { loading.value false } } function goRegister() { uni.navigateTo({ url: /pages/register/index }) } function goForgot() { uni.navigateTo({ url: /pages/forgot/index }) } function handleThird(type) { uni.showToast({ title: 功能开发中, icon: none }) } function openDoc(type) { uni.navigateTo({ url: /pages/webview/index?type${type} }) } /script几个决策点解释一下。为什么用 Promise 包 uni.request 而不用它的 promise 化。uni-app 在部分版本里确实支持不传 success 直接返回 Promise但这个行为在不同端的实现不一致App 端和小程序端有过差异。手写一层包装虽然多几行但可控性完全在自己手里错误分支也能统一处理。为什么校验放在 blur 和 submit 两处。只有 blur 校验的话用户点了按钮但没离开输入框错误提示不会出现体验是断的。只有 submit 校验的话用户填完一行要等到最后才知道错回改成本高。两边都做而且要保证 submit 时的校验覆盖所有字段这样最稳。token 存储。我用的是uni.setStorageSync简单直接。但要注意微信小程序的 Storage 是存在本地沙箱里的明文存 token 有一定风险。生产环境里我一般会加一层简单的混淆或者干脆缩短 token 有效期配合 refresh token。别把密码存进去这个是底线。3.5 动效与交互反馈这一版我刻意控制了动效的量只做了三处第一处是卡片入场。页面加载时卡片从下方 40rpx 的位置上浮并淡入.card { animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } keyframes cardIn { from { opacity: 0; transform: translateY(40rpx); } to { opacity: 1; transform: translateY(0); } }缓动函数用的是cubic-bezier(0.22, 1, 0.36, 1)这是一条快出慢入的曲线前段加速快、后段收得稳比ease-out更有分量感。时长 450ms 是个比较舒服的值低于 300ms 会觉得突兀高于 600ms 用户会觉得页面加载慢。第二处是按钮的按压反馈用hover-class.submit-btn-hover { transform: scale(0.97); opacity: 0.9; }hover-stay-time我设成了 80ms这是按压效果保留的时间。默认值是 400ms会让人觉得按钮粘手。80ms 刚好能让人察觉到反馈又不会拖沓。第三处是 loading 态。按钮在请求期间不改文案的长度登录中和登 录字数一样避免宽度跳动导致布局抖动。这一点很多人不注意按钮文案一变长度整个页面会跟着晃一下。提示动效的总量控制在三个以内。每多一个动效就多一份在低端机掉帧的风险。我曾经在一个登录页上加了六个动效结果在红米某款千元机上直接卡成了幻灯片最后砍到只剩两个。4. 真机适配与性能细节4.1 rpx 换算与不同屏幕的表现rpx 的规则是屏幕宽度恒等于 750rpx所以375px 宽的屏幕iPhone SE/81rpx 0.5px390px 宽的屏幕iPhone 141rpx ≈ 0.52px414px 宽的屏幕iPhone Plus1rpx ≈ 0.552px这意味着你写 30rpx 的字号在不同屏幕上实际是 15px、15.6px、16.56px。差异不大可以放心用。但有两个地方要注意一是边框。1rpx 的边框在部分安卓机上会渲染不出来因为 1rpx 换算过去是 0.5px 左右有些设备的物理像素密度不够会直接四舍五入成 0。解决办法是用1px写死或者用transform: scaleY(0.5)做一条伪 0.5px 的线。我在这个页面里的分割线用的是 2rpx就是为了避开这个问题。二是超大屏。折叠屏展开之后宽度可能接近 700px这时候 1rpx ≈ 0.93px所有元素都会等比放大看起来会有点虚。我一般的做法是给页面容器加一个最大宽度限制.login { max-width: 560px; margin: 0 auto; }这样在折叠屏或者 iPad 上内容不会撑得太开。4.2 状态栏与底部安全区状态栏高度必须动态取千万别写死。uni.getSystemInfoSync().statusBarHeight在微信小程序里返回的是 px 值单位不是 rpx所以绑定的时候直接用 pxview classstatus-bar :style{ height: statusBarHeight px }/view如果你在navigationStyle: custom的情况下还想要一个返回按钮那就要自己画一个并且高度是statusBarHeight 44px44px 是 iOS 导航栏的标准高度。底部安全区是另一个高频翻车点。iPhone 底部有一条 Home Indicator如果协议文字贴着底边会被它挡住.agreement { padding-bottom: calc(24rpx constant(safe-area-inset-bottom)); padding-bottom: calc(24rpx env(safe-area-inset-bottom)); }两行都要写constant()是给 iOS 11.0-11.2 用的旧语法env()是新语法。虽然现在基本没人用那么老的系统了但写上不亏有些老设备还在跑。4.3 键盘顶起与滚动穿透键盘弹起是登录页最容易出问题的地方。默认情况下小程序的 input 聚焦时页面会自动往上推但如果你的卡片是position: fixed或者有transform动画推上去之后可能就回不来了或者推的位置完全不对。我的处理方式不用 fixed 定位卡片让它自然流式布局这样键盘顶起时是整个页面滚动不会出现元素错位。用scroll-view包裹表单区域并且设置:scroll-yfalse默认不滚只在键盘弹起需要的时候才启用。给 input 加:adjust-positiontrue这是默认值显式写出来是为了让读代码的人知道这里是有意为之。给 input 加:cursor-spacing20这个值决定了光标距离键盘顶部的距离单位是 px。设成 20px 之后输入框不会被键盘压住。关于滚动穿透如果你在登录页上加了一个弹窗比如协议详情弹窗打开时背景页面不能滚。这个可以给背景容器加touchmove.stop.prevent或者用一个全局的overflow: hidden开关来控制。5. 踩坑记录常见问题速查5.1 样式不生效的几种典型情况现象可能原因解决办法渐变背景没显示用了background-color而不是background改成background: linear-gradient(...)文字颜色被覆盖小程序原生组件的样式优先级高于 class用!important或直接把样式写在行内圆角在安卓上失效父元素有overflow: visible且子元素溢出给父元素加overflow: hidden光斑 blur 边缘发虚高斯模糊半径过大超出渲染边界把光斑定位到屏幕外或用will-change提示阴影在 iOS 上不显示元素没有设置背景色加background: #FFFFFF其中第三行那个圆角在安卓上失效是最经典的。微信小程序在安卓端对border-radius 子元素溢出的处理和 iOS 不一样。一旦卡片里的某个子元素超出了卡片边界安卓上圆角就会被撑破看起来像是没生效。给卡片加overflow: hidden就能解决但要注意加了之后投影可能会被裁掉这时候要么把投影移到外层元素上要么用clip-path替代。5.2 交互异常排查问题点击按钮没反应但控制台也没报错。先检查是不是被挡住了。小程序里position: fixed的元素如果没设z-index会盖在同层元素上面。我遇到过一次背景光斑层的z-index忘了设虽然它opacity很低看起来是透明的但实际上挡住了大半个按钮的点击区域。给背景层设z-index: 0内容层设z-index: 1问题就解决了。问题密码框切换显示/隐藏之后光标跑到开头。这是小程序的已知行为。input 的password属性变化会触发组件重新渲染光标位置会重置。如果你的场景特别在意这个可以在切换前记录selection-start切换后恢复。不过对登录场景来说用户切换显示通常是为了确认输入内容不太在乎光标位置我就没处理。问题连续点击登录按钮发了两次请求。这就是if (loading.value) return这行的作用。但要注意loading.value true必须在所有校验通过、真正发起请求之前设置不能放在 await 之后否则两个点击会在同一个微任务里都通过检查。5.3 开发者工具与真机的差异这个必须单独说因为它坑了太多人。项目开发者工具真机blur 性能流畅低端机明显掉帧状态栏高度固定值因机型而异输入框聚焦不触发键盘触发键盘页面被顶起字体渲染接近系统字体安卓各厂商差异大渐变过渡平滑部分安卓机有轻微色带网络请求走本地代理受域名白名单限制关于最后一条登录页一定会有网络请求域名必须在小程序后台配置而且必须是 HTTPS。开发阶段可以在开发者工具里勾选不校验合法域名但上传体验版之后就不行了。这个坑几乎每个新项目都会踩一次。关于色带深色渐变在部分安卓机的屏幕上有明显的横条纹。缓解办法是在渐变层上面叠一层极低透明度的噪点图或者把渐变的两端颜色差值缩小一点。如果实在介意干脆改用纯色背景靠光斑来提供层次。6. 这套页面还能怎么改代码跑通之后剩下的是按自己的业务去调整。想更简洁把第三方登录那一段整块删掉只留账号密码加主按钮。很多工具类小程序其实不需要第三方入口多两个按钮反而分散注意力。想更有品牌感把背景渐变换成品牌主色的深浅两档光斑颜色也用主色的衍生色。Logo 换成真实图片注意控制图片尺寸在 200x200 以内格式用 WebP 或者压缩过度的 PNG。想加滑块验证在密码框和按钮之间插入一个滑块组件位置留给它 100rpx 的高度就够了。注意滑块组件的z-index要高于卡片因为它通常自己带一个position: fixed的拖拽层。想加国际化的手机号区号选择把账号输入框改成左侧区号 右侧号码的两段式结构左侧点击弹出一个picker。这样布局上需要把输入框的高度从 96rpx 提到 104rpx否则两段内容会挤。想接一键登录三大运营商的一键登录在小程序里是通过uni.login拿到 code然后后端去换取手机号。这个流程需要后端配合前端这边就是把主按钮下面加一行小字链接点击时调uni.login。注意uni.login拿到的 code 是一次性的用过就失效别在本地缓存。最后说个我自己的习惯。这套登录页的样式我一般会抽成一个独立的login.scss放在common/styles/下面页面里只留结构。原因是我后面做注册页、找回密码页的时候输入框、按钮、卡片的样式可以整套复用不用复制粘贴三遍。而且一旦设计要改比如圆角从 40rpx 调到 32rpx改一个文件就够了不会出现三个页面圆角不一样的情况。模板层也别写死把欢迎回来这种文案提到config里做多语言或者 A/B 测试的时候会省很多事。