內嵌式js微信掃碼登入及自定義樣式
阿新 • • 發佈：2018-12-26
關於微信掃碼登入網站的功能介紹，請閱讀官方文件【網站應用微信登入開發指南】
根據官方文件我們知道微信掃碼登入有兩種方式
一種是跳轉到一個大黑屏二維碼介面進行掃碼登入：
（參見部落格：PHP實現跳轉式微信掃碼登入網站 ）
另外一種是把二維碼內嵌到頁面中，這樣可以自定義一些樣式，例如二維碼的大小、是否有標題等，預設效果如下：
（官方文件說的挺好，JS微信登入主要用途：網站希望使用者在網站內就能完成登入，無需跳轉到微信域下登入後再返回，提升微信登入的流暢性與成功率）
實現程式碼如下：
<!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>
引數說明（摘自官方文件）：
這裡的href引數可以自定義掃碼樣式，一種據說是引入一個https地址的css檔案例如：href: "https://lws.com/test.css"，由於沒有配置https所以沒有實踐，另一種是把樣式程式碼進行base64加密放到href引數中。
.impowerBox .qrcode {width: 200px;} .impowerBox .title {display: none;} .impowerBox .info {width: 200px;} .status_icon {display: none} .impowerBox .status {text-align: center;}
我們用站長工具對樣式程式碼進行base64加密：
修改href引數，格式：href: "data:text/css;base64,base64加密後的字串"
href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0NCi5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9"
樣式如下，二維碼變小了，預設的標題去掉了：
