|
導讀微信(WeChat)是騰訊公司于2011年1月21日推出的一個為智能終端提供即時通訊服務的免費應用程序,由張小龍所帶領的騰訊廣州研發中心產品團隊打造 [2] 。微信支持跨通信運營商、跨操作系統平臺... 微信(WeChat)是騰訊公司于2011年1月21日推出的一個為智能終端提供即時通訊服務的免費應用程序,由張小龍所帶領的騰訊廣州研發中心產品團隊打造 [2] 。微信支持跨通信運營商、跨操作系統平臺通過網絡快速發送免費(需消耗少量網絡流量)語音短信、視頻、圖片和文字,同時,也可以使用通過共享流媒體內容的資料和基于位置的社交插件“搖一搖”、“漂流瓶”、“朋友圈”、”公眾平臺“、”語音記事本“等服務插件。 PC微信掃碼登錄近期做一個PC端微信掃碼登錄的需求,微信掃碼有兩種方式,一種是新開一個二維碼頁面,另一種是內嵌入產品網頁。本次以內嵌二維碼為例,具體怎樣在頁面中顯示一個登陸二維碼,文檔說的很清楚,就不贅述了。 解決自定義微信二維碼樣式問題當一切準備妥當之后,網頁上的二維碼初始默認是這個樣子。
 特別大不說(默認二維碼大小280x280),還有微信登錄的title,下方也有掃碼登錄的提示。 幸運的是,微信留了一個api給我們自定義樣式的機會,在之前實例化一個二維碼的時候,實例對象中href屬性,允許設置樣式。 var obj = new WxLogin({ id:"login_container", appid: "", scope: "", redirect_uri: "", state: "", style: "", href: "../qrcode.css"//就是這個屬性 });
不幸的是,在href中傳入樣式文件的地址,會報錯。貌似微信為了安全考慮,只允許訪問https的資源。于是現在采用第二種解決辦法data-url。 通過訪問data-url解決樣式問題寫一個nodejs,腳本將剛才的css資源轉換為data-url。具體代碼實現為: 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'))
運行node腳本,復制打印出來的data-url,然后賦值給剛才的href。
 var obj = new WxLogin({ id:"login_container", appid: "", scope: "", redirect_uri: "", state: "", style: "", href:"data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7d2lkdGg6IDIwMHB4O30NCi5zdGF0dXNfaWNvbiB7ZGlzcGxheTpub25lf Q0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30="//data-url });
注意這里的MIME類型,一定要返回text/css。 自定義二維碼:
 相關教程: 微信登錄的一些新得 php二維碼的生產以及下載方法 javascript生成二維碼的兩種方法 以上就是自定義微信登錄掃碼樣式解決辦法的詳細內容,更多請關注php中文網其它相關文章!
微信提供公眾平臺、朋友圈、消息推送等功能,用戶可以通過“搖一搖”、“搜索號碼”、“附近的人”、掃二維碼方式添加好友和關注公眾平臺,同時微信將內容分享給好友以及將用戶看到的精彩內容分享到微信朋友圈。
|