PHP--------微信網頁開發實現微信掃碼功能

今天說說微商城項目中用到的掃一掃這個功能，分享一下，希望對各位有所幫助。

前提：要有公眾號，和通過微信認證，綁定域名，得到相應信息，appid，appsecret等。

微信開發文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

來看看效果圖：

  

1：引入JS文件

2：config接口注入權限驗證配置

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>

 

wx.config({
        debug: false,
        appId: appid,
        timestamp: timestamp,
        nonceStr: noncestr,
        signature: signature,
        jsApiList: [
            'scanQRCode'//使用的JS接口
        ]
    });

 

注：所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,

目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

 

在Html中添加一個Button按鈕，添加掃一掃點擊事件調用掃一掃功能

   $(function () {
        $("#qrscan").click(function () {
            wx.scanQRCode({
                // 默認為0，掃描結果由微信處理，1則直接返回掃描結果
                needResult : 1,
                scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
                success : function(res) {
                    //掃碼后獲取結果參數賦值給Input
                    var result = res.resultStr;
                    layer.success('掃碼成功'+result);
                    $("#qrcodevalue").text(result);//掃碼后結果顯示在頁面上
                }
            });
        });
        
    });

 

注：我用到的參數  appid，appsecret等信息在php代碼中。