生活随笔
收集整理的這篇文章主要介紹了
微信pc内嵌二维码的自定义样式更改
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
微信pc內(nèi)嵌二維碼的自定義樣式更改
- 使用場景
- 如何實(shí)現(xiàn)href自定義樣式鏈接
使用場景
按照微信開發(fā)文檔（https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html）
官方示例，將二維碼嵌入到自有的產(chǎn)品網(wǎng)頁，代碼如下
<!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
>內(nèi)嵌式
- 微信掃碼登錄
</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
>
頁面效果如下，二維碼圖片默認(rèn)大小為285px*285px,默認(rèn)有標(biāo)題，默認(rèn)有注釋，但如果你要實(shí)現(xiàn)的樣式和默認(rèn)的不一樣，可以要通過new WxLogin對象中的href參數(shù)，更改自定義樣式鏈接
如何實(shí)現(xiàn)href自定義樣式鏈接
1、通過在線base64編碼，將你需要的樣式css資源轉(zhuǎn)換為data-url
2、將new WxLogin對象中的href參數(shù)重新賦值為轉(zhuǎn)換后的data-url
代碼如下
wechatQrCode(params
).then((res
) => {this.weixinObj
= JSON.parse(res
.js_obj_string
)var href
='data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKIGRpc3BsYXk6IG5vbmU7Cn0KLmltcG93ZXJCb3ggLnN0YXR1cy5zdGF0dXNfYnJvd3NlciB7CiBkaXNwbGF5OiBub25lOwp9Ci5pbXBvd2VyQm94IC5xcmNvZGUgewogYm9yZGVyOiBub25lOwogbWFyZ2luOiAwOwogd2lkdGg6IDIyMHB4OwogaGVpZ2h0OiAyMjBweDsKfQouaW1wb3dlckJveCAuc3RhdHVzewogZGlzcGxheTogbm9uZQp9'this.weixinObj
.href
= href
var obj
= new WxLogin(this.weixinObj
)}).catch((error
) => {})
最終實(shí)現(xiàn)效果如下
總結(jié)
以上是生活随笔為你收集整理的微信pc内嵌二维码的自定义样式更改的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
