自定義PC微信掃碼登錄樣式寫(xiě)法

更新時(shí)間：2017年12月12日 14:57:00 投稿：laozhang

這篇文章主要介紹了自定義PC微信掃碼登錄樣式的寫(xiě)法以及做了代碼分析，需要的朋友學(xué)習(xí)下吧。

PC微信掃碼登錄

近期做一個(gè)PC端微信掃碼登錄的需求，微信掃碼有兩種方式，一種是新開(kāi)一個(gè)二維碼頁(yè)面，另一種是內(nèi)嵌入產(chǎn)品網(wǎng)頁(yè)。本次以內(nèi)嵌二維碼為例，具體怎樣在頁(yè)面中顯示一個(gè)登陸二維碼，文檔說(shuō)的很清楚，就不贅述了，文檔地址：https://open.weixin.qq.com/cg...

解決自定義微信二維碼樣式問(wèn)題

當(dāng)一切準(zhǔn)備妥當(dāng)之后，網(wǎng)頁(yè)上的二維碼初始默認(rèn)是這個(gè)樣子。

特別大不說(shuō)（默認(rèn)二維碼大小280x280），還有微信登錄的title，下方也有掃碼登錄的提示。
幸運(yùn)的是，微信留了一個(gè)api給我們自定義樣式的機(jī)會(huì)，在之前實(shí)例化一個(gè)二維碼的時(shí)候，實(shí)例對(duì)象中href屬性，允許設(shè)置樣式。

var obj = new WxLogin({
      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。

通過(guò)訪問(wèn)data-url解決樣式問(wèn)題

寫(xiě)一個(gè)nodejs，腳本將剛才的css資源轉(zhuǎn)換為data-url。具體代碼實(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腳本，復(fù)制打印出來(lái)的data-url，然后賦值給剛才的href。

var obj = new WxLogin({
      id:"login_container", 
      appid: "", 
      scope: "", 
      redirect_uri: "",
      state: "",
      style: "",
           href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTpub25lf
Q0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="http://data-url
      });

注意這里的MIME類(lèi)型，一定要返回text/css。

自定義二維碼：

相關(guān)文章

js實(shí)現(xiàn)京東輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)京東輪播圖效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
JS生態(tài)系統(tǒng)加速npm腳本優(yōu)化及性能分析探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速npm腳本優(yōu)化及性能分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2024-01-01
純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁(yè)面布局（實(shí)例代碼）
這篇文章主要介紹了純html+css+javascript實(shí)現(xiàn)樓層跳躍式的頁(yè)面布局,需要的朋友可以參考下
2017-10-10
使用JavaScript在html文檔內(nèi)添加新的元素節(jié)點(diǎn)
這篇文章主要介紹了使用JavaScript在html文檔內(nèi)添加新的元素節(jié)，主要打方式就是動(dòng)態(tài)的改變?cè)衕tml文檔結(jié)構(gòu)，下文詳細(xì)介紹內(nèi)容需要的可以參考一下
2022-02-02
js禁止瀏覽器頁(yè)面后退功能的實(shí)例(推薦)
下面小編就為大家?guī)?lái)一篇js禁止瀏覽器頁(yè)面后退功能的實(shí)例(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
javascript function調(diào)用時(shí)的參數(shù)檢測(cè)常用辦法
js中并不直接支持類(lèi)似c#的方法重載，所以只能變相的來(lái)解決，示意代碼：(利用了內(nèi)置屬性arguments)
2010-02-02
JGrid中拖動(dòng)改變列寬的腳本原型
JGrid 中，可以拖動(dòng)改變列寬，簡(jiǎn)單的原理就是改變相應(yīng)的 col 的 style.width 今天看到skybot 同學(xué)在問(wèn)這個(gè)問(wèn)題，就又把這個(gè)功能拿出來(lái)，單獨(dú)實(shí)現(xiàn)了一下（有改進(jìn)）
2008-07-07
Discuz 公告效果（自動(dòng)換行，無(wú)間隙滾動(dòng)）
Discuz 公告效果效果代碼，可以自動(dòng)換行和無(wú)間隙滾動(dòng)
2009-03-03
JavaScript原型繼承和原型鏈原理詳解
這篇文章主要介紹了JavaScript原型繼承和原型鏈原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
Postman無(wú)法正常返回結(jié)果問(wèn)題解決
這篇文章主要介紹了Postman無(wú)法正常返回結(jié)果問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08