微信PC登录我不会？

概述

近期做一个PC端微信扫码登录的需求，微信扫码有两种方式，一种是新开一个二维码页面，另一种是内嵌入产品网页。

将二维码嵌入到自有产品页

下面介绍第二种实现方式将二维码嵌入到自有的产品网页

代码如下

代码如下

默认二维码大小如下图

遇到问题

你有注意到上面CSS样式二维码的大小吗？宽高都是设置的是150px

解决思路

怎么办呢？怎么办呢？怎么办呢？

就在不经意间点击了审查去查看样式为啥不生效就发现以下这个错误说明

加载css样式的链接必须要使用

但是问题又来了,怎么搭建请求的环境呢？ 不会的可以参考 全站开启Https时代这篇文章。

如果你觉得麻烦这里提供另外一种解决方案。

通过访问data-url解决样式问题

写一个Node.js 脚本(qrcode.js)将刚才的css资源转换为data-url。

具体代码实现为：

Mac 电脑可以使用安装Node.js,命令如下

运行node脚本，复制打印出来的data-url，然后赋值给刚才的href。

稍作样式调整去掉title以及底部的提示。详细的html代码如下

最终效果图如下

广而告之

如果此文章对你有帮助请举起您的大拇指点赞:)

快来关注吧！