当前位置： 移动技术网 > IT编程>开发语言>JavaScript > react页面内嵌微信二维码 和 自定义样式 以及 微信网页共用unionId问题

react页面内嵌微信二维码 和 自定义样式 以及 微信网页共用unionId问题

2019年09月08日  | 移动技术网IT编程  | 我要评论

　　在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, 对于这个需求，在上有提到：

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网