微信pc内嵌二维码的自定义样式更改

最新推荐文章于 2024-09-09 14:40:09 发布

weixiao0111

最新推荐文章于 2024-09-09 14:40:09 发布

阅读量1.3k

点赞数 3

本文链接：https://blog.csdn.net/weixiao0111/article/details/115490163

版权

微信pc内嵌二维码的自定义样式更改

- 使用场景
- 如何实现href自定义样式链接

使用场景

按照微信开发文档（https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html）
官方示例，将二维码嵌入到自有的产品网页，代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>内嵌式 - 微信扫码登录</title>
<!-- 引入微信扫码登录js文件 -->
<script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</head>
<body>
  <!-- 放置二维码的div -->
  <div id="login_container"></div>
</body>
<script type="text/javascript">
var obj = new WxLogin({
  self_redirect:true,
  id:"login_container", 
  appid: "wxbdc5610cc59c1631", 
  scope: "snsapi_login", 
  redirect_uri: encodeURIComponent("http://"+window.location.host+"/..."), 
  state: Math.ceil(Math.random()*1000), 
  style: "black",
  href: ""
});
</script>
</html>

页面效果如下，二维码图片默认大小为285px*285px,默认有标题，默认有注释，但如果你要实现的样式和默认的不一样，可以要通过new WxLogin对象中的href参数，更改自定义样式链接
微信二维码原始样式

如何实现href自定义样式链接

1、通过在线base64编码，将你需要的样式css资源转换为data-url
在这里插入图片描述
2、将new WxLogin对象中的href参数重新赋值为转换后的data-url
代码如下

wechatQrCode(params)
        .then((res) => {
          this.weixinObj = JSON.parse(res.js_obj_string)
          //更改微信内嵌iframe里面的样式(base64转换)
          var href =
            'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKIGRpc3BsYXk6IG5vbmU7Cn0KLmltcG93ZXJCb3ggLnN0YXR1cy5zdGF0dXNfYnJvd3NlciB7CiBkaXNwbGF5OiBub25lOwp9Ci5pbXBvd2VyQm94IC5xcmNvZGUgewogYm9yZGVyOiBub25lOwogbWFyZ2luOiAwOwogd2lkdGg6IDIyMHB4OwogaGVpZ2h0OiAyMjBweDsKfQouaW1wb3dlckJveCAuc3RhdHVzewogZGlzcGxheTogbm9uZQp9'
          this.weixinObj.href = href
          var obj = new WxLogin(this.weixinObj)
          // console.log(window.location.href, obj)
        })
        .catch((error) => {})