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

article/2025/9/16 20:15:35

环境

  • 微信开发者工具 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

http://chatgpt.dhexx.cn/article/CBpHKL3E.shtml

相关文章

【微信小程序】--注册小程序账号安装开发者工具(一)

💌 所属专栏:【微信小程序开发教程】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! &#…

微信小程序-创建自己的小程序帐号

1 百度“微信公众平台”,进入官网https://mp.weixin.qq.com/ 2 用你的微信扫码登录,没有的话去注册 3 安装开发者工具(自己摸索下,一直点击下一步就OK了) 4 创建自己的一个微信小程序 这里的appID,我们在网页中的开…

微信小程序账号注册流程

微信小程序账号注册流程 开发微信小程序需要注册账号,记录一下注册流程 ~ 进入微信公众平台 (qq.com),右上立即注册按钮 绑定邮箱 验证发送过来的邮件 激活成功后即可在主界面利用账号登录,这个账号就是你刚刚注册的邮箱 之后需要进项信息…

微信小程序注册审核流程

哈喽,各位亲爱的小伙伴们,大家好!今天给大家介绍如何在微信官方注册小程序 ,文章不长,一定要耐心看完,你会收获满满的。 小程序注册流程 1.在微信公众平台官网首页(mp.weixin.qq.com&#xff…

微信小程序激活账号时,提示“此帐号已激活,请使用帐号密码直接登录”

最近准备研究下微信小程序,先去申请个小程序账号。于是乎,在通过邮件中的链接激活账号时,遇到了这个问题。 解决方法 你没看错,就是字面的意思,去登录页,点击使用账号登录,千万不要扫码登录。 …

微信小程序开发账号找回

系列文章目录 今天要使用微信小程序开发账号,结果发现我之前的账号因为时间过去的太久了,导致被冻结,当时也用不到,所以也就没有关注到这个问题,但是现在忽然又要使用,只好点击找回账号信息。历经坎坷&…

微信小程序账号注册初始化环境搭建

1.小程序账号注册 账号注册https://mp.weixin.qq.com/ 点开发管理 保存自己的AppID,一会创建小程序的时候会用到 2.点击下载微信小程序开发工具 注意安装的路径,不能有中文 微信小程序开发工具下载https://developers.weixin.qq.com/miniprogram/d…

微信小程序开发入门教程-小程序账号注册及开通

17年小程序开始公测,经过5年的发展,无论从组件、开发工具、api、生态、社区,都已经发展的非常成熟了。如果17年年初你看小程序,觉得无需安装即用即走还是一个理念的话。站在今天看过去,往往是先提出一个先进的理念&…

小程序账号注册完整流程以及开发配置

忘记过去,超越自己 ❤️ 博客主页 单片机菜鸟哥,一个野生非专业硬件IOT爱好者 ❤️❤️ 本篇创建记录 2023-05-06 ❤️❤️ 本篇更新记录 2023-05-06 ❤️🎉 欢迎关注 🔎点赞 👍收藏 ⭐️留言📝&#x1f64…

微信小程序账号注册和APPID申请

微信公众平台 点击这个链接,然后点击下面的小程序,进行注册就可以了。 注册号以后,登陆完毕 找到开发管理 点击开发管理,然后点击开发设置,就可以看到APPID了。

微信小程序注册入口及流程(完整版教程)

微信小程序注册是免费的,在腾讯云微信公众平台即可注册,无论是个人、企业都可以免费注册微信小程序,先输入邮箱注册激活,然后填写主体类型对应的证件信息,最后管理员身份验证使用维信扫一扫即可,小程序5来详…

小程序账号注册完整流程

概述 在开始写微信小程序之前,必须先有小程序账号,本文将使用图文的方式,详细的介绍整个注册的过程。 选择注册类型 打开微信公众平台(https://mp.weixin.qq.com)后,点击立即注册按钮。 点击完【立即注册】后,注册类型选择小程序。 点击小程序图标…

第一课:两种方法教你如何注册小程序账号

一、小程序注册前的准备 在小程序注册过程中我们会用到的资料: 1、邮箱:填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱; 2、企业营业执照; 3、企业对公账户以及开户地点; 4、小程序管理员手机号码(用来接收验证码); 5、小程序管理员…

数据清洗的几种常用手段

数据清洗主要是删除原始数据集中的无关数据、重复数据,过滤与挖掘主题无关的数据,处理缺失值和异常值。 缺失值的处理办法 1、不处理 2、删除记录 3、数据插补 a、插补均值、中位数、众数 b、使用固定值,用一个常量替换。如一个普通工人的工资…

20190328-几种数据清洗的方法

文章目录 清洗有缺失的行(存在空值、null值等)改变分隔符提取年、月、日等信息去除第一个和最后一个字符 清洗有缺失的行(存在空值、null值等) 源数据 [yaomaster data]$ head -2 tmall-201412-1w.csv 13764633023 2014-12-01 …

数据清洗的一般方法和步骤

在正式分析数据前,我们通常需要先预处理一下数据,比如筛选有效样本,定义变量格式,处理缺失值等,这些操作也就是是数据清洗的过程,目的是把数据整理成比较清洁的形式,便于后续处理。R的tidyverse…

关于数据清洗的常见方式

1. 探索性分析 探索性分析部分,对于整个数据来讲是获得对数据一个初步的认识以及对先验知识的一个探索分析过程,在我做相关数据挖掘的过程中,主要是利用python相关的科学计算库进行数据初步的探索,例如数据类型,缺失值…

数据清洗的主要类型及步骤

一、数据清洗的定义 数据清洗是指发现并纠正数据文件中可识别的错误的最后一道程序,包括检查数据一致性,处理无效值和缺失值等。数据清洗从名字上也看的出就是把“脏”的“洗掉”,指发现并纠正数据文件中可识别的错误的最后一道程序&#xf…

数据清洗的一些梳理

(欢迎转载到个人朋友圈,转载时请带原文链接,公众号和其他媒体转载前请私信联系本人获取授权) 首先对MayaG表示感谢,这篇文章是被你提的问题激发出的灵感,非常感谢~ 数据清洗, 是整个数据分析过程…

Linux awk命令详解

Linux awk命令详解 一、awk 工作原理 逐行读取文本,默认以空格或tab键为分隔符进行分隔,将分隔所得的各个字段保存到内建变量中,并按模式或者条件执行编辑命令。 sed命令常用于一整行的处理,而awk比较倾向于将一行分成多个“字段…