本文承接之前釋出的部落格《 微信支付V3微信公眾號支付PHP教程/thinkPHP5公眾號支付》必須閱讀上篇文章後才可以閱讀這篇文章。由於最近一段時間工作比較忙，部落格更新比較慢。如果有任何問題大家可以關注以上公眾號，在公眾號中給我留言，一般我會在晚上統一檢視所有郵件及留言逐一回復。我的郵箱地址[email protected]希望和大家一起交流，IT工作覺得不能閉門造車。

JSSDK是什麼

JSSDK是微信對外提供的一些基於使用者層面的功能程式碼的集合，只在微信瀏覽器中適用。該SDK給我們提供了例如，照片預覽，上傳照片，下載照片等功能。但是諸如上傳照片的功能，jssdk只給我們提供了統一的上傳方法，但是上傳的資料流處理還需要我們自己在後臺使用相關的業務程式碼來處理。

如何引入JSSDK

jssdk的引入是非常簡單的，其本身也是一個需要載入的js檔案。我們使用外部js檔案載入的方法就可以。例如

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

這個地址大家注意檢視官方文件保證引入最新版的。
關於微信jssdk的引入是非常簡單的，這樣就算引入了。對於jssdk大家也沒有必要把他下載到本地，直接使用官方連結就行了。

如何使用JSSDK

JSSDK的初始化

在使用jssdk之前需要使用相應的資料對jssdk進行初始化。一般情況下我們是呼叫wx.config()來進行初始化，具體的初始化程式碼結構如下：

    wx.config({
        debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
        appId: "{$appid}", // 必填，公眾號的唯一標識
        timestamp: "{$params.timestamp}", // 必填，生成簽名的時間戳
        nonceStr: "{$params.noncestr}", // 必填，生成簽名的隨機串
        signature: "{$signature}",// 必填，簽名，見附錄1
 

        jsApiList: [
            "chooseWXPay"
        ] // 必填，需要使用的JS介面列表， 所有JS介面列表見附錄2
    });

這個對於引數的註釋也是非常明確的，大家可以看註釋。
那麼大家可能會關心這些配置資料從哪兒來，在此我使用的是PHP作為後端處理的語言，那麼在以上的配置中使用的是PHP中頁面變數的方式傳引數到頁面。

PHP處理初始化引數

在這兒引數到底該怎麼生成呢？我們逐一來說明：

• appId：appId可以在我們的微信公眾平臺開發者後臺看到，這個比較容易。
  

• timestamp： 生成簽名時的時間戳，這個和後邊的signature有聯絡，我們在生成signature簽名的時候再一起來說明如何

• nonceStr：此引數是生成簽名時的隨機字串，當然這個是自己隨機生成的，可以設定自己的隨機規則，他也是和signature有關係的我們同樣在signature中會說明
• signature：不用說這個是簽名的生成。那麼其他引數都和簽名有關係，我們就在新的段落來說說這個簽名的生成

signature簽名的生成

簽名生成規則如下：
參與簽名的引數
1. noncestr（隨機字串）
2. 有效的jsapi_ticket
3. 有效的jtimestamp（時間戳）
4. url（當前網頁的URL，不包含#及其後面部分）

簽名規則
1. 對所有待簽名引數按照欄位名的ASCII 碼從小到大排序（字典序）
2. 使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字串string1（所有引數名均為小寫字元，不要進行url轉義）
3. 對string1作sha1加密

這樣簽名就算完成了。但是在準備簽名引數的時候隨機字串可以自己生成，有效的時間戳可以直接獲取例如time()，當前的url地址也可以獲取。但是jsapi_ticket怎麼樣獲取呢？

jsapi_ticket的獲取

在瞭解jsapi_ticket的前我們必須知道，在微信開發中非常重要的一個東西，access_token我們知道有了access_token我們就可以直接幹很多事了。那麼對於jssdk的配置中如果直接使用access_token有access_token洩露的危險。所以我們就有一個其他的解決方案就是jsapi_ticket這個東西。jsapi_ticket是一個臨時票據，他有效期只有2小時，2小時候需要重新獲取。那麼如何生成jsapi_ticket呢？

thinkphp5中的程式碼示例

獲取ticket程式碼

function get_jsapi_ticket()
{
    $jsapiTicket = cache('JSAPI_TICKET');
    if (empty($jsapiTicket)) {
        $accessToken = get_access_token();
        $ticketUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$accessToken}&type=jsapi";
        //http_reqest是我自己封裝的curl請求的函式
        $ticketResult = http_reqest($ticketUrl);
        $ticketArr = json_decode($ticketResult, true);
        $jsapiTicket = $ticketArr['ticket'];
        cache('JSAPI_TICKET', $jsapiTicket, 7200);
    }

    return $jsapiTicket;
}

獲取ticket後進行signature簽名示例程式碼

function make_signature($params)
{
    //① 按照欄位名進行排序
    $paramsKey = array_keys($params);
    sort($paramsKey, SORT_STRING);

    //② 拼湊引數成地址中引數的形式  key=v   key2=v2
    $sortParams = [];
    foreach ($paramsKey as $v)
    {
        $sortParams[] = $v."=".$params[$v];
    }

    $paramsStr = implode('&', $sortParams);
    $signature = sha1($paramsStr);
    return $signature;
}

處理資料在頁面輸出

//1 獲取jsapiticket
$ticket = get_jsapi_ticket();

//2 根據引數進行簽名 | 簽名演算法
$params = [
    'jsapi_ticket' => $ticket,
    'timestamp' => time(),
    'url' => \request()->url(true),
    'noncestr' => substr(md5(time().rand(1000, 999999)), 0 , 20)
];

$signature = make_signature($params);

return view('index', [
    'signature' => $signature,
    'params' => $params,
    'appid' => config('wechat.appId')
]);

頁面jssdk初始化部分

wx.config({
     debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
     appId: "{$appid}", // 必填，公眾號的唯一標識
     timestamp: "{$params.timestamp}", // 必填，生成簽名的時間戳
     nonceStr: "{$params.noncestr}", // 必填，生成簽名的隨機串
     signature: "{$signature}",// 必填，簽名，見附錄1
     jsApiList: [
         "chooseWXPay"
     ] // 必填，需要使用的JS介面列表， 所有JS介面列表見附錄2
 });