ruoyi-vue-pro 开发指南 ruoyi-vue-pro 开发指南
  • 萌新必读
  • 后端手册
  • 中间件手册
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 会员手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
  • 运维手册
  • 前端手册 Vue 2.x
  • 前端手册 Vue 3.x
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 会员手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
视频教程
  • Vue3 + element-plus (opens new window)
  • Vue3 + vben(ant-design-vue) (opens new window)
  • Vue2 + element-ui (opens new window)
微服务版 (opens new window)
作者博客 (opens new window)
GitHub (opens new window)
  • 萌新必读
  • 后端手册
  • 中间件手册
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 会员手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
  • 运维手册
  • 前端手册 Vue 2.x
  • 前端手册 Vue 3.x
  • 工作流手册
  • 大屏手册
  • 支付手册
  • 会员手册
  • 商城手册
  • ERP 手册
  • CRM 手册
  • AI 大模型手册
  • IoT 物联网手册
  • 公众号手册
  • 系统手册
视频教程
  • Vue3 + element-plus (opens new window)
  • Vue3 + vben(ant-design-vue) (opens new window)
  • Vue2 + element-ui (opens new window)
微服务版 (opens new window)
作者博客 (opens new window)
GitHub (opens new window)
  • 萌新必读

    • 简介
    • 交流群
    • 视频教程
    • 功能列表
    • 快速启动(后端项目)
    • 快速启动(前端项目)
    • 接口文档
    • 技术选型
    • 项目结构
    • 代码热加载
    • 一键改包
    • 迁移模块(适合新项目)
    • 删除功能(以租户为例)
    • 表结构变更(版本升级)
    • 国产信创数据库(DM 达梦、大金、OpenGauss)
    • 如何去除 Redis 缓存
    • 内网穿透
    • 面试题、简历模版、简历优化
    • 项目外包
  • 后端手册

    • 新建模块
    • 代码生成【单表】(新增功能)
    • 代码生成【主子表】
    • 代码生成(树表)
    • 功能权限
    • 数据权限
    • 用户体系
    • 三方登录
    • OAuth 2.0(SSO 单点登录)
    • SaaS 多租户【字段隔离】
    • SaaS 多租户【数据库隔离】
    • WebSocket 实时通信
    • 异常处理(错误码)
    • 参数校验、时间传参
    • 分页实现
    • VO 对象转换、数据翻译
    • 文件存储(上传下载)
    • Excel 导入导出
    • 操作日志、访问日志、异常日志
    • MyBatis 数据库
    • MyBatis 联表&分页查询
    • 多数据源(读写分离)、事务
    • Redis 缓存
    • 本地缓存
    • 异步任务
    • 分布式锁
    • 幂等性(防重复提交)
    • 请求限流(RateLimiter)
    • HTTP 接口签名(防篡改)
    • 单元测试
    • 验证码
    • 工具类 Util
    • 配置管理
    • 数据库文档
  • 中间件手册

    • 定时任务
    • 消息队列(内存)
    • 消息队列(Redis)
    • 消息队列(RocketMQ)
    • 消息队列(RabbitMQ)
    • 消息队列(Kafka)
    • 限流熔断
  • 工作流手册

    • 工作流演示
    • 功能开启
    • 工作流(达梦适配)
    • 审批接入(流程表单)
    • 审批接入(业务表单)
    • 流程设计器(BPMN)
    • 流程设计器(钉钉、飞书)
    • 选择审批人、发起人自选
    • 会签、或签、依次审批
    • 流程发起、取消、重新发起
    • 审批通过、不通过、驳回
    • 审批加签、减签
    • 审批转办、委派、抄送
    • 执行监听器、任务监听器
    • 流程表达式
    • 流程审批通知
  • 大屏手册

    • 报表设计器
    • 大屏设计器
  • 支付手册

    • 功能开启
    • 支付宝支付接入
    • 微信公众号支付接入
    • 微信小程序支付接入
    • 支付宝、微信退款接入
    • 支付宝转账接入
    • 微信转账接入
    • 钱包充值、支付、退款
    • 模拟支付、退款
  • 会员手册

    • 功能开启
    • 微信公众号登录
    • 微信小程序登录
      • 1. 小程序准备
      • 2. 代码实现
        • 2.1 项目启动
        • 2.2 登录流程
    • 微信小程序订阅消息
    • 微信小程序码
    • 会员用户、标签、分组
    • 会员等级、积分、签到
  • 商城手册

    • 商城演示
    • 功能开启
    • 商城装修
    • 在线客服
    • 【商品】商品分类
    • 【商品】商品属性
    • 【商品】商品 SPU 与 SKU
    • 【商品】商品评价
    • 【交易】购物车
    • 【交易】交易订单
    • 【交易】售后退款
    • 【交易】快递发货
    • 【交易】门店自提
    • 【交易】分销返佣
    • 【营销】优惠劵
    • 【营销】积分商城
    • 【营销】拼团活动
    • 【营销】秒杀活动
    • 【营销】砍价活动
    • 【营销】满减送活动
    • 【营销】限时折扣
    • 【营销】内容管理
    • 【统计】会员、商品、交易统计
  • ERP手册

    • ERP 演示
    • 功能开启
    • 【产品】产品信息、分类、单位
    • 【库存】产品库存、库存明细
    • 【库存】其它入库、其它出库
    • 【库存】库存调拨、库存盘点
    • 【采购】采购订单、入库、退货
    • 【销售】销售订单、出库、退货
    • 【财务】采购付款、销售收款
  • CRM手册

    • CRM 演示
    • 功能开启
    • 【线索】线索管理
    • 【客户】客户管理、公海客户
    • 【商机】商机管理、商机状态
    • 【合同】合同管理、合同提醒
    • 【回款】回款管理、回款计划
    • 【产品】产品管理、产品分类
    • 【通用】数据权限
    • 【通用】跟进记录、待办事项
  • AI大模型手册

    • AI 大模型演示
    • 功能开启
    • AI 聊天对话
    • AI 绘画创作
    • AI 知识库
    • AI 音乐创作
    • AI 写作助手
    • AI 思维导图
    • AI 工具(function calling)
    • AI 工作流
    • Dify 工作流
    • FastGPT 工作流
    • Coze 智能体
    • 【模型接入】OpenAI
    • 【模型接入】通义千问
    • 【模型接入】DeepSeek
    • 【模型接入】字节豆包
    • 【模型接入】腾讯混元
    • 【模型接入】硅基流动
    • 【模型接入】MiniMax
    • 【模型接入】月之暗灭
    • 【模型接入】百川智能
    • 【模型接入】文心一言
    • 【模型接入】LLAMA
    • 【模型接入】智谱 GLM
    • 【模型接入】讯飞星火
    • 【模型接入】微软 OpenAI
    • 【模型接入】谷歌 Gemini
    • 【模型接入】Stable Diffusion
    • 【模型接入】Midjourney
    • 【模型接入】Suno
  • IoT物联网手册

    • 功能开启
  • 公众号手册

    • 功能开启
    • 公众号接入
    • 公众号粉丝
    • 公众号标签
    • 公众号消息
    • 自动回复
    • 公众号菜单
    • 公众号素材
    • 公众号图文
    • 公众号统计
  • 系统手册

    • 短信配置
    • 邮件配置
    • 站内信配置
    • 数据脱敏、字段权限
    • 敏感词
    • 地区 & IP 库
  • 运维手册

    • 开发环境
    • Linux 部署
    • Docker 部署
    • Jenkins 部署
    • 宝塔部署
    • HTTPS 证书
    • 服务监控
  • 前端手册 Vue 3.x

    • 开发规范
    • 菜单路由
    • Icon 图标
    • 字典数据
    • 系统组件
    • 通用方法
    • 配置读取
    • CRUD 组件
    • 国际化
    • IDE 调试
    • 代码格式化
  • 前端手册 Vue 2.x

    • 开发规范
    • 菜单路由
    • Icon 图标
    • 字典数据
    • 系统组件
    • 通用方法
    • 配置读取
  • 更新日志

    • 【v2-5-1】开发中
    • 【v2.5.0】2025-05-13
    • 【v2.4.2】2025-04-12
    • 【v2.4.1】2025-02-09
    • 【v2.4.0】2024-12-31
    • 【v2.3.0】2024-10-07
    • 【v2.2.0】2024-08-02
    • 【v2.1.0】2024-05-05
    • 【v2.0.1】2024-03-01
    • 【v2.0.0】2024-01-26
  • 开发指南
  • 会员手册
