H5页面调用微信授权获取code

H5调用微信授权获取code（微信公众号微信页面开发网页授权）

一、首先你要有一个公众号（公众号、订阅号），微信公众平台配置。

1、获取基础信息（APPID（前后端都需要）、APPsecret（后端需要）、IP白名单（后端提供，配置在公众号这里））。

1647488321959-5071dd31-c39b-4894-843a-c8987361d5ed.png

2、配置网页授权域名(切记域名格式，不需要带上https://)

WechatIMG92.png

3、有校验文件需要下载下来给后端开发

WeChatf70182f098421638f795a47be284c194.png

二、前端开发

1、判断是否微信浏览器

// 判断是否为公众号模拟器环境
    const isWechat = () => {
        return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
    }

2、访问特定微信链接来获取code

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

WeChat1aeabd56b19142682a4e26695e8df80b.png
WeChatc272536731536f5b233523bc563f23eb.png

三、总结踩坑敲黑板

1、公众号后台重定向域名一定要配置和你开发测试环境一致

2、APPID、前后端一致

3、真机测试，微信右上角弹出框的复制链接是拿不到带有code链接的地址的，可以分享到QQ就能看到带有code的链接了。

WeChatcdd03618bde7e7586245969af9651314.png