PC微信掃碼登錄
近期做一個PC端微信掃碼登錄的需求，微信掃碼有兩種方式，一種是新開一個二維碼頁面，另一種是內(nèi)嵌入產(chǎn)品網(wǎng)頁。本次以內(nèi)嵌二維碼為例，具體怎樣在頁面中顯示一個登陸二維碼，文檔說的很清楚，就不贅述了。
解決自定義微信二維碼樣式問題
當(dāng)一切準(zhǔn)備妥當(dāng)之后，網(wǎng)頁上的二維碼初始默認(rèn)是這個樣子。
特別大不說（默認(rèn)二維碼大小280x280），還有微信登錄的title，下方也有掃碼登錄的提示。
幸運(yùn)的是，微信留了一個api給我們自定義樣式的機(jī)會，在之前實(shí)例化一個二維碼的時候，實(shí)例對象中href屬性，允許設(shè)置樣式。
<span style="font-size: 16px;"> var obj = new WxLogin({<br> ? ? ? ? ? ? ? ? ? ? ? ?id:"login_container", <br> ? ? ? ? ? ? ? ? ? ? ? ?appid: "", <br> ? ? ? ? ? ? ? ? ? ? ? ?scope: "", <br> ? ? ? ? ? ? ? ? ? ? ? ?redirect_uri: "",<br> ? ? ? ? ? ? ? ? ? ? ? ?state: "",<br> ? ? ? ? ? ? ? ? ? ? ? ?style: "",<br> ? ? ? ? ? ? ? ? ? ? ? ?href: "../qrcode.css"//就是這個屬性<br> ? ? ? ? ? ? ? ? ? ? ? });<br></span>
不幸的是，在href中傳入樣式文件的地址，會報錯。貌似微信為了安全考慮，只允許訪問https的資源。于是現(xiàn)在采用第二種解決辦法data-url。
通過訪問data-url解決樣式問題
寫一個nodejs，腳本將剛才的css資源轉(zhuǎn)換為data-url。具體代碼實(shí)現(xiàn)為：
<span style="font-size: 16px;">var fs = require('fs');<br><br>// function to encode file data to base64 encoded string<br>function base64_encode(file) {<br> ? ?// read binary data<br> ? ?var bitmap = fs.readFileSync(file);<br> ? ?// convert binary data to base64 encoded string<br> ? ?return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');<br>}<br><br>console.log(base64_encode('./qrcode.css'))<br></span>
運(yùn)行node腳本，復(fù)制打印出來的data-url，然后賦值給剛才的href。
<span style="font-size: 16px;"> var obj = new WxLogin({<br> ? ? ? ? ? ? ? ? ? ? ? ?id:"login_container", <br> ? ? ? ? ? ? ? ? ? ? ? ?appid: "", <br> ? ? ? ? ? ? ? ? ? ? ? ?scope: "", <br> ? ? ? ? ? ? ? ? ? ? ? ?redirect_uri: "",<br> ? ? ? ? ? ? ? ? ? ? ? ?state: "",<br> ? ? ? ? ? ? ? ? ? ? ? ?style: "",<br> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTpub25lf<br>Q0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="//data-url<br> ? ? ? ? ? ? ? ? ? ? ? });<br></span>
注意這里的MIME類型，一定要返回text/css。
自定義二維碼：
相關(guān)教程：
以上是自定義微信登錄掃碼樣式解決辦法的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
Win11系統(tǒng)無法安裝中文語言包的解決方法
Mar 09, 2024 am 09:48 AM
Win11系統(tǒng)無法安裝中文語言包的解決方法隨著Windows11系統(tǒng)的推出，許多用戶開始升級他們的操作系統(tǒng)以體驗新的功能和界面。然而，一些用戶在升級后發(fā)現(xiàn)他們無法安裝中文語言包，這給他們的使用體驗帶來了困擾。在本文中，我們將探討Win11系統(tǒng)無法安裝中文語言包的原因，并提供一些解決方法，幫助用戶解決這一問題。原因分析首先，讓我們來分析一下Win11系統(tǒng)無法
小紅書發(fā)布自動保存圖片怎么解決？發(fā)布自動保存圖片在哪里？
Mar 22, 2024 am 08:06 AM
隨著社交媒體的不斷發(fā)展，小紅書已經(jīng)成為越來越多年輕人分享生活、發(fā)現(xiàn)美好事物的平臺。許多用戶在發(fā)布圖片時遇到了自動保存的問題，這讓他們感到十分困擾。那么，如何解決這個問題呢？一、小紅書發(fā)布自動保存圖片怎么解決？1.清除緩存首先，我們可以嘗試清除小紅書的緩存數(shù)據(jù)。步驟如下：（1）打開小紅書，點(diǎn)擊右下角的“我的”按鈕；（2）在個人中心頁面，找到“設(shè)置”并點(diǎn)擊；（3）向下滾動，找到“清除緩存”選項，點(diǎn)擊確認(rèn)。清除緩存后，重新進(jìn)入小紅書，嘗試發(fā)布圖片看是否解決了自動保存的問題。2.更新小紅書版本確保你的小
五招教你解決黑鯊手機(jī)開不了機(jī)的問題！
Mar 24, 2024 pm 12:27 PM
隨著智能手機(jī)技術(shù)的不斷發(fā)展，手機(jī)在我們?nèi)粘Ｉ钪邪缪葜絹碓街匾慕巧６鳛橐豢顚Ｗ⒂谟螒蛐阅艿钠炫炇謾C(jī)，黑鯊手機(jī)備受玩家青睞。然而，有時候我們也會面臨到黑鯊手機(jī)開不了機(jī)的情況，這時候我們就需要采取一些措施來解決這一問題。接下來，就讓我們來分享五招教你解決黑鯊手機(jī)開不了機(jī)的問題：第一招：檢查電池電量首先，確保你的黑鯊手機(jī)有足夠的電量?？赡苁且驗槭謾C(jī)電量耗盡
無法在此設(shè)備上加載驅(qū)動程序怎么解決？(親測有效)
Mar 14, 2024 pm 09:00 PM
大家都知道，如果電腦無法加載驅(qū)動程序，該設(shè)備可能就無法正常工作或與計算機(jī)進(jìn)行正確的交互。那在電腦上彈出無法在此設(shè)備上加載驅(qū)動程序的提示框，我們要如何解決呢？下面小編就教大家兩招輕松解決問題。 無法在此設(shè)備上加載驅(qū)動程序解決方法 1、開始菜單搜索“內(nèi)核隔離”?！ ?、將內(nèi)存完整性關(guān)閉，上方提示“內(nèi)存完整性已關(guān)閉。你的設(shè)備可能易受攻擊?！秉c(diǎn)擊后方忽略即可，不會對使用有影響?！ ?.重啟機(jī)器之后即可解決問題。
解讀Oracle錯誤3114：原因及解決方法
Mar 08, 2024 pm 03:42 PM
標(biāo)題：分析Oracle錯誤3114：原因及解決方法在使用Oracle數(shù)據(jù)庫時，常常會遇到各種錯誤代碼，其中錯誤3114是比較常見的一個。該錯誤一般涉及到數(shù)據(jù)庫鏈接的問題，可能導(dǎo)致訪問數(shù)據(jù)庫時出現(xiàn)異常情況。本文將對Oracle錯誤3114進(jìn)行解讀，探討其引起的原因，并給出解決該錯誤的具體方法以及相關(guān)的代碼示例。1.錯誤3114的定義Oracle錯誤3114通
如何解決默認(rèn)網(wǎng)關(guān)自動消失的問題
Feb 24, 2024 pm 04:18 PM
默認(rèn)網(wǎng)關(guān)自動消失怎么解決在現(xiàn)代社會中，互聯(lián)網(wǎng)已經(jīng)成為人們生活中不可或缺的一部分。無論是工作還是娛樂，我們都需要穩(wěn)定的網(wǎng)絡(luò)連接來完成各種任務(wù)。而默認(rèn)網(wǎng)關(guān)是連接本地網(wǎng)絡(luò)與外部互聯(lián)網(wǎng)的關(guān)鍵要素之一。然而，有時我們可能會遇到默認(rèn)網(wǎng)關(guān)自動消失的問題，導(dǎo)致無法上網(wǎng)。那么，當(dāng)默認(rèn)網(wǎng)關(guān)消失時，我們應(yīng)該如何解決這個問題呢？首先，我們應(yīng)該明確默認(rèn)網(wǎng)關(guān)的概念。默認(rèn)網(wǎng)關(guān)是一個網(wǎng)絡(luò)路
華為瀏覽器已停止訪問該網(wǎng)頁怎么解決
Feb 26, 2024 pm 01:28 PM
華為瀏覽器已停止訪問該網(wǎng)頁怎么解決？在使用華為手機(jī)瀏覽器訪問某些網(wǎng)站時，可能會出現(xiàn)禁止訪問的提示，使用戶無法正常瀏覽相關(guān)內(nèi)容。這對用戶而言非常不便。那么，當(dāng)我們遇到華為手機(jī)瀏覽器網(wǎng)站禁止訪問的情況時，該怎么辦呢？下面小編將為您提供華為瀏覽器網(wǎng)站禁止訪問解決方法，希望對您有所幫助。華為瀏覽器網(wǎng)站禁止訪問解決方法1、打開華為手機(jī)瀏覽器后，點(diǎn)擊下方的三點(diǎn)圖標(biāo)，然后點(diǎn)擊設(shè)置。2、進(jìn)入設(shè)置后，點(diǎn)擊【安全與隱私】3、將【安全瀏覽】右側(cè)的開關(guān)關(guān)閉，即可解除網(wǎng)站訪問限制。以上便是華為瀏覽器網(wǎng)站禁止訪問解決方法的
WordPress安裝問題解決指南，一文搞定
Feb 29, 2024 am 11:06 AM
WordPress是一款非常流行的開源內(nèi)容管理系統(tǒng)，許多個人用戶和企業(yè)選擇使用WordPress來建立和管理自己的網(wǎng)站。然而，在安裝WordPress的過程中，有時會遇到一些問題，例如數(shù)據(jù)庫連接錯誤、文件權(quán)限問題等。本文將針對常見的WordPress安裝問題進(jìn)行解決指南，通過具體的代碼示例幫助用戶快速解決問題。問題一：數(shù)據(jù)庫連接錯誤當(dāng)在安裝WordPress
