uni-app微信公众号web JS-SDK开发之二授权登录

关注

VIP免费原创最新推荐文章于 2026-08-30 12:25:59 发布 912 阅读 AI 写同款· GEO 优化 ›

调用微信 JSSDK 接口，实现微信登录、自定义分享、支付功能 4、通过支付核心参数调用 wx.requestPayment() 发起支付。1、通过wx.login()获取code、调用后端接口获取openid；2、调用后端接口创建订单，获取orderId；3、调用后端接口获取支付核心参数，预支付；以微信小程序支付为例。阅读详情

前言

不了解如何接入JS-SDK的可以先看看上篇文章uni-app微信公众号web JS-SDK开发之一接入

目标

通过微信授权登录到系统

微信登录原理

在这里插入图片描述
注意上面的域名信息

实现微信登录

先看一下微信文档了解一下：网页授权

回调域名配置(必须配置，是页面不是接口)

在这里插入图片描述

后端实现code换OpenId

使用weixin-java-mp

maven依赖

 <dependency>
    <groupId>com.github.binarywang</groupId>
     <artifactId>weixin-java-mp</artifactId>
     <version>3.9.0</version>
 </dependency>

我没用starter版，自己定义更灵活

初始化WxMpService

@Component
public class WxMpServiceDaemon {
   
   
    private WxMpService wxMpService;
    private String configHash;

    /**
     * get后不要缓存，因为会被因配置的改变而实时刷新
     */
    public WxMpService getWxMpService() {
   
   
        if (StringUtils.isBlank(ProjectWxMpConfigBean.INSTANCE.getAppId())) {
   
   
            throw new RuntimeException(