自定義微信掃碼登錄樣式

davidac 發布于2019-08-30 13:49 / 2776人閱讀

摘要：最近公司端網站登錄改版，新增加微信掃碼登錄。設置好后發現，微信自帶的樣式，碼太大了，位置也不對，需要調整。再看文檔微信文檔就是這個屬性上方的，就可以引用咱們自己寫的文件。

最近公司PC端網站登錄改版，新增加微信掃碼登錄。
文檔微信掃碼登錄文檔。
設置好后發現，微信自帶的樣式，碼太大了，位置也不對，需要調整。

再看文檔

微信文檔
                var obj = new WxLogin({
                    id:"login_container", 
                    appid: "", 
                    scope: "", 
                    redirect_uri: "",
                    state: "",
                    style: "",
                    href: "../qrcode.css"http://就是這個屬性
                   });

上方的href，就可以引用咱們自己寫的css文件。
但是官方規定，這個css文件，必須放在https協議的網站上，例如：

引用css

  href: "https://www.baidu.com/qrcode.css"

但是自家網站協議不是https。解決之道：
通過訪問data-url解決樣式問題
寫一個nodejs腳本，將剛才的css資源轉換為data-url。

具體方法:
1.新建文件夾，放入轉換的js文件以及你自己寫的css文件

change.js

var fs = require("fs");
// function to encode file data to base64 encoded string
function base64_encode(file) {
// read binary data
var bitmap = fs.readFileSync(file);
// convert binary data to base64 encoded string
return "data:text/css;base64,"+new 
Buffer(bitmap).toString("base64");
}
console.log(base64_encode("./qrcode.css"))

2.打開終端,進入目錄

執行

 node change.js

教程結束。

云服務器 GPU云服務器端微信掃碼 php微信掃碼注冊 html調用微信掃碼微信掃二維碼登錄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115570.html

自定義微信掃碼登錄樣式

摘要：最近公司端網站登錄改版，新增加微信掃碼登錄。設置好后發現，微信自帶的樣式，碼太大了，位置也不對，需要調整。再看文檔微信文檔就是這個屬性上方的，就可以引用咱們自己寫的文件。最近公司PC端網站登錄改版，新增加微信掃碼登錄。文檔微信掃碼登錄文檔。設置好后發現，微信自帶的樣式，碼太大了，位置也不對，需要調整。 showImg(https://segmentfault.com/img/bVXj...

XiNGRZ 2019-08-21 17:15 評論0 收藏0
自定義微信登錄掃碼樣式解決辦法

摘要：微信掃碼登錄近期做一個端微信掃碼登錄的需求，微信掃碼有兩種方式，一種是新開一個二維碼頁面，另一種是內嵌入產品網頁。幸運的是，微信留了一個給我們自定義樣式的機會，在之前實例化一個二維碼的時候，實例對象中屬性，允許設置樣式。 PC微信掃碼登錄近期做一個PC端微信掃碼登錄的需求，微信掃碼有兩種方式，一種是新開一個二維碼頁面，另一種是內嵌入產品網頁。本次以內嵌二維碼為例，具體怎樣在頁面中顯示...

meteor199 2019-08-29 13:58 評論0 收藏0
自定義微信登錄掃碼樣式解決辦法

摘要：微信掃碼登錄近期做一個端微信掃碼登錄的需求，微信掃碼有兩種方式，一種是新開一個二維碼頁面，另一種是內嵌入產品網頁。幸運的是，微信留了一個給我們自定義樣式的機會，在之前實例化一個二維碼的時候，實例對象中屬性，允許設置樣式。 PC微信掃碼登錄近期做一個PC端微信掃碼登錄的需求，微信掃碼有兩種方式，一種是新開一個二維碼頁面，另一種是內嵌入產品網頁。本次以內嵌二維碼為例，具體怎樣在頁面中顯示...

yexiaobai 2019-08-21 17:58 評論0 收藏0
微信掃碼登錄

摘要：二維碼的樣式外部文件，需要過程詳解當使用微信掃碼，微信校驗成功后，會訪問，并在的參數上添加和設置的。將拿到的用戶信息有用戶的唯一的，調用后臺的微信登錄接口，成功到進入登錄頁面之前的便可以了。官方文檔：網站應用微信登錄開發指南流程圖 showImg(https://segmentfault.com/img/bVbeLKq?w=1298&h=570); 使用步驟在使用的頁面中引入：...

elva 2019-08-23 13:56 評論0 收藏0