為了讓用戶登錄網站的門檻更低，微信掃一掃登錄變得越來越廣泛，所以最近加緊趕制的項目中有用到這個功能，此篇文字的出發點基於微信開放平台已經配置好域名（80端口）並且認證成功獲得app_id和secret並有權限調用微信的接口。好了，就先談一談微信掃碼登錄的整個流程吧。
第一步，我們必須得把二維碼放在頁面上顯示。首先普及一下二維碼是有失效時間以及失效狀態的，一旦你掃過一次二維碼或者在某段時間內沒有掃描頁面上的二維碼，該二維碼就失效了。OK，微信官網給我們提供兩種方式來顯示二維碼：1.后台發請求返回一個新的頁面；2.前端js實例化二維碼內嵌在自己的頁面上，顯然第一種比較適合懶的人(因為微信直接返回一個打包好的頁面啊有木有，都不用各種css調樣式了)，不過在項目中兩種都在用，所以就都說明一下。
1.后台發請求獲取微信返回的掃碼頁面
$redirect_uri="http://你的微信開放平台綁定域名下處理掃碼事件的方法"; $redirect_uri=urlencode($redirect_uri);//該回調需要url編碼 $appID="你的appid"; $scope="snsapi_login";//寫死，微信暫時只支持這個值
//准備向微信發請求 $url = "https://open.weixin.qq.com/connect/qrconnect?appid=" . $appID."&redirect_uri=".$redirect_uri ."&response_type=code&scope=".$scope."&state=STATE#wechat_redirect"; //請求返回的結果(實際上是個html的字符串) $result = file_get_contents($url); //替換圖片的src才能顯示二維碼 $result = str_replace("/connect/qrcode/", "https://open.weixin.qq.com/connect/qrcode/", $result); return $result; //返回頁面
這樣子就會返回一個這樣的頁面，掃描后調用$redirect_uri，
2.內嵌JS顯示：
這里就是通過js端實例化一個對象即可，首先在<head>標簽內添加如下js文件，
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
其次在html中定義一個div包含二維碼，
<div id="login_container"></div>
最后在$(document).ready()內進行實例化：
$(document).ready(function()
{ var obj = new WxLogin
({
id:"login_container",//div的id appid: "你的appid",
scope: "snsapi_login",//寫死 redirect_uri:encodeURI("你的處理掃碼事件的方法") ,
state: "",
style: "black",//二維碼黑白風格 href: "https://某個域名下的css文件" });
});
注意其中href里指向的css文件必須放在https協議下才能引用的到，不然頁面上就是默認樣式（顯示上是一個比較大的二維碼，你無法調節二維碼的大小，位置，太痛苦了）。最后部分頁面大概長成這樣，這里的二維碼大概只有140px：
喜歡笑話的，歡迎訪問每日一笑話，http://xiaogouyu.top