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

您所在的位置：网站首页 › 如何改变二维码样式 › 微信pc内嵌二维码的自定义样式更改

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

2024-07-17 10:20| 来源: 网络整理| 查看: 265

微信pc内嵌二维码的自定义样式更改使用场景如何实现href自定义样式链接

使用场景

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

内嵌式 - 微信扫码登录 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: "" });

页面效果如下，二维码图片默认大小为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) => {})

最终实现效果如下

在这里插入图片描述

【本文地址】

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

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

今日新闻

推荐新闻