芋道源码
2023-12-24
目录

微信小程序登录

前置阅读文章:

  • 《用户体系》
  • 《三方登录》

本文是 《三方登录》 的延伸,讲解 yudao-mall-uniapp (opens new window) 商城小程序如何实现微信 小程序 登录的功能。

# 1. 小程序准备

友情提示:

本文,我们以“测试小程序”举例子,方便大家操作,认证一个小程序太难了!!!

① 参考 微信小程序测试号申请 (opens new window) 链接,申请一个测试小程序。

② 将 AppID 和 AppSecret 配置,设置到后端项目 application-local.yaml 的 wx.miniapp 配置项中。如下图所示:

测试小程序 - 密钥

 配置项

③ 使用 HBuilder 打开 yudao-mall-uniapp 项目根目录的 manifest.json 文件,将微信小程序配置的 AppID 改成你自己的。如下图所示:

配置小程序

# 2. 代码实现

# 2.1 项目启动

① 下载 微信开发者工具 (opens new window),并进行安装。

② 参考 《快速启动【前端】》 文档的「2. uni-app 商城移动端」小节,将 yudao-mall-uniapp 商城项目跑起来。

不过要注意,HBuilder 运行时,选择「微信开发者工具」。如下图所示:

微信开发者工具运行

③ 运行成功后,可以在微信开发者工具中,看到如下界面:

