微搭低代码MBA 培训管理系统实战 25——小程序用户登录与账号绑定

目录前情回顾与本节目标第一步数据模型准备1.1 学员档案表MBA_StudentProfiles1.2 班级表MBA_Classes1.3 班级花名册表MBA_ClassRosters第一步创建应用第二步创建门户页面2.1 创建首页2.2 搭建账号绑定弹窗第三步实现登录与账号绑定逻辑3.1 创建登录检查方法3.2 创建账号绑定方法最终效果总结前情回顾与本节目标在前述章节中我们已经完成了管理后台的搭建包括销售、财务、教务、教师相关角色。当学员分班成功后需要登录小程序进行签到。登录小程序之前需要和学员表创建的账号进行绑定本节我们将正式打通用户登录与账号绑定的闭环。本节核心目标微搭登录认证基于云开发内置的$w.auth.currentUser获取已登录用户的 OpenID账号绑定验证在门户页初始化时根据 OpenID 查询学员档案表未绑定则引导绑定手机号验证绑定用户输入手机号进行账号绑定验证通过后更新学员档案的 OpenID 字段个人信息展示绑定成功后跳转到我的页面展示学员个人信息及班级信息第一步数据模型准备1.1 学员档案表MBA_StudentProfiles确保系统中已存在学员档案表核心字段如下字段名称字段标识字段类型说明学员ID_id文本主键系统自动生成学员姓名student_name文本姓名手机号mobile文本用于登录和账号绑定微信OpenIDopenid文本学员微信OpenID用于小程序端登录和权限控制关联班级rel_class_id关联关系关联 Classes 表记录学员所在班级学籍状态status枚举1-在读、2-休学、3-毕业、4-退费入学时间enroll_date日期入学日期1.2 班级表MBA_Classes用于关联查询学员所在班级信息字段名称字段标识字段类型说明班级ID_id文本主键班级名称class_name文本班级名称课程类型course_type文本课程类型班主任teacher_name文本班主任姓名1.3 班级花名册表MBA_ClassRosters用于记录学员与班级的关联关系一个学员可能关联多个班级字段名称字段标识字段类型说明花名册ID_id文本主键系统自动生成关联学员rel_student_id多对一关联 StudentProfiles 表关联班级rel_class_id多对一关联 Classes 表关联课时卡rel_card_id多对一关联课时卡表学员状态status枚举1-在读、2-休学、3-毕业、4-退费入班日期join_date日期时间加入班级日期退班日期leave_date日期时间退出班级日期备注remark文本备注信息第一步创建应用在搭建小程序之前需要先创建应用。打开控制台选择小程序应用点击从空白创建输入小程序的名称启用登录切换到基础设置绑定小程序点击添加微信小程序点击扫码认证授权根据弹出的授权提示进行授权绑定小程序即可第二步创建门户页面2.1 创建首页点击设计页面将页面重命名为首页2.2 搭建账号绑定弹窗在页面组件下添加弹窗组件设置标题为账号绑定在弹窗内容添加电话输入组件在代码区创建变量来控制弹窗是否显示创建全局变量用来保存用户的登录信息给弹窗的默认打开状态绑定我们的布尔值变量第三步实现登录与账号绑定逻辑3.1 创建登录检查方法在页面中创建自定义方法checkLoginexportdefaultasyncfunctioncheckLogin({event,data}){try{$w.utils.showLoading({title:加载中...});// 1. 从云开发原生 auth 对象中获取当前已登录用户的 OpenIDconstopenid$w.auth.currentUser?.openId||123;if(!openid){$w.utils.hideLoading();return$w.utils.showToast({title:获取授权信息失败请重新登录,icon:error});}// 2. 根据 OpenID 查询学员档案表conststudentResawait$w.cloud.callDataSource({dataSourceName:MBA_StudentProfiles,methodName:wedaGetRecordsV2,params:{filter:{where:{openid:{$eq:openid}}},select:{$master:true,rel_class_id:true// 关联查询班级信息}}});// 3. 判断是否找到学员档案if(!studentRes.records||studentRes.records.length0){// 未找到显示账号绑定弹窗$w.page.dataset.state.isBindModalVisibletrue;$w.utils.hideLoading();return;}// 4. 已绑定保存用户信息并跳转到我的页面conststudentstudentRes.records[0];// 查询班级花名册获取在读班级constrosterResawait$w.cloud.callDataSource({dataSourceName:MBA_ClassRosters,methodName:wedaGetRecordsV2,params:{filter:{where:{$and:[{rel_student_id:{$eq:student._id}},{status:{$eq:1}}// 1-在读]}},select:{$master:true,rel_class_id:true,// 关联查询班级信息rel_card_id:true}}});// 构造用户信息对象constuserInfo{...student,classInfo:rosterRes.records||[]// 班级花名册列表可能多个班级};// 保存到全局状态$w.app.dataset.state.currentUseruserInfo;$w.utils.hideLoading();}catch(e){console.error(登录检查失败,e);$w.utils.hideLoading();$w.utils.showToast({title:系统加载失败请刷新重试,icon:error});}}给页面的显示事件绑定我们的检查登录方法3.2 创建账号绑定方法创建自定义方法bindAccountexportdefaultasyncfunctionbindAccount({event,data}){try{constphone$w.inputPhone1.value;// 1. 校验手机号if(!phone||phone.trim()){return$w.utils.showToast({title:请输入手机号,icon:error});}// 简单的手机号格式校验constphoneRegex/^1[3-9]\d{9}$/;if(!phoneRegex.test(phone.trim())){return$w.utils.showToast({title:手机号格式不正确,icon:error});}$w.utils.showLoading({title:绑定中...});// 2. 根据手机号查询学员档案conststudentResawait$w.cloud.callDataSource({dataSourceName:MBA_StudentProfiles,methodName:wedaGetRecordsV2,params:{filter:{where:{mobile:{$eq:phone.trim()}}},select:{$master:true,rel_class_id:true}}});// 3. 判断是否找到学员if(!studentRes.records||studentRes.records.length0){$w.utils.hideLoading();return$w.utils.showModal({title:提示,content:该手机号尚未开通账号请联系管理员,showCancel:false});}conststudentstudentRes.records[0];// 4. 获取当前用户的 OpenIDconstopenid$w.auth.currentUser?.openId||123;if(!openid){$w.utils.hideLoading();return$w.utils.showToast({title:获取授权信息失败,icon:error});}// 5. 更新学员档案的 openid 字段await$w.cloud.callDataSource({dataSourceName:MBA_StudentProfiles,methodName:wedaUpdateV2,params:{data:{openid:openid},filter:{where:{_id:{$eq:student._id}}}}});// 6. 绑定成功关闭弹窗保存用户信息$w.app.dataset.state.isBindModalVisiblefalse;// 5. 根据学员ID从班级花名册获取班级信息学员状态1-在读constrosterResawait$w.cloud.callDataSource({dataSourceName:MBA_ClassRosters,methodName:wedaGetRecordsV2,params:{filter:{where:{$and:[{rel_student_id:{$eq:student._id}},{status:{$eq:1}}// 1-在读]}},select:{$master:true,rel_class_id:true// 关联查询班级信息}}});// 构造用户信息对象constuserInfo{...student,openid:openid,classList:rosterRes.records||[]// 班级花名册列表可能多个班级};// 保存到全局状态$w.app.dataset.state.currentUseruserInfo;// 清空输入$w.app.dataset.state.bindPhone;$w.utils.hideLoading();$w.utils.showToast({title:绑定成功,icon:success});$w.modal1.close({})}catch(e){console.error(账号绑定失败,e);$w.utils.hideLoading();$w.utils.showToast({title:绑定失败请重试,icon:error});}}给弹窗的确认按钮绑定事件调用我们的方法最终效果打开首页弹出电话绑定窗口输入电话点击确认完成用户的绑定后续就可以查看课表进行签到了总结本节我们完成了小程序用户登录与账号绑定的完整流程数据模型准备建立了学员档案表和班级表包含 OpenID 字段用于小程序登录门户页登录检查页面加载时自动获取当前用户的 OpenID查询学员档案表账号绑定流程未绑定用户显示弹窗要求输入手机号根据手机号查询学员档案未找到则提示尚未开通账号找到则更新 OpenID 字段完成绑定下一节我们将实现课程预约功能让学员可以在小程序中预约上课。