微信公衆號開發之：實現微信掃一掃

公衆號配置

登錄微信公衆平臺進入–>“公衆號設置”–>“功能設置”–>填寫“JS接口安全域名”，具體進入官網查看與配置。

引入js文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

通過jssdk配置接口注入權限驗證配置

wx.config({
            debug: false,
            appId: "", // 公衆號唯一標識
            timestamp: "", // 生成簽名的時間戳
            nonceStr: "", // 生成簽名的隨機串
            signature: "", // 加密的簽名
            jsApiList: [] // 需要使用的JS接口列表
        });

封裝一個jssdk配置類

1. 先獲取access_token
2. 再獲取jsapi_ticket
3. 最後獲取jssdk配置

<?php
namespace wx;
class JSSDK
{
    private $appid ='';
    private $appsecret ='';

    public function __construct($appid, $appsecret)
    {
        $this->appid = $appid;
        $this->appsecret = $appsecret;
    }
	// 1.獲取access token
	// 2.獲取jsapi_ticket
	// 3.獲取jssdk配置
	
    // 請求方式,通過curl獲取
}

先封裝一個curl請求方法

 private function httpPostRequest($url, $data = null, $json = false)
{
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
        if (!empty($data)) {
            curl_setopt($curl, CURLOPT_POST, 1);
            curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
            if ($json) {
                curl_setopt($curl, CURLOPT_HEADER, 0);
                curl_setopt(
                    $curl,
                    CURLOPT_HTTPHEADER,
                    array(
                        'Content-Type: application/json; charset=utf-8',
                        'Content-Length: ' . strlen($data)
                    )
                );
            }
        }
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        $output = curl_exec($curl);
        curl_close($curl);
        return $output;
}

獲取access_token

• 請求地址
  https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

• 步驟
  – 判斷緩存中是否存在access_token
  – 如果有緩存則直接返回access_token
  – 如果沒有緩存則通過curl請求地址，並返回access_token

• 代碼

    private function getAccess_token()
    {
        $cache = cache('access_token');
        if($cache){
            return $cache;
        } else {
            $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appid&secret=$this->appsecret";
            $output = $this->httpPostRequest($url);
            $json = json_decode($output);
            if(isset($json->access_token)) {
                cache('access_token',$json->access_token,7000);
                return $json->access_token;
            } else {
                return false;
            }
        }
    }

獲取jsapi_ticket

拿到access_token後，就可以獲取jsapi_ticket，jsapi_ticket是公衆號用於調用微信JS接口的臨時票據

• 請求方式
  https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

    private function getJsapi_ticket()
    {
        $cache = cache('jsapi_ticket'); 
        if($cache) {  //判斷是否緩存
            return $cache;  // 有緩存則直接返回jsapi_ticket
        } else {a
            $access = $this->getAccess_token();  // 獲取access_token
            if ($access) {
                $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$access&type=jsapi";
                $output = $this->httpPostRequest($url);
                $json = json_decode($output);
                if(isset($json->ticket)) {
                    cache('jsapi_ticket',$json->ticket,7000);  // 緩存jsapi_ticket
                    return $json->ticket;
                } else {
                    return false;
                }
            } else {
                return false;
            }
        }
    }

獲取jssdk配置：

• 獲取appid(公衆號唯一標識)
• 生成簽名的一個隨機字符串(noncestr)
• 生成簽名的時間戳(timestamp)
• 加密的簽名(signature)

    public function getJSSDKconfig()
    {
        $strs="QWERTYUIOPASDFGHJKLZXCVBNM1234567890qwertyuiopasdfghjklzxcvbnm";
        $noncestr=substr(str_shuffle($strs),mt_rand(0,strlen($strs)-11),10);  //隨機字符串
        $jsapi_ticket = $this->getJsapi_ticket();  //獲取jsapi_ticket
        $timestamp = time();  //時間戳
        $url = request()->url(true);   //獲取當前url
        //生成簽名
        $str = 'jsapi_ticket='.$jsapi_ticket.'&noncestr='.$noncestr.'&timestamp='.$timestamp.'&url='.$url;
        // 生成簽名 -> jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
        $signature = sha1($str);   //sha1加密，生成JS-SDK權限驗證的簽名
        
        // 返回配置參數
        return [
            'appId'=> $this->appid,
            'timestamp'=> $timestamp,
            'nonceStr'=> $noncestr,
            'signature' => $signature
        ];
    }

例子

實現微信掃一掃：

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
  wx.config({
            debug: false, 
            appId: "{$jssdkconfig['appId']}", 
            timestamp: "{$jssdkconfig['timestamp']}", 
            nonceStr: "{$jssdkconfig['nonceStr']}", 
            signature: "{$jssdkconfig['signature']}", 
            jsApiList: ['scanQRCode'] 
        });
        $('#scanButton').click(function () {
            wx.scanQRCode({
                needResult: 0, 
                scanType: ["qrCode", "barCode"], 
                success: function (res) {
                    var result = res.resultStr; 
                }
            })
        });
</script>