微信支付V3微信公众号支付PHP教程(thinkPHP5公众号支付)/JSSDK的使用

扫二维码关注，获取更多技术分享

本文承接之前发布的博客《微信支付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呢？

第一步：获取access_token当然这些步骤是在后端进行的。
第二步：拿上一步获取的access_token去请求jsapi_ticket。请求的地址为https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=access_token&type=jsapi是一个GET请求注意把access_token换成你上一步获取到的。

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
 });