当前位置：首页 > news >正文

少儿舞蹈小程序（21）我的页面搭建

news 2025/10/2 6:56:31

1 登录注册逻辑

我们在前述章节中已经详细讲解了登录的逻辑，对应的API已经编写完毕。在搭建页面的时候，在什么时机调用登录的方法呢？答案是使用页面的生命周期函数

先创建一个我的页面
在这里插入图片描述
选中页面组件，在页面显示的时候调用我们全局的登录方法

这种在页面加载完毕后就知道了用户是否已经是登录的状态。

除了前端展示我们还需要完善一下后端的API，在用户登录的时候将用户的扩展信息如家长信息和教师信息一并查询出来

/*** 用户登录API* 根据openid查询用户表，如果存在返回用户信息，并标识是否为注册用户*/module.exports = async function (params, context) {try {// 获取openid参数const openid = params.openid;// 参数校验if (!openid) {return {code: 400,message: 'openid不能为空',data: null,timestamp: Date.now()};}// 查询用户当前信息（使用查询单条记录的语法）const userResult = await context.callModel({dataSourceName: 'dance_users',methodName: 'wedaGetItemV2',params: {filter: {where: {openid: { $eq: openid }}},select: { $master: true }}});// 检查用户是否存在if (!userResult || Object.keys(userResult).length === 0) {return {code: 404,message: '用户不存在',data: null,timestamp: Date.now()};}// 判断是否为注册用户（通过是否有手机号来判断）const isRegistered = !!userResult.phone;// 3. 查询用户收货地址列表const userAddresses = await context.callModel({dataSourceName: 'user_addresses',methodName: 'wedaGetRecordsV2',params: {filter: {where: {// 通过用户ID关联查询user_id: { $eq: userResult._id }}},// 按照是否默认进行排序，将默认地址排在最前面select : {"$master" : true},getCount : true,pageSize : 10,pageNumber : 1,orderBy:[{"is_default":"desc"}]}});// 4. 查询家长信息const parentInfo = await context.callModel({dataSourceName: 'dance_parent',methodName: 'wedaGetRecordsV2',params: {filter: {where: {// 通过用户ID关联查询user_id: { $eq: userResult._id }}},// 按照是否默认进行排序，将默认地址排在最前面select : {"$master" : true},getCount : true,pageSize : 1,pageNumber : 1,}});// 5. 查询老师信息const teacherInfo = await context.callModel({dataSourceName: 'dance_teacher',methodName: 'wedaGetRecordsV2',params: {filter: {where: {// 通过用户ID关联查询user_id: { $eq: userResult._id }}},// 按照是否默认进行排序，将默认地址排在最前面select : {"$master" : true},getCount : true,pageSize : 1,pageNumber : 1,}});// 返回用户信息return {code: 200,message: '登录成功',data: {userInfo: userResult,isRegistered: isRegistered,userAddresses: userAddresses.records,parentInfo:parentInfo.records[0],teacherInfo:teacherInfo.records[0]},timestamp: Date.now()};} catch (error) {console.error('用户登录错误:', error);return {code: 500,message: '服务器内部错误',data: null,timestamp: Date.now()};}
};

2 搭建页面布局

2.1 未登录视图

首先是搭建未登录的视图
在这里插入图片描述
在网格布局的第一列里添加普通容器，里边添加一个普通容器和一个按钮组件，设置外层容器的样式为横向排列，两端对齐

内层的普通容器添加一个图片组件，添加两个文本，设置布局为横向排列，垂直居中
在这里插入图片描述
设置图片的宽高各为60，圆角半径为999

绑定图片的地址，从全局变量绑定头像字段

文本组件绑定为全局变量的昵称字段

设置相关组件的背景色，配置好之后如下图

给登录按钮设置点击事件，打开角色选择页面
在这里插入图片描述
给按钮设置条件展示，当用户未注册的时候显示登录按钮

2.2 搭建登录视图

登录之后用户的头像和昵称无需再额外设置，只需要再添加一个按钮，显示修改即可
在这里插入图片描述
修改的条件展示配置为用户已经登录显示

2.3 修改家长信息

我们在上一篇用表单容器搭建了注册页面，通常注册和修改是可以共用一个页面的。只是在打开的时候需要知道是新增的场景还是修改的场景，如果是修改的场景需要知道数据标识。

为此我们创建两个URL参数用来接收从我的页面传入的数据
在这里插入图片描述
在表单场景使用表达式进行绑定

$w.page.dataset.params.formType || 'create'

数据标识也绑定成URL参数
在这里插入图片描述

按照此方法，将老师的注册表单也进行完善
在这里插入图片描述

2.4 按照角色跳转

在登录的时候无需判断角色，让用户选择身份跳转即可。在修改的时候我们需要知道用户是什么身份，在用户表我们已经增加了角色字段，因此在点击的时候增加一个自定义方法进行跳转即可

export default function ({ event, data }) {const role = $w.app.dataset.state.user.userInfo.roleif (role == "1") {$w.utils.navigateTo({pageId: 'u_jia_chang_zhu_ce', // 页面 Idparams: { formType: 'edit',parentId:$w.app.dataset.state.user.parentInfo._id }});}else if(role=="2"){$w.utils.navigateTo({pageId: 'u_lao_shi_zhu_ce', // 页面 Idparams: { formType: 'edit',teacherId:$w.app.dataset.state.user.teacherInfo._id }});}}