目录
- 1 布局设计
- 2 创建全局变量
- 3 创建用户表
- 4 搭建页面布局
- 5 创建注册页面
- 6 启用登录
- 7 发布预览
- 总结
上一篇我们介绍了低代码中用户的分类以及如何给各种类型用户开通权限，有了基本的认知，我们就进入具体的搭建环节。本篇我们介绍一下医疗小程序的用户注册功能。
1 布局设计
一般小程序会提供一个我的菜单，进入之后先是匿名访问，要求用户进行注册，注册成功之后就可以使用小程序各种功能模块。
首先需要搭建小程序的通用布局，提供底部菜单切换功能。打开我们的小程序应用，点击页面布局图标，切换到tab栏导航布局
配置底部菜单，分别配置首页、就医助手、消息中心、医院信息、个人中心
回到页面设计，点击创建页面图标创建个人中心页面
2 创建全局变量
用户是否注册，我们通过全局变量来进行判断。在代码区的全局菜单里点击创建，选择自定义变量
变量的类型选择对象，打开持久化配置
全局变量加载的时候我们通过在页面的生命周期函数中去读取数据，为此需要创建用户表来保存用户的信息。
3 创建用户表
点击MySQL数据库，切换到数据模型，点击+号创建
创建用户表，添加昵称、头像、电话、openid四个字段
4 搭建页面布局
选中页面组件，设置导航栏的背景色为蓝色
在第一行的列里添加普通容器，设置背景色为蓝色
在普通容器里添加一个普通容器，里边放置图片组件和文本组件
设置普通容器的布局为横向排列，垂直居中
设置图片的宽和高各为60，10px的圆角
在未登录的时候我们显示一个默认头像，如果已登录就显示用户自己的头像，从素材里粘贴默认头像的路径
然后点击图片的地址属性的fx，输入如下表达式
$w.app.dataset.state.user.touxiang||"https://lowcode-5gjsvmcpbf91914b-1256989349.tcloudbaseapp.com/resources/2025-05/lowcode-2285650"然后设置文本组件的文本内容的fx，输入如下表达式
$w.app.dataset.state.user.yonghunichen||"未登录"然后添加按钮组件，给外层的普通容器设置布局，横向排列，两端对齐，垂直居中
按钮组件设置边框颜色和文字颜色为白色，高为30
:root {
color: rgb(255, 255, 255);
border: 1px solid rgb(255, 255, 255);
height: 30px;
}5 创建注册页面
当点击账户绑定时候，我们要跳转到注册页面，这个时候需要先创建一个用户注册页面。点击创建页面的图标，创建注册页面
页面中添加表单容器，数据模型选择医疗用户表
选中用户昵称组件，在输入框属性打开小程序端获取用户昵称配置
选中图片组件，在图片内容打开小程序端获取用户头像配置
选中电话组件，设置输入值，从currentUser对象里绑定电话属性
选中openid组件，输入值绑定为currentUser的openid属性
选中表单容器组件，表单容器成功时添加一个返回上一页的事件
回到个人中心页面，给账号绑定配置点击事件，打开我们的用户注册页面
6 启用登录
我们现在自动获取了用户的手机号和openid，要想获取这两个数据，需要先启用登录。在登录方式里，我们启用匿名登录和短信验证码登录
登录页我们启用短信验证码
点击配置图标
公开访问配置添加个人中心、首页，登录页改为默认登录页
点击同步按钮使配置生效
每次配置之后需要等待10分钟，登录配置才起作用
7 发布预览
一切配置好就可以发布进行测试了，点击发布按钮
发布方式选择体验版，数据来源选择体验数据。因为我们是用的手机号作为登录验证的标识，所以发布小程序和H5效果是一样的，我们可以发布成H5进行测试
因为我们将首页和个人中心设置为了公开访问，所以打开个人中心是不需要登录的
点击账号绑定就会跳转到登录页拦截请求
输入手机号验证码就可以跳转到我们的注册页面
总结
本篇我们介绍了用户注册功能的搭建，注册的话总是先从个人中心进行引导，然后跳转到注册页面。注意这里要启用小程序的登录功能，这样才可以获取到云开发的身份信息，而不是直白的直接将用户信息写入表里。
