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

 來源：

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

項目截圖：

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

我只負責前端，因此只上前端代碼，後端代碼是java。

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

1 <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

若是要繼續瞭解，能夠看上面的連接。官方文檔最可靠。不看的話上面代碼直接複製粘貼就能夠實現效果。

通常進入頁面，就看以下幾個圖就能夠：