目录
写在最前面的话
在当今的数字化时代，小程序已经成为了连接用户与服务的重要桥梁。而刷题小程序，更是广大学子提升自我、备考冲刺的得力助手。但你是否想过，这样一个便捷、实用的小程序背后，它的管理后台是如何搭建的呢？
今天，我们的iVX实战课程就将带你一探究竟。在本课程的第一课中，我们将从零开始，一步步教你如何搭建刷题小程序的管理后台登录页。无论你是初学者还是有一定基础的开发者，都能在这次课程中找到属于自己的收获。
那么，你是否已经准备好了呢？接下来，就让我们一起踏入这次充满挑战与机遇的编程之旅，共同打造出一个功能完善、操作便捷的刷题小程序管理后台登录页吧！
博主也差不多也算是iVX的开发老手了，复杂度也突破到10万+，废话不多说，直接上图：
预览效果（后面附离线文档教程）：
第一步：访问iVX官网，创建应用
步骤：打开Google浏览器 → 访问iVX官网 → 即可跳转到iVX官网当中 → 进入编辑器 → 创建组应用（这里选择5.0版本作为示范）→ 创建应用名称为“刷题小程序管理后台” → 完成创建
进入iVX官网：
进入编辑器，创建组应用：
创建应用名称为“刷题小程序管理后台”：
认识界面分区：
第二步：调整应用的初始大小
步骤：进入应用 → 选择右上角的 电脑/手机符号 → 切换为电脑屏幕大小（这里以小屏作为演示）
第三步：添加页面组件
步骤：鼠标选择前台 → 添加 组件区 的 容器组件 当中的 页面组件（页面只能添加在前台下）→ 选中页面组件，重命名为“登录页” → 设置页面属性
登录页面组件属性：
属性名称 属性值 水平对齐 居中 垂直对齐 居中 溢出效果 使用y轴 隐藏滚动条 是
添加页面组件：
设置页面属性：
第四步：制作炫酷冒气泡背景（附源码）
步骤：选中登录页面组件 → 添加 组件区 容器组件 当中的 横幅（绝对定位）以及基础元件 当中的 网页组件 → 分别对这两个组件设置属性和重命名
横幅组件属性：
属性名称 属性值 水平对齐 靠左 垂直对齐 顶部 整体布局 中心 宽度 100% 高度 100%
网页组件属性：
属性名称 属性值 HTML代码 填入下方即可
添加横幅和网页组件：
设置横幅和网页属性：
炫酷冒气泡HTML+CSS代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>炫酷冒气泡背景</title> <style> body, html { height: 100%; margin: 0; overflow: hidden; background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); } .bubble { position: absolute; border-radius: 50%; opacity: 0; pointer-events: none; animation: bubbleUp infinite; } @keyframes bubbleUp { 0% { bottom: -100px; opacity: 0; } 50% { opacity: 1; } 100% { bottom: 100vh; opacity: 0; } } /* 生成多组气泡，每组数量逐渐减少 */ .bubble-group-bottom .bubble { animation-duration: 8s; } .bubble-group-middle .bubble { animation-duration: 10s; } .bubble-group-top .bubble { animation-duration: 12s; } /* 底部气泡组 */ .bubble-group-bottom .bubble:nth-child(1) { width: 20px; height: 20px; background-color: rgba(255, 255, 255, 0.5); left: 10%; animation-delay: 0s; } .bubble-group-bottom .bubble:nth-child(2) { width: 25px; height: 25px; background-color: rgba(255, 255, 255, 0.4); left: 15%; animation-delay: 1s; } /* ... 添加更多底部气泡 ... */ .bubble-group-bottom .bubble:nth-child(10) { width: 30px; height: 30px; background-color: rgba(255, 255, 255, 0.1); left: 50%; animation-delay: 9s; } /* 中间气泡组 */ .bubble-group-middle .bubble:nth-child(1) { width: 25px; height: 25px; background-color: rgba(255, 255, 255, 0.4); left: 20%; animation-delay: 2s; } .bubble-group-middle .bubble:nth-child(2) { width: 30px; height: 30px; background-color: rgba(255, 255, 255, 0.3); left: 30%; animation-delay: 4s; } /* ... 添加更多中间气泡 ... */ .bubble-group-middle .bubble:nth-child(5) { width: 35px; height: 35px; background-color: rgba(255, 255, 255, 0.1); left: 45%; animation-delay: 8s; } /* 顶部气泡组 */ .bubble-group-top .bubble:nth-child(1) { width: 30px; height: 30px; background-color: rgba(255, 255, 255, 0.3); left: 30%; animation-delay: 6s; } .bubble-group-top .bubble:nth-child(2) { width: 35px; height: 35px; background-color: rgba(255, 255, 255, 0.2); left: 40%; animation-delay: 10s; } /* ... 添加更多顶部气泡 ... */ /* 注意：顶部气泡数量最少，可以根据需要调整 */ </style> </head> <body> <!-- 底部气泡组 --> <div class="bubble-group-bottom"> <div class="bubble"></div> <div class="bubble"></div> <!-- ... 添加更多底部气泡 ... --> <div class="bubble"></div> </div> <!-- 中间气泡组 --> <div class="bubble-group-middle"> <div class="bubble"></div> <div class="bubble"></div> <!-- ... 添加更多中间气泡 ... --> <div class="bubble"></div> </div> <!-- 顶部气泡组 --> <div class="bubble-group-top"> <div class="bubble"></div> <div class="bubble"></div> <!-- ... 添加更多顶部气泡 ... --> </div> </body> </html>
第五步：制作管理员登录区域
步骤：选中登录页面组件 → 添加 组件区 容器组件 当中的 绝对定位容器组件 → 选中绝对定位容器双击重命名为“登录” → 设置容器属性
绝对定位容器组件属性：
属性名称 属性值 宽度 320px 高度 430px 边框圆角 2px 自定义样式01 伪类：hover 小驼峰：boxShadow 属性值：0 0px rgba(80,163,162,0.15), 0 0px 50px 0 rgba(80,163,162,0.2) 自定义样式02 伪类：无 小驼峰：transition 属性值：0.8s 自定义样式03 伪类：hover 小驼峰：transform 属性值：translate(0,-15px)
添加绝对定位容器：
设置绝对定位容器属性：
5.1：添加两个文本组件
步骤：选中登录绝对定位容器 → 添加 组件区 基础元件 当中的 文本组件 → 绘制两个文本组件 → 分别设置两个文本组件的属性
大标题文本组件属性：
属性名称 属性值 内容 学海帆舟（一般为您的Logo名称） X坐标 60px Y坐标 70px 宽度 200px 高度 50px 文字颜色 #FFFFFF 文字字号 36px 字体样式 加粗 文本字体 鸿蒙字体 水平对齐 居中 垂直对齐 居中
小标题文本组件属性：
属性名称 属性值 内容 管理后台 X坐标 60px Y坐标 130px 宽度 200px 高度 20px 文字颜色 #FFFFFF 文字字号 36px 字体样式 加粗 文本字体 鸿蒙字体 水平对齐 居中 垂直对齐 居中
添加文本组件：
设置文本组件属性：
5.2：制作登录账号输入框
步骤：选中登录绝对定位容器 → 添加 组件区 容器组件 当中的 对象组组件 → 选中对象组，重命名为“账号” → 添加 基础元件 当中的 两个图标组件、输入框组件 → 分别设置所有组件的属性
账号对象组 组件属性：
属性名称 属性值 X坐标 20px Y坐标 190px 宽度 280px 高度 40px 背景颜色 rgba(255,255,255,0.3)
左侧图标组件属性：
属性名称 属性值 图标素材 账号图标（图标下载链接） X坐标 12px Y坐标 12px 宽度 16px 高度 16px 图标颜色 #FFFFFF
账号输入框组件属性：
属性名称 属性值 多行输入 否 输入类型 文本 提示语 输入管理员账号（可以自定义） X坐标 0px Y坐标 0px 宽度 280px 高度 40px 内边距左 35px 内边距右 65px 文字字号 16px 文本字体 鸿蒙字体（字体下载链接） 文字颜色 #FFFFFF 提示文本颜色 rgba(255,255,255,0.4) 溢出效果 显示省略号 边框宽度 1.0 边框颜色 #DCE1E6 聚焦时边框颜色 #468CF0 边框圆角 4px
右侧图标 组件属性：
属性名称 属性值 图标素材 关闭 X坐标 252px Y坐标 12px 宽度 16px 高度 16px
添加对象组：
添加图标和输入框：
设置对象组属性：
设置左侧图标属性：
设置右侧图标属性：
设置账号输入框属性：
5.3：制作登录密码输入框
步骤：选中账号输入框 → 右键/Ctrl+C 复制 → 选中登录绝对定位容器 → 右键/Ctrl+V 粘贴 → 修改粘贴的对象组，重命名为“密码” → 添加两个 组件区 基础元件当中 的图标组件 → 对里面的组件命名为：左侧图标（密码图标）、输入框（密码输入框）、右侧三个图标（显示密码图标、隐藏密码图标、清空密码输入框图标）→ 点击小眼睛将 隐藏密码图标 隐藏
显示密码图标 组件属性：
属性名称 属性值 X坐标 226px Y坐标 12px 宽度 16px 高度 16px 图标颜色 #FFFFFF
隐藏密码图标 组件属性：
属性名称 属性值 X坐标 226px Y坐标 12px 宽度 16px 高度 16px 图标颜色 #FFFFFF
复制并添加完图标组件完成的结果图：
5.4：添加登录按钮
步骤：选中登录绝对定位容器 → 添加 组件区 基础元件 当中的 按钮组件 → 设置按钮属性
登录按钮 组件属性：
属性名称 属性值 按钮文本 Login（可以自定义） X坐标 20px Y坐标 315px 宽度 280px 高度 45px 文字颜色 #50A3A2 文字字号 16px 文字字体 鸿蒙字体 字体样式 加粗 边框圆角 2px
添加登录按钮：
设置登录按钮属性：
第六步：完成前端逻辑事件
6.1：添加清空输入框事件
步骤：选中账号对象组 当中的 右侧图标 → 点击编辑界面最右侧一列的“事件” → 给组件加上前端事件“清空账号输入框” → 可见属性添加空值判断为“当账号输入框为空，值为false”
同样的方法选择密码对象组的关闭图标，添加如上的同样事件及绑定
清空账号输入框事件：
清空密码输入框事件：
绑定账号对象组当中的 清空图标组件可见属性：
绑定密码对象组当中的 清空图标组件可见属性：
6.2：添加显示/隐藏密码事件
步骤：选中密码对象组 → 添加一个布尔变量 用于监听用户点击行为 → 布尔变量命名为“是否显示密码”（密码当前显示则为true，隐藏为false，默认值为false）→ 绑定密码输入框 输入类型 数据 → 添加显示密码图标事件“设置是否显示密码布尔变量为true” → 添加隐藏密码图标事件“设置是否显示密码布尔变量为false” → 绑定条件值判断显示密码图标和隐藏密码图标的可见属性（密码输入框非空且是否显示密码为true 显示 隐藏密码图标，反之则为显示密码图标）
6.3：绑定登录按钮的禁用属性
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
