uniApp打卡学习第07天：使用 uView 组件库美化登录页面
·
页面：pages/login/login.vue
学习内容：使用 uView 组件库 u-input / u-button 重构登录页、密码显隐切换、表单基础校验、页面跳转
学习时长：2 小时（40min 知识点 + 70min 编码 + 10min 问题整理）
前置环境：项目已全局引入 uView2、main.js 配置完成，Day6 原生表单代码可正常运行
一、今日核心知识点笔记（摘抄存档）
-
uView 内置表单组件优势 相比原生
input/button，uView 组件自带样式、图标、圆角、清空、密码模式等功能，无需手写大量 CSS，开发效率更高，界面更统一美观。 -
u-input 常用属性
v-model：延续双向绑定，同步输入框与数据变量placeholder：输入框默认占位提示文字prefixIcon：左侧图标，内置多套图标库，直接写图标名即可使用clearable：开启一键清空按钮，点击快速清空输入内容border：边框样式，surround代表全边框shape="round"：设置组件圆角样式:password="布尔值"：控制是否为密码密文模式（小程序标准用法，替代原生type="password"）
-
插槽 slot 组件预留的自定义区域，
slot="suffix"表示在输入框右侧插入自定义内容（本节课用来放眼睛图标）。 -
u-button 常用属性
type：按钮主题色，primary为主色调蓝色size：按钮尺寸，large为大号按钮shape="round"：按钮圆角block：按钮宽度占满父容器 100%
-
延时跳转 setTimeout 登录提示弹窗展示一小段时间后再跳转页面，提升用户体验，
语法：setTimeout(回调函数, 延时毫秒数)。 -
页面跳转 API
uni.switchTab：专门用于跳转到底部 tabBar 页面，跳转后会关闭当前非 tab 页面。
二、分步实操步骤
- 打开 HBuilderX，进入项目
edu_demo，找到pages/login/login.vue； - 删除文件内原有全部原生表单代码，粘贴下方完整带注释代码；
Ctrl + S保存文件，等待项目自动编译；- 关闭微信开发者工具，执行【运行】→【清理缓存】，重新运行到微信小程序；
- 功能测试：输入账号密码、点击清空按钮、切换密码显隐、点击登录按钮，校验弹窗与页面跳转。
三、完整代码 + 逐行超详细注释
<!-- =======================================
template：页面结构区域，所有显示内容写在这里！
============================================ -->
<template>
<!-- 页面最外层容器，控制整体内边距与布局-->
<view class="login-wrap">
<!-- 标题区域容器 -->
<view class="title-box">
<!-- 登录主标题 -->
<text class="main-title">用户登录</text>
<!-- 副标题，标注当前学习内容-->
<text class="sub-title">uView组件美化版</text>
<!-- ==========================================
uView表单容器
:model：绑定表单整体对象，统一管理所有表单字段
===============================================-->
<u-form :model="form" class="form-box">
<!-- 表单项容器，包裹单个输入框-->
<u-form-item>
<!-- ==================================
uView输入框组件，账号输入框
v-model：双向绑定表单中的username字段
placeholder：输入框默认提示文字
prefixIcon：左侧展示用户图标
clearable：开启右侧一键清空按钮
border="surround"：设置全包围边框
shape="round"：设置圆角样式
height：自定义输入框高度，单位rpx
======================================-->
<u-input
v-model="form.username"
placeholder="请输入登录账号"
prefixIcon="account"
clearable
border="surround"
shape="round"
height="80rpx"
/>
</u-form-item>
<!-- 密码表单容器 -->
<u-form-item>
<!-- =====================================
密码输入框
:password：绑定布尔值，true=密文，false=明文
prefixIcon：左侧展示锁形图标
========================================== -->
<u-input
v-model="form.password"
placeholder="请输入登录密码"
prefixIcon="lock"
:password="!showPwd"
border="surround"
shape="round"
height="80rpx"
/>
<!-- ======================================
具名插槽suffix：输入框右侧自定义区域
放置眼睛图标，实现密码显隐切换
=========================================== -->
<template slot="suffix">
<!--
uView图标组件
:name：动态切换图标名称
@click：点击切换showPwd布尔值
size：图标大小
color：图标颜色
-->
<u-icon
:name="showPwd ? 'eye-off' : 'eye-fill'"
@click="showPwd = !showPwd"
size="22"
color="#999"
></u-icon>
</template>
</u-form-item>
</u-form>
<!-- ===========================================
uView按钮组件 登录按钮
type="primary"：使用主题蓝色样式
size="large"：大号按钮
shape="round"：圆角按钮
block：按钮宽度铺满父容器
@click：绑定登录点击事件方法
================================================-->
<u-button
type="primary"
size="large"
shape="round"
block
@click="handleLogin"
class="login-btn"
>
立即登录
</u-button>
</view>
</view>
</template>
<!-- =============================================
script js 逻辑区域
定义数据、方法
================================================== -->
<script>
// Vue2 固定导出格式
export default {
// 页面数据
data() {
return {
// form对象：统一存放表单所有数据
form: {
username: "", // 账号变量
password: "" // 密码变量
},
//控制密码显示/隐藏的布尔变量
//false = 密码密文（默认） true = 密码明文
showPwd: false
}
},
// 方法存放区域
methods: {
/**
* 登录点击事件方法
* 功能：非空校验、弹窗提示、延时跳转到首页
*/
handleLogin(){
// 校验账号是否为空
if(!this.form.username){
uni.showToast({
title: "账号不能为空",
icon: "none" // 纯文字提示，不展示默认图标
})
// 终止后续代码执行
return
}
// 校验密码是否为空
if(!this.form.password){
uni.showToast({
title: "密码不能为空",
icon: "none"
})
return
}
// 非空校验通过，打印表单数据到控制台，方便调试
console.log("当前登录信息：");
console.log("用户名：" + this.form.username);
console.log("密码：" + this.form.password);
// 弹出登录成功提示
uni.showToast({
title: "登录成功",
icon: "success"
})
/**
* 延时跳转
* 第一个参数：延时结束后执行的函数
* 第二个参数：延时时间，单位：毫秒（ms），800ms=0.8s
*/
setTimeout(()=>{
// uni.switchTab：跳转到底部tab对应的页面
// 非 tab 页面跳转使用 uni.navigateTo
uni.navigateTo({
url: "/pages/index/index"
})
}, 800)
},
// 页面加载生命周期，今日无额外逻辑，空置
onLoad(options){
}
}
}
</script>
<!-- =================================
STYLE 样式区域
scoped 只作用当前页面
====================================== -->
<style scoped lang="scss">
/* 页面整体外层容器 */
.login-wrap{
/* 顶部大边距，让页面整体下移，布局更美观 */
padding: 120rpx 60rpx 0;
/* 开启弹性布局 */
display: flex;
/* 弹性布局方向：垂直排列 */
flex-direction: column;
/* 水平方向居中对齐 */
align-items: center;
}
/* 标题容器 */
.title-box{
margin-bottom: 80rpx;
text-align: center;
}
/* 主标题样式 */
.main-title{
font-size: 42rpx;
font-weight: bold;
color: #333;
}
/* 副标题样式 */
.sub-title{
display: block; /* 独占一行 */
font-size: 26rpx;
color: #999;
margin-top: 15rpx;
}
/* 表单整体容器 */
.form-box{
width: 100%;
margin-bottom: 60rpx;
}
/* 登录按钮额外边框 */
.login-btn{
margin-top: 20rpx;
}
</style>四、功能验收打卡（逐项勾选）
☐ 页面正常加载，标题、输入框、按钮样式展示正常
☐ 账号输入框：可正常输入、一键清空按钮生效、左侧图标显示正常
☐ 密码输入框：默认密文，点击右侧眼睛图标可切换明文 / 密文
☐ 账号 / 密码为空时点击登录，弹出对应非空提示
☐ 账号密码填写完整后，弹出登录成功提示，0.8 秒后自动跳转到首页
☐ 微信开发者工具控制台无报错、无警告
☐ 理解 u-input、u-button、插槽、延时跳转的用法
五、知识点补充笔记
- 插槽使用场景 当组件自带样式不满足需求时，使用
slot插入自定义标签、图标、文字，是组件二次开发常用方式。 uni.switchTab注意点 仅用于跳转配置在tabBar中的页面，跳转后无法通过返回键回到当前登录页；非 tab 页面跳转使用uni.navigateTo。- scss 说明 uView 组件依赖 SCSS 预处理器，代码中
lang="scss"不可删除，否则样式失效。
六、拓展练习（选做，巩固知识点）
- 修改
u-input的height属性，调整输入框高度，观察页面变化； - 更换
prefixIcon图标名称，尝试不同内置图标； - 修改
setTimeout中的延时时间，体验不同跳转速度。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
6
0- 0
已为社区贡献2条内容
所有评论(0)