前端JS調用微信掃一掃二維碼

 來源：

　　最近做一個項目，H5頁面，在微信中打開，里面有個功能，就是  點擊按鈕彈出微信二維碼掃一掃。

項目截圖：

　　暫時沒有圖，下次再補上。就是頁面點擊按鈕，彈出掃二維碼的窗口

我只負責前端，所以只上前端代碼，后端代碼是java。

HTML代碼（如下）：我用的是jQuery WeUI 框架快速開發（jQuery WeUI地址：http://jqweui.com/），所以a標簽有樣式

<a class="weui-btn weui-btn_primary submit-btn" id="scanQRCode" type="button">掃一掃</a>

JS代碼（如下）：代碼直接復制拷貝就可以使用，紅色字體就是自己根據自己的項目要求更改就可以。這樣寫有個缺點，頁面加載進去后，得緩個幾秒，按鈕點擊才有效。因為需要請求數據配置wx.config。但后台可以有另外的做法避免這種缺點。就是后台請求好數據，我們配置成功后，再跳進這個頁面。

<script src="../../../js/plugins/jquery-2.1.4/jquery.min.js"></script>
//以下是微信JS-SDK的文件，必須引入
<script src="../../../js/plugins/jweixin-1.0.0.js"></script>



<script>
    $.ajax({
        type:"post",
        url:"",//自己填寫請求地址
        data:{},
        success:function(result){
            wx.config({
            // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
            debug: false,
            // 必填，公眾號的唯一標識
            appId: result.appId,
            // 必填，生成簽名的時間戳
            timestamp:""+result.timestamp,
            // 必填，生成簽名的隨機串
            nonceStr:result.noncestr,
             // 必填，簽名，見附錄1
             signature:result.signature,
             // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
             jsApiList : [ 'checkJsApi', 'scanQRCode' ]
             });
          }
    })

    wx.error(function(res) {
        alert("出錯了：" + res.errMsg);//這個地方的好處就是wx.config配置錯誤，會彈出窗口哪里錯誤，然后根據微信文檔查詢即可。
    });

    wx.ready(function() {
        wx.checkJsApi({
             jsApiList : ['scanQRCode'],
             success : function(res) {

             }
        });

        //點擊按鈕掃描二維碼
        document.querySelector('#scanQRCode').onclick = function() {
            wx.scanQRCode({
                needResult : 1, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
                scanType : [ "qrCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
                success : function(res) {
                var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果
                 window.location.href = result;//因為我這邊是掃描后有個鏈接，然后跳轉到該頁面
                }
            });
        };

    });
</script>

 

報錯：因為頁面加載會先請求ajax，所以wx.config配置錯誤，就會彈出錯誤。根據錯誤查找相應解決方案，一般情況都是后台請求參數錯誤導致的。(最后面會附上鏈接)

 

 

傳送門： https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

如果要繼續了解，可以看上面的鏈接。官方文檔最可靠。不看的話上面代碼直接復制粘貼就可以實現效果。

一般進入頁面，就看如下幾個圖就可以：