互联网医院13用户体系基石——账号注册与登录态的“无感恢复”

1. 用户登录设计思路

很多初次接触低代码的开发者，还是按照既定思维，一上来就搭建个登录页面，要求用户输入用户名和密码进行登录。

这个思路是错的，因为云开发本身提供了登录，你自己搭建一个也无法绕过他的机制。

如果只是使用云开发自带的登录也是不行的，他的用户名和密码登录只针对内部用户，小程序无法使用。

而外部用户局限性很大，输入手机号和验证码就登录注册了，有的小程序需要后台审核才可以使用，这就没办法自定义权限。

而且外部用户的数据表是封闭的，一个是不能通过API读取数据，第二是不可以修改表结构，更不要说做什么权限控制了。

我们在设计的时候就需要先做一个业务表，我们来自己控制结构和权限，实现我们的业务规则。

2. 数据库设计：用户基础信息表

这张表非常轻量，只存用户的身份信息，不存身份证号等敏感医疗数据。

表名：t_user(用户基础表)

3. 用户登录流程

当你已经通过云开发的登录页面，访问到我的页面的时候，这个时候从当前登录对象里就可以获取到用户的手机号。我们可以用这个手机号去查询用户表，如果找到数据，说明这个用户已经注册了，那我们就显示头像和昵称。如果没有找到数据，说明尚未注册，提供注册按钮供用户注册。

4. 个人中心页面搭建

4.1 创建页面

点击创建页面的图标，创建我的页面

切换到布局设计，选择tab栏导航布局，配置我的菜单

4.2 创建变量

先创建一个内置数据表查询，用来读取用户信息

因为编辑器里是获取不到用户的手机号的，我们可以创建一个全局变量来方便调试

配置查询条件的时候，我们就可以先去查用户的手机号，没有我们就给全局的手机号

$w.auth.currentUser.phone||$w.app.dataset.state.phone

然后创建一个页面变量，用来防止页面的抖动

4.3 调用登录

变量定义好之后，什么时候初始化呢？我们可以在页面的生命周期函数中进行加载。选中页面组件，设置页面显示的事件

调用数据查询，触发执行

执行成功时将我们的isLoading设置为false

4.4 视图搭建：根据状态动态切换

低代码本身的机制是比较慢的，他区分不同的版本，个人版查询速度最慢，标准版其次，企业版要稍好一点。

这就会带来一个问题，你会看到页面一加载既有用户注册的视图，又有用户登录的视图，等数据加载完了才会出现一个唯一的视图。

这时候我们就需要用isLoading来控制，先添加一个普通容器，里边添加一个普通容器和一个网格布局

给普通容器绑定条件展示，作为第一个出现的视图

里边添加一个文本组件，显示数据正在加载中

网格布局的条件展示，我们取反就可以

4.5 显示昵称和头像

数据加载完毕之后，我们就需要显示用户的头像和昵称，在网格布局的第一列里添加普通容器，里边添加图片组件和普通容器

设置外层的普通容器布局为横向排列

设置图片的布局模式为裁剪填满，设置宽和高各为60


绑定图片地址，如果用户登录了就从用户的头像绑定，如果未登录我们给一个素材

内层普通容器里添加文本和按钮组件

文本组件也是一样的，如果登录了显示用户的昵称，如果未登录显示匿名用户

给按钮绑定条件展示

这样我们的登录视图就搭建好了

5. 总结

通过这套机制，我们实现了：

1. 安全：用户只能注册自己的手机号。
2. 稳健：无论用户怎么切后台，只要再次打开小程序，onShow里的查询逻辑就会自动恢复用户身份，不会出现“变量为空”的白屏 Bug。
3. 体验：注册完成后无需跳转，视图原地刷新，无缝衔接。