目录
- [⏳ 前情回顾](#⏳ 前情回顾)
- [🎯 本节目标](#🎯 本节目标)
- 为什么要专门设计一个"登录页"？
- 第一步：数据建模------动态协议管理
- 第二步：搭建后台配置管理页
- 第三歩：创建小程序
- 第四步：搭建登录页
-
- [4.1 创建变量](#4.1 创建变量)
- [4.2 搭建页面布局](#4.2 搭建页面布局)
- 第五步：编写登录核心逻辑（自定义方法）
- 第六步：微搭后台关键设置
- [🚀 下一讲预告](#🚀 下一讲预告)
⏳ 前情回顾
在前面的章节中，我们已经完成了教务管理系统的核心逻辑，包括教室管理、线索转化以及复杂的自动化排课系统。现在，我们要将目光投向学员端------也就是家长们使用的微信小程序。
作为小程序开发的第一步，登录页的建设至关重要，它不仅是用户进入系统的门户，更是合规性的第一道防线。
🎯 本节目标
- 理解合规性：掌握微信小程序隐私协议要求与微搭登录机制的平衡。
- 数据建模 ：创建
SystemConfig（系统配置表），用于动态管理协议内容。 - 页面逻辑设计：规划一个既符合微信规范又能顺畅接入微搭登录体系的登录流程。
为什么要专门设计一个"登录页"？
在微搭低代码平台中，应用是需要启用登录后才可以进行访问。但在微信生态下，我们需要处理两个核心矛盾：
- 微信隐私合规：微信官方要求小程序的首页必须支持公开访问，不能在用户一进入小程序时就强制弹出登录框，且必须在收集用户信息前展示清晰的《用户协议》和《隐私协议》。
- 微搭权限控制：自从合并回云开发，如果不登录获取不到用户的身份信息，所以应用必须启用登录。
我们的解决方案 ：
在微搭中将"登录页"设置为公开访问页面，并将其设为首页。用户在该页面阅读并勾选协议后，再触发云开发的登录动作。
第一步：数据建模------动态协议管理
为了方便后期修改协议内容（如更新公司名称、服务条款等），我们不建议将协议文字写死在页面上，而是通过一张"系统配置表"来动态读取。
创建数据源：SystemConfig (系统配置表)
| 字段名称 | 字段标识 | 类型 | 说明 |
|---|---|---|---|
| 用户协议 | user_agreement |
富文本 | 存储详细的服务条款内容 |
| 隐私协议 | privacy_policy |
富文本 | 存储详细的隐私保护政策 |
💡 业务价值：
使用富文本字段可以支持在后台直接编辑协议的排版（加粗、列表等），修改后小程序端会立即生效，无需重新发布审核小程序。
第二步：搭建后台配置管理页
为了让管理员能够随时修改协议内容，我们需要在管理后台搭建一个简单的配置页面。
打开管理后台，点击创建页面的图标，创建隐私管理页面
删除网格布局，添加布局组件
继续添加数据表格组件
点击使用数据源生成表格，选择系统配置表，勾选场景
切换到页面布局，添加菜单
第三歩：创建小程序
现在我们已经有了完善的管理后台，供管理员录入数据。录入数据我们需要搭建一个小程序给用户展示数据。
打开微搭低代码，切换到小程序应用，点击从空白新建
输入应用的名称，启用登录
第四步：搭建登录页
回到页面设计，先修改一下页面的名称
我们要搭建这样的布局
4.1 创建变量
为了从数据库里读取我们的协议内容，我们需要先创建一个变量。在代码区，点击新建
选择新建内置数据表查询
数据表选择系统配置表
4.2 搭建页面布局
按照我们的原型规划，先搭建LOGO。在第一行的第一列里添加普通容器
里边添加一个图标组件
设置普通容器的宽和高各位60，背景色为#1A90FF，圆角为10
布局设置为横向排列，水平垂直居中
将图标的颜色配置为白色
给外层的普通容器设置布局，设置为横向排列，水平居中
第二行第一列里添加普通容器，添加两个文本组件
设置普通容器的布局为纵向排列，水平垂直居中
修改文本内容，改为我们的小程序名称和口号
第三行的列里放置普通容器，添加按钮和普通容器
设置普通容器的布局为纵向排列，水平垂直居中
设置按钮的宽为200，圆角半径设置为20
隐私协议这块我们自己搭建，如果用复选框组件还得覆盖样式比较麻烦
在普通容器里添加两个图标组件，一个设置为圆圈，一个设置为对号
继续添加三个文本组件，文本内容设置为用户协议、和、隐私协议
创建一个布尔值变量用来控制图标的显示和隐藏
给对号图标绑定条件展示，绑定我们的变量
给圆圈图标绑定条件展示，绑定为我们变量的取反
然后给图标配置点击事件，设置变量赋值，对变量取反就可以
在页面组件中添加弹窗组件，里边添加富文本展示
绑定我们的用户协议
再添加一个弹窗组件，绑定我们的隐私协议
给文本添加点击事件，打开弹窗
第五步：编写登录核心逻辑（自定义方法）
在微搭低代码中，我们需要通过"自定义方法"来实现点击登录按钮时的逻辑校验。
创建自定义方法：handleLogin
javascript
/**
* 登录按钮点击事件处理
* 逻辑：校验协议勾选 -> 提示/跳转
*/
export default async function({event, data}) {
try {
// 1. 获取协议勾选框的状态
const isAgreed = $w.page.dataset.state.isAgreed;
if (!isAgreed) {
// 2. 未勾选时弹出温馨提示
$w.utils.showToast({
title: '请先阅读并勾选协议',
icon: 'error',
duration: 2000
});
return;
}
// 3. 已勾选，执行登录跳转
// 模拟登录成功后的跳转逻辑
// pageId 请替换为您实际的首页 ID（如 'home' 或 'index'）
$w.utils.navigateTo({
pageId: 'index'
});
} catch (e) {
console.error(e);
$w.utils.showToast({
title: '操作失败: ' + e.message,
icon: 'error'
});
return ;
} finally {
}
}选中登录按钮，在"事件"页签中添加"点击"触发，动作选择"执行自定义方法" -> handleLogin。
第六步：微搭后台关键设置
为了让用户能看到这个页面，点击应用配置，将登录页设置为公开访问
🚀 下一讲预告
登录完成后，用户将正式进入小程序。下一讲我们将开始搭建**"学员主页"**，展示孩子的课程表、剩余课时等核心数据，开启家长的数字化教培体验。