data-url自定義微信登錄掃碼樣式解決辦法

varobj =newWxLogin({

id:"login_container",

appid:"",

scope:"",

redirect_uri:"",

state:"",

style:"",

href:"../qrcode.css"http://就是這個(gè)屬性});

在href中傳入樣式文件的地址,會(huì)報(bào)錯(cuò)。貌似微信為了安全考慮,只允許訪問(wèn)https的資源。于是現(xiàn)在采用第二種解決辦法data-url。

創(chuàng)建一個(gè)data-url.js文件。具體代碼實(shí)現(xiàn)為:

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'))

運(yùn)行node data-url腳本,將當(dāng)前目錄的qrcode.css文件內(nèi)容轉(zhuǎn)為base64字符串,復(fù)制打印出來(lái)的data-url,然后賦值給剛才的href。

varobj =newWxLogin({

id:"login_container",

appid:"",

scope:"",

redirect_uri:"",

state:"",

style:"",

href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTpub25lf

Q0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="http://data-url});

注意這里的MIME類型,一定要返回text/css。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容