JSSDK是什么
JSSDK是微信对外提供的一些基于用户层面的功能代码的集合,只在微信浏览器中适用。该SDK给我们提供了例如,照片预览,上传照片,下载照片等功能。但是诸如上传照片的功能,jssdk只给我们提供了统一的上传方法,但是上传的数据流处理还需要我们自己在后台使用相关的业务代码来处理。

如何引入JSSDK
jssdk的引入是非常简单的,其本身也是一个需要加载的js文件。我们使用外部js文件加载的方法就可以。例如

1
这个地址大家注意查看官方文档保证引入最新版的。
关于微信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}",// 必填,签名,见附录1jsApiList: ["chooseWXPay"] // 必填,需要使用的JS接口列表, 所有JS接口列表见附录2
});

1
2
3
4
5
6
7
8
9
10
这个对于参数的注释也是非常明确的,大家可以看注释。
那么大家可能会关心这些配置数据从哪儿来,在此我使用的是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(′JSAPITICKET′);if(empty(jsapiTicket = cache('JSAPI_TICKET'); if (empty(jsapiTicket=cache(′JSAPIT​ICKET′);if(empty(jsapiTicket)) {
$accessToken = get_access_token();
KaTeX parse error: Expected '}', got 'EOF' at end of input: …?access_token={accessToken}&type=jsapi";
//http_reqest是我自己封装的curl请求的函数
ticketResult=httpreqest(ticketResult = http_reqest(ticketResult=httpr​eqest(ticketUrl);
ticketArr=jsondecode(ticketArr = json_decode(ticketArr=jsond​ecode(ticketResult, true);
$jsapiTicket = $ticketArr[‘ticket’];
cache(‘JSAPI_TICKET’, $jsapiTicket, 7200);
}

return $jsapiTicket;

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
获取ticket后进行signature签名示例代码

function make_signature($params)
{
//① 按照字段名进行排序
paramsKey=arraykeys(paramsKey = array_keys(paramsKey=arrayk​eys(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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
处理数据在页面输出

//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=makesignature(signature = make_signature(signature=makes​ignature(params);

return view(‘index’, [
‘signature’ => $signature,
‘params’ => $params,
‘appid’ => config(‘wechat.appId’)
]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
页面jssdk初始化部分

wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: “{KaTeX parse error: Expected 'EOF', got '}' at position 6: appid}̲", // 必填,公众号的唯一…params.timestamp}”, // 必填,生成签名的时间戳
nonceStr: “{KaTeX parse error: Expected 'EOF', got '}' at position 16: params.noncestr}̲", // 必填,生成签名的随…signature}”,// 必填,签名,见附录1
jsApiList: [
“chooseWXPay”
] // 必填,需要使用的JS接口列表, 所有JS接口列表见附录2
});
1
2
3
4
5
6
7
8
9
10
要获取文章的代码请联系我,或者关注以上二维码根据相应的操作获取。同时这部分内容的视频在:https://edu.csdn.net/course/detail/5861

作者:MarsWill
来源:CSDN
原文:https://blog.csdn.net/marswill/article/details/79237220
版权声明:本文为博主原创文章,转载请附上博文链接!

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

  1. 微信开发 ━━ 微信商户v3微信支付H5方式开发之php篇

    native方式开发纪要:<微信开发 ━━ 微信商户native方式支付v3开发之php篇> 一.流程 流程是必须要弄懂的,弄懂之后遇到问题也能知道出在哪里. 官方说明:<H5支付统 ...

  2. 微信支付V3 微信小程序签名失败问题

    微信支付的V3版本使用的是RSA加密,从前的V2版本使用的是MD5加密.今天在调试微信小程序的时候,始终无法调起微信支付,提示"支付签名验证失败" 问题排查思路: 1. 先调起其它 ...

  3. 百度熊掌号基础seo教程之熊掌号运营技巧

    百度官方宣布将在以后的日子里为熊掌号导流,掌握与百度熊掌号密切相关的基础seo教程,是必须的.熊掌号能为网站提供内容保护,提供品牌特型,是百度搜索引擎本身的一次重大升级,其与传统的seo是有关联的,且 ...

  4. 微信开发 ━━ 微信商户v3微信支付回调之php篇

    开发内容都在这里: 微信支付API v3 证书和回调报文解密 在微信支付时提供一个回调地址,支付完成后微信会向这个回调地址发送一个json格式的报文,将报文内容解密后获取订单号等数据 报文内容: {& ...

  5. 微信公众号注册免费教程

    微信公众号注册免费教程 注册公众号:1.打开微信公众平台官网,然后注册一个公众号 可以直接搜索微信公众号或者网站:https://mp.weixin.qq.com 点击立即注册 2.根据自己需要选择公 ...

  6. 微信公众号之微信支付(V3版)jsp页面jsapi统一下单调启支付(java版)

    web项目 按顺序一步一步来 准备: 申请了微信支付接口的微信公众号一枚 , 备案的域名网站一枚, (如果有没有的这两个东西会耽误你很久,因为微信支付必须是线上,无法本地调试,) 这里说一下 如果有经 ...

  7. 微信支付V3==>公众号支付、踩坑、简单记录

    开始! 接支付前,看了微信支付文档(有点乱),也看了一些文章,都是假V3,点进去看demo还是XML格式,坑,不过多描述. V3接起来整体还是有些坑的,不过坑不深,这里简单记录一下,避免忘了再踩! 首 ...

  8. 微信支付、微信公众号接口认证方案

    1 微信公众号接口认证方案 1.1 认证流程 安全API接口认证方案 流程图模板_ProcessOn思维导图.流程图​www.processon.com/view/link/636e05a21e085 ...

  9. php获取微信收款记录,微信公众号开发之微信支付代码记录的实现

    需求说明 这个需求说明是完全没有必要的,但是还是写一下吧,但凡是做公众号的,一般都是需要了解这个微信支付的,不然基本的业务都没办法走,所以今天简单的记录一下微信支付的一些问题以及流程是怎么样的.记录的 ...

  10. 浅析微信支付:微信支付简单介绍(小程序、公众号、App、H5)

    本文是[浅析微信支付]系列文章的第二篇,主要讲解一下普通商户接入的支付方式以及其中的不同之处. 上篇文章讲了本系列的大纲,没有看过的朋友们可以看一下. 浅析微信支付:前篇大纲 微信支付是集成在微信客户 ...

最新文章

  1. 剑指offer:面试题34. 二叉树中和为某一值的路径
  2. 数据结构与算法--绪论
  3. 简单探讨TypeScript 枚举类型
  4. Linux Kernel 5.0 RC 7 发布
  5. 【题解】Luogu P1533 可怜的狗狗
  6. Javascript与框架prototype,JQyuery调研
  7. ASP.NET 2.0角色及成员管理
  8. SAP财务管控(财务总监背后的管理大师)
  9. 创建 linuxrc 文件
  10. 登陆界面(jsp)客户端验证
  11. python 40位的数减个位数_Python数据分析入门教程(五):数据运算
  12. Linux Disk Quota实践
  13. 经典机器学习系列(十二)【学习排序】
  14. 20220309讨论
  15. Unity-拓展篇-接入海康威视摄像头
  16. cmd命令根据wsdl文件生成Java文件
  17. 【逻辑题】猜猜她的生日
  18. python信用卡客户_银行信用卡客户价值分析(Python数据分析)
  19. 基于SVG的绘制多边形jQuery插件
  20. 批量自动下单(拼多多)

热门文章

  1. java.io的缓冲流、转换流、序列化流
  2. uni-app横屏设置
  3. win10计算机升级系统,win10系统升级更新方法
  4. delphi 各版本的特性
  5. 我的java语法基础篇刷题2
  6. Thumbnails压缩图片
  7. 2011年美国大学招生广告
  8. 研究了四大计算机名校的培养方案,核心课程都在这了
  9. C++20新特性—概述
  10. 去除黄褐斑的方法,姬净美怎么样