微信扫码登陆——网页内嵌版防坑指南

最新推荐文章于 2025-03-03 17:02:52 发布

_默_

最新推荐文章于 2025-03-03 17:02:52 发布

阅读量2k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44599143/article/details/105443639

版权

不对技术进行说明，仅说坑点及注意事项，想看技术的可以略过了，本人小白一个，正文开始:

网站备案

首先公司网站需要去微信开放平台认证，注意不是微信公众平台也不是开放文档，是开放平台

微信开放平台

链接:https://open.weixin.qq.com/
然后进行备案

在这里写网站域名

注意，这里域名为网站根域名，要是本地的化就用localhost:端口号，例如localhost:2000，
此时就可以准备写代码了

代码

因为使用的是内嵌网页的扫码登陆，所以不对单独页面的扫码登陆进行描述

var obj = new WxLogin({
					self_redirect: true,
					id: this.QR_code,//这个id是你在网页里<div id='QR_code'></div>的id
					appid: this.appid,//去开放平台看
					scope: "snsapi_login",//写死'snsapi_login'
					redirect_uri: this.redirectUri,//经过urlencode编码后的网站页面，扫码后展示的网页
					//此页面为微信扫码成功后的跳转页面，最好为网站内单独空白页，原因会在之后描述
					state: this.state,//自定义参数
					style: "black",//背景色
					href: "https://www.古月孤魂.com/wechat-chode.css", 
					//https://自己域名下的css文件，自定义二维码样式
				});

然后需要注意的是，引用二维码的地方只需要<div id='QR_code'></div>即可

之后进行调试，你会发现二维码出来了，但是莫兴奋，最坑的来了

他居然是 iframe 标签

这个坑我占了半天

没错，渲染的时候<div id='QR_code'></div>让人琢磨不透，他变成了

`	<div id='QR_code'>
		<iframe>
			<html>
			<head>
			</head>
			<body>
			</body>
			</html>
		</iframe>
	</div>`

就是内嵌了一个网页！！！

这个页面会有两种变化，首先给用户呈现的是二维码界面，在用户扫码后就会跳转到你定义的redirect_uri字段，而且大小仅为二维码的大小，所以通过他展示网页是不可能的！

获取参数

这时候你就需要将页面信息抛给外面了
对了，这个页面信息在路由里面，一个是用户的code，另一个是我们自定义的参数
这里我是直接将路由抛给外面的

        beforeMount() {
            window.parent.postMessage({
                cmd: 'returnFormJson',
                params: {
                    QR_code: this.$route.query
                }
            }, '*');
        },