商城首页

如果请求报错,注意勾选下“不校验合法域名、web-view(业务域名)”选项。

补充说明:如果你是正式的小程序,需要额外看下这部分的内容:

① 在小程序的 [管理 -> 成员管理] 菜单,添加自己微信号为开发者。如下图所示:

添加开发者成员

否则,使用 HBuilder 运行时,会报“[微信小程序开发者工具] [error] Error: Fail to open IDE”!

# 2.2 登录流程

① 点击「我的」菜单,再随便点个子菜单,例如说“拼团订单”,触发弹出“登录窗口”,对应前端 sheep/components/s-auth-modal/s-auth-modal.vue 组件。如下图所示:

登录弹窗

有两种登录方式:微信小程序登录 (opens new window)、手机快速验证登录 (opens new window)

② 方式一:【微信小程序登录】点击「微信登录」图标,触发微信小程序登录。前端核心实现都在 sheep/platform/provider/wechat/miniProgram.js 的 #login(...) 方法中。

此时,前端调用微信小程序获得“临时” code 授权码参数,之后调用后端的 AppAuthController 的 #socialLogin(...) 方法,进行登录逻辑。注意:

  • 情况一:如果该微信用户已经绑定会员用户,则直接进行登录
  • 情况二:如果该微信用户没有绑定会员用户,则会自动创建一个会员用户,并进行登录。下次重新登录时,就走【情况一】的逻辑。

之后,会弹出“授权信息”窗口,对应 sheep/components/s-auth-modal/components/mp-authorization.vue 组件。如下图所示:

授权信息

  • 注意:该弹窗仅仅用于微信小程序的昵称、头像的获取,用户实际已经登录成功了。

③ 方式二:【手机快速验证登录】点击「快捷登录」按钮,触发一键登录。前端核心实现都在 sheep/platform/provider/wechat/miniProgram.js 的 #mobileLogin(...) 方法中。

此时,前端调用用微信小程序获得“临时” code 授权参数 + “手机” code 授权参数,之后调用后端的 AppAuthController 的 #weixinMiniAppLogin(...) 方法,进行登录逻辑。注意:

  • 情况一:如果该手机已经注册用户,则直接进行登录
  • 情况二:如果该手机没有注册用户,则会自动创建一个会员用户,并进行登录。下次重新登录时,就走【情况一】的逻辑。

为什么此时要获得“临时” code 授权参数呢?主要想把微信小程序的 openid 和用户绑定起来,毕竟方式二【手机快速验证登录】是需要收费的!!!

微信公众号登录
微信小程序订阅消息

← 微信公众号登录 微信小程序订阅消息→

Theme by Vdoing | Copyright © 2019-2025 芋道源码 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×