react页面内嵌微信二维码 和 自定义样式 以及 微信网页共用unionId问题
程序员文章站
2023-11-16 09:10:28
在react页面内嵌“微信二维码”,实现PC端通过微信扫码进行登录。首先去微信开放平台注册一个账号,创建一个网站应用,提交网站备案审核,获取appid和appsecret;其他开发流程根据微信文档来进行操作。 react页面部分代码,引入内嵌二维码脚本,设置iframe标签支持跨域,自定义二维码样式 ......
在react页面内嵌“微信二维码”,实现pc端通过微信扫码进行登录。首先去注册一个账号,创建一个网站应用,提交网站备案审核,获取appid和appsecret;其他开发流程根据微信文档来进行操作。
react页面部分代码,引入内嵌二维码脚本,设置iframe标签支持跨域,自定义二维码样式:
componentwillmount(){ //引入“微信内嵌二维码”脚本 var script = document.createelement('script'); script.type = 'text/javascript'; script.async = false; script.src = 'https://res.wx.qq.com/connect/zh_cn/htmledition/js/wxlogin.js'; document.head.appendchild(script); } componentdidmount(){ /** * ... other code * */ //加载微信二维码 settimeout(function() { /** * 微信内嵌二维码自定义样式有两种方式实现 * 第一种是把自定义样式写在一个css文件里面,部署到一个https链接上 * 第二种是把自定义样式通过base64加密后设置在href上 * */ var customestyle = "data:text/css;base64,lnd4x3fyy29kzsbpznjhbwugeyb3awr0adogmtywchg7ighlawdoddogmtywchg7ig1hcmdpbjogmdsgcgfkzgluzzogmdsgfq0klmxvz2luugfuzwwgeybtyxjnaw46mdsgcgfkzgluzzogmdsgfq0klmxvz2luugfuzwwglnrpdgxllcaubg9naw5qyw5lbcauaw5mbyb7igrpc3bsyxk6ig5vbmu7ih0nci5pbxbvd2vyqm94ic5xcmnvzgugeybtyxjnaw46ida7ihdpzhrooiaxnjbwedsgym9yzgvyoibub25loyb9"; new wxlogin({ self_redirect: false, id: "wx_login_container", appid: "wx0*************", //微信开放平台网站应用appid scope: "snsapi_login", redirect_uri: encodeuri(location.origin), //设置扫码成功后回调页面 state: "" + (new date()).gettime(), style: "black", href: customestyle, //location.origin + "/css/wx_qrcode.css", //自定义微信二维码样式文件 }); //设置iframe标签可以进行跨域跳转 var qrcodebox = document.getelementbyid("wx_login_container"); var iframes = qrcodebox.getelementsbytagname("iframe"); if (iframes.length){ var ifr = iframe[0]; ifr.setattribute("sandbox", "allow-scripts allow-top-navigation allow-same-origin"); } }, 1000) }
因为默认内嵌二维码的尺寸固定,有头部标题,还是底部提示文字,所以如果想修改二维码尺寸和隐藏标题和提示文字,需要自定义样式来控制。微信接口也提供了一个href属性来进行自定义样式。
自定义样式有两种方式:
* 第一种是把自定义样式写在一个css文件里面,部署到一个https链接上
* 第二种是把自定义样式通过base64加密后设置在href上
相对而言,第二种方式更方便。
最后效果图
另外,如果有要求对于同一个微信用户,不管他是在pc端扫码登录,还是在微信网页授权登录,必须识别成同一个用户,则需要把和账号关联起来。
对于微信授权登录的用户,微信提供的唯一标识符就是unionid, 对于这个需求,在上有提到: