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

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

  在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, 对于这个需求,在公众平台文档上有提到:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • http协议笔记

    1、连接(Connection):浏览器和服务器之间传输数据的通道。一般请求完毕就关闭,http不保持连接,不保持连接会降低处理速度(因为建立连接速度很慢),保...

    tandaxia
  • 2019windows上安装Mac OS 10.14过程详细截图

    之前VMware12里面的Mac OS10.10升级后,键盘鼠标就用不了了。试了几次都这样,只能重装VMware14, 安装Mac OS 10.14系统。把步骤...

    tandaxia
  • JS数据结构第三篇---双向链表和循环链表之约瑟夫问题

    在上文《JS数据结构第二篇---链表》中描述的是单向链表。单向链表是指每个节点都存有指向下一个节点的地址,双向链表则是在单向链表的基础上,给每个节点增加一个指向...

    tandaxia
  • 明月开始接受网站托管和服务器代运维服务

    明月开始服务器代运维服务器已经有一段时了,现在大大小小也已经代运维十多个服务器了,这还不包括站长们免费帮忙的运维服务支持以及公司的服务器、朋友的服务器等等,期间...

    明月云服务
  • 工程师简历“泄露” Windows Core OS 信息

    这是近期从微软产品经理 Naim Ayat 的 Linkedin 个人资料页中透露出来的信息,Naim 的经历中写到:

    逆锋起笔
  • Linux CFS调度器之负荷权重load_weight--Linux进程的管理与调度(二十五)

    负荷权重用struct load_weight数据结构来表示, 保存着进程权重值weight。其定义在/include/linux/sched.h, v=4.6...

    233333
  • 腾讯云服务器是干嘛的-有什么用?

    近些年云计算作为一个新的技术趋势已经得到了快速的发展,云服务器也变得越来越流行,为大家所接纳。我们经常听到的腾讯云、阿里云、百度云、电信、联通、西部数码等等,以...

    用户4420622
  • Android通信安全之HTTPS

    Https HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HT...

    xiangzhihong
  • 租用海外服务器时要考虑哪些因素?

    海外服务器比起国内服务器有着非常多的优势,除了有免备案、政策宽松以及国际带宽等优势,还有许多企业有自身的业务需求或有出海需求,这部分用户肯定需要选择海外服务器以...

    用户6559945
  • 租用海外服务器时要考虑哪些因素?

    海外服务器比起国内服务器有着非常多的优势,除了有免备案、政策宽松以及国际带宽等优势,还有许多企业有自身的业务需求或有出海需求,这部分用户肯定需要选择海外服务器以...

    用户2416682

扫码关注云+社区

领取腾讯云代金券