微信PC登入樣式個性化處理詳解
阿新 • • 發佈：2019-01-09
概述
近期做一個PC端微信掃碼登入的需求，微信掃碼有兩種方式，一種是新開一個二維碼頁面，另一種是內嵌入產品網頁。
第一種實現方式比較簡單了，不會使用的可以看這裡的開源專案 weixin_guide
兩種實現方案官方詳細介紹資料 戳這裡直達
將二維碼嵌入到自有產品頁
下面介紹第二種實現方式將二維碼嵌入到自有的產品網頁
程式碼如下
<body>
<div id="login_container"></div>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" qrcode.css 程式碼如下
@charset "UTF-8";
.impowerBox .qrcode {width: 150px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 150px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;} 預設二維碼大小如下圖
遇到問題
你有注意到上面CSS樣式二維碼的大小嗎？ 寬高都是設定的是150px
為啥沒有生效呢！！！！二維碼特別大不說,還有微信登入的title,也有掃碼登入的提示嵌入到已有網頁當然是不個性化的。(預設二維碼大小280x280)
解決思路
怎麼辦呢？怎麼辦呢？怎麼辦呢？
就在不經意間點選了審查去檢視樣式為啥不生效就發現以下這個錯誤說明
href載入css樣式的連結必須要使用https
但是問題又來了,怎麼搭建https請求的環境呢？ 不會的可以參考 全站開啟Https時代 這篇文章。
如果你覺得麻煩這裡提供另外一種解決方案。
通過訪問data-url解決樣式問題
寫一個Node.js 指令碼(qrcode.js)將剛才的css資源轉換為data-url。
具體程式碼實現為：
var fs = require('fs');
function base64_encode(file) {
var bitmap = fs.readFileSync(file);
return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');
}
console.log(base64_encode('./qrcode.css'))Mac 電腦可以使用brew安裝Node.js,命令如下
brew install node執行node指令碼node qrcode.js，複製打印出來的data-url，然後賦值給剛才的href。
稍作樣式調整去掉title以及底部的提示。詳細的html程式碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PC掃碼登入</title>
<style type="text/css">
html {
overflow: hidden;
}
body,
div {
padding: 0;
margin: 0;
font-size: 12px;
color: #646464;
border: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="login_container" style="position: absolute; top: -20px; left: -90px;height: 160px"></div>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script type="text/javascript">
var obj = new WxLogin({
id: "login_container",
appid: "這裡新增web應用的appId",
scope: "snsapi_login",
redirect_uri: "http://xx/xx/oauth/webCallBack",
state: "6666",
style: "black",
href: "data:text/css;base64,QGNoYXJzZXQgIlVURi04IjsKLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDEzMHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAxMzBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30gCg=="
});
</script>
</body>
</html>最終效果圖如下
廣而告之
如果此文章對你有幫助請舉起您的大拇指點贊:)