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