微信小程序开发之注册登录

环境

• 微信开发者工具 Stable 1.06.2306020
• 云开发控制台 v1.5.47
• 调试基础库 2.32.2

需求

微信小程序的用户天然就是微信用户。但是，在此基础上，小程序可以有自己的用户管理，管理的是业务用户。比如说，A用他的手机，打开某个微信小程序，他可以登录自己的小程序账号（身份是教师），也可以登录B的小程序账号（身份是学生）。虽然在同一个微信账号下，但是小程序的账号是不同的。相应的，就需要有一套用户管理机制，在小程序里可以注册用户、登录、退出登录。

此外，小程序还应提供“微信一键登录”的功能，这样用户就不必记忆用户名和密码，可以直接通过微信账号登录小程序。当然，用户也可以使用账号密码的方式登录，二者的效果是一样的。

不管使用哪种登录方式，登录成功后，需将登录状态缓存在前端，这样，即使关闭了小程序，下次再打开时，就不用重新登录了。当然，用户可以显式退出登录。

分析

普通方式

如果不考虑微信环境，那么注册用户、登录、退出登录等功能，和其它平台相比，没有任何特殊之处：用户注册后，将信息持久化在后台数据库，下次用户登录时，后台验证用户名和密码，然后返回成功或者失败的消息。

微信方式

用户选择“微信一键登录”时，后台需要查看是否已经绑定用户名和openid（openid可以理解为微信用户针对小程序的唯一ID）。

• 如果已经绑定，则后台无需再验证用户名和密码，直接返回登录成功的消息（以及用户信息）。
• 如果尚未绑定，则后台返回“尚未注册”的消息，前端跳转到注册页面，注册功能和普通方式相同，唯一区别是持久化时，将用户信息和openid绑定。

设计

页面

有4个页面：

• 主页面（ myMain ）：业务相关，和注册登录关系不大（提供“退出登录”功能）
• 登录页面（ myLogin ）：提供微信一键登录、账号密码登录、用户注册功能
• 账号密码登录页面（ myLoginById ）：用户在此页面输入账号密码
• 注册页面（ myRegister ）：用户在此页面注册账号

页面之间的跳转关系以及对应的登录状态：

• 打开小程序，进入主页面。查看本地缓存的登录状态，如果尚未登录，则显示“登录”按钮；如果已经登录，则显示“退出登录”按钮。
  • 点击“登录”按钮，跳转到登录页面。
  • 点击“退出登录”按钮，退出登录状态。
• 登录页面提供微信一键登录、账号密码登录、用户注册3个按钮。
  • 点击“微信一键登录”按钮，如果登录成功，则跳转到主页面，并在本地缓存登录状态；如果登录失败（尚未绑定用户），则跳转到注册页面。
  • 点击“账号密码登录”按钮，跳转到账号密码登录页面。
  • 点击“用户注册”按钮，跳转到注册页面。
• 在账号密码登录页面，用户输入账号和密码，点击“登录”按钮。如果登录成功，则跳转到主页面，并在本地缓存登录状态；如果登录失败（用户名或密码有误），则仍留在本页面。
• 在注册页面，用户输入账号和密码，点击“注册”按钮。如果注册成功，则跳转到主页面，并在本地缓存登录状态；如果注册失败（用户名已存在），则仍留在本页面。

注意：有两种方式可以跳转到注册页面，“微信一键登录”和“账号密码登录”，这两种方式的不同之处在于，注册成功之后，前者需要和openid做绑定，后者不需要。

云函数

有3个云函数：

• myLoginById() ：接收账号密码，验证其正确性，返回登录结果。
• myLoginByWeixin() ：查询openid是否已绑定某个账号。如果已经绑定，则返回成功，并返回用户信息；如果尚未绑定，则返回失败（严格说也不算失败，只是接下来用户需要补充注册信息）。
• myRegister() ：接收账号密码，查询账号是否已存在。如果账号不存在，则持久化用户信息，并返回成功；如果账号已存在，则返回失败。

代码

https://git.weixin.qq.com/wx_wxb6b7b29f5024c210/demoLogin

注：本例是为了演示注册登录的功能，只做了一个非常简单的原型，请聚焦在功能性上，忽略其它不足之处：

• 外观：没有使用CSS美化页面
• 逻辑：没有数据校验，比如ID和密码是否为空，密码长度和复杂度
• 安全性：基本没有安全措施，本地缓存登录状态，也只是简单的记录了一下用户ID

运行的注意事项

• 在云开发数据库中，确保已创建表 table0614
• 选中该表，然后点击“数据权限”页，选择“所有用户可读，仅创建者可读写”
• 本项目中，云函数没有上传部署，如果想要运行小程序，请在开发者工具中，右键单击“cloudfunctions”，选择“开启云函数本地调试”。在打开的窗口中，依次点击每个云函数，勾选右边的“开启本地调试”选项
• 注意：即使没有打开云函数本地调试，调用云函数也不会报错，而且会有返回内容。本例只是简单demo，并没有检查返回内容，一律当作是云函数返回的。所以，如果没有打开本地云函数，将导致逻辑有误，且并不报错（比如myOpenid会是“undefined”）。因此，切记要打开云函数本地调试（或者上传云函数）

测试案例

测试1

在未登录状态下打开小程序，进入“未登录的主页面”。

测试2

在已登录状态下打开小程序，进入“已登录的主页面”。

测试3

在已登录主页面，点击“退出登录”按钮，退出登录，显示未登录的主页面。

测试4

在未登录主页面，点击“登录”按钮，进入登录页面。

测试5

在登录页面，点击“微信一键登录”按钮（openid已绑定），进入已登录主页面。

测试6

在登录页面，点击“微信一键登录”按钮（openid未绑定），进入注册页面。

测试7

通过“微信一键登录”进入的注册页面，填写ID和密码，注册成功，进入已登录的主页面。

如果ID已存在，则注册失败。

测试8

在登录页面（参见测试4）点击“用户注册”按钮，进入用户注册页面。

填写ID和密码，注册成功，进入已登录的主页面。

如果ID已存在，则注册失败。

测试9

在登录页面（参见测试4）点击“账号密码登录”按钮，进入账号密码登录页面。

填写用户名和密码，登录成功，跳转到已登录主页面。

注意两种账号都需要测试一下：

• 普通注册的账号
• 通过微信一键登录注册的账号

填写错误的用户名和密码，登录失败。

参考

• https://developers.weixin.qq.com/miniprogram/dev/framework