前言
在前一篇文章中, 已经介绍了如何去配置微信公众平台以及如何用 node.JS 去处理一些用户发起的主动行为. 有需要了解的点我去上一篇
那么在这篇文章将继续讲解如何用 node.JS 去开发微信公众号, 主要内容包括 access_token 的生成, 各种 API 的调用, 还有前端如何去调用微信提供的 jsapi.
调用微信接口
调用微信接口, 最重要的就是要先获取 access_token, 没有 access_token 的话, 就无法调通任何微信提供的接口. 那么如何获取 access_token 呢? 来看一段代码:
下面来解释一下这段代码做了什么事情:
定义了 appid 和 secret, 这两个是由微信公众平台提供的, 不明白的转到上一篇;
微信会提供一个获取 access_token 接口:
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}
, 就是图中用 request 调用的接口, 该请求是一个 GET 请求, 该有三个参数, 其中 grant_type 是固定的填写 client_credential,appid 和 secret 分别是微信公众平台配置的 appid 和 secret;
调用后会返回一个 JSON, 如果获取成功的话 JSON 中会有一个 access_token, 我这边是存在一个全局的变量
wechat_access_token
里面(当然这样的话会存在很多问题, 能力有限, 轻喷); 然后存了一个获取 access_token 的时间戳, 用于判断 access_token 是否过期(官方文档给的 access_token 是 7200 秒), 我这里设置了 6000 秒就重新获取 access_token;
说明: 获取 access_token 的接口的调用次数是有限制的, 不能每次进来就调用接口去拿 access_token, 特别是测试公众号, 次数很快就用完了; 具体的可以看官方文档, 文档地址点我!
用获取用户列表来说明如何根据 access_token 来调用其他的微信接口
来看一下官方给出的获取用户列表接口文档:
文档地址点我!
接口文档的说明已经特别很明白了, 这里不做过多说明, 直接看下我这边是如何调用的吧!
就是这么简单, 相信大家都能看懂, 这里就不做过多的解释了!
调用微信其他接口的方式也大同小异, 基本上就是参数和调用方式的区别. 更多的资料查询相关的官方文档吧!
提示: 调用失败的时候的错误提示如下:
前端 JS-SDK 的使用
最最最最最重要的一点, 生成 JS-SDK 使用权限签名.
1. 获取 jsapi_ticket
看如下代码:
根据 ACCESS_TOKEN 调用 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${ACCESS_TOKEN}&type=jsapi 获取 ACCESS_TOKEN, 由于该接口也有次数限制, 所以把结果的 ticket 存到全局变量中(有效 2 个小时);
2. 生成签名 signature
话不多说, 上图:
生成签名 4 要素: jsapiTicket,nonceStr,timestamp,url; 按照顺序拼接成一个字符串(必须按照顺序), 官方文档也有说明;
签名算法规则 (官方文档原文): 参与签名的字段包括 noncestr(随机字符串), 有效的 jsapi_ticket, timestamp(时间戳),url(当前网页的 URL, 不包含 #及其后面部分). 对所有待签名参数按照字段名的 ASCII 码从小到大排序(字典序) 后, 使用 URL 键值对的格式 (即 key1=value1&key2=value2...) 拼接成字符串 string1. 这里需要注意的是所有参数名均为小写字符. 对 string1 作 sha1 加密, 字段名和字段值都采用原始值, 不进行 URL 转义.
即 signature=sha1(string1).
3. 返回数据给前端
上图代码中有一段:
- res.send({
- signture, // 生成的签名
- timestamp: timestamp, // 定义的时间戳
- nonceStr: nonceStr, // 定义的随机字符串
- appid:"xxxxxxxxx" // 公众号的 appid
- });
前端通过 Ajax 调用 / signture 这个接口, 接口会按照以上数据格式返回给前端, 前端可以做相应的配置(前端怎么配置待会说);
到这里, 服务端的工作基本上就差不多了, 来看看前端吧!
文档地址点我(文档打开以后拉到附录部分才是生成 JS-SDK 使用权限签名的内容);
配置 JS-SDK
1. 域名绑定
需要在公众平台配置 JS 接口安全域名, 只有在该域名下的页面才能正常使用 JS-SDK;
2. 引入 JS 文件
在需要调用 JS 接口的页面引入如下 JS 文件,(支持 https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
3. 通过 config 接口注入权限验证配置
来看一下官方给出的配置:
- wx.config({
- debug: true, // 开启调试模式, 调用的所有 API 的返回值会在客户端 alert 出来, 若要查看传入的参数, 可以在 pc 端打开, 参数信息会通过 log 打出, 仅在 pc 端时才会打印.
- appId: '', // 必填, 公众号的唯一标识
- timestamp: , // 必填, 生成签名的时间戳
- nonceStr: '', // 必填, 生成签名的随机串
- signature: '',// 必填, 签名
- jsApiList: [] // 必填, 需要使用的 JS 接口列表
- });
- wx.ready(function(){
- // config 信息验证后会执行 ready 方法, 所有接口调用都必须在 config 接口获得结果之后, config 是一个客户端的异步操作, 所以如果需要在页面加载时就调用相关接口, 则须把相关接口放在 ready 函数中调用来确保正确执行. 对于用户触发时才调用的接口, 则可以直接调用, 不需要放在 ready 函数中.
- });
- wx.error(function(res){
- // config 信息验证失败会执行 error 函数, 如签名过期导致验证失败, 具体错误信息可以打开 config 的 debug 模式查看, 也可以在返回的 res 参数中查看, 对于 SPA 可以在这里更新签名.
- });
这个文档中有, 不做解释了, 给大家看一段我自己做测试的时候跑通的代码吧:
- <script>
- $.Ajax({
- url: "http://www.example.com/signture",
- success: function (res) {
- wx.config({
- debug: true,
- appId: res.appid, // 公众号的唯一标识
- timestamp: res.timestamp, // 必须与后端生成的一致
- nonceStr: res.nonceStr, // 必须与后端生成的一致
- signature: res.signture, // 必须与后端生成的一致
- jsApiList: [
- 'checkJsApi',
- "scanQRCode",
- "chooseImage"
- ]
- });
- wx.ready(function () {
- wx.chooseImage({
- count: 1, // 默认 9
- sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图, 默认二者都有
- sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机, 默认二者都有
- success: function (res) {
- //alert(JSON.stringify(res))
- var localIds = res.localIds; // 返回选定照片的本地 ID 列表, localId 可以作为 img 标签的 src 属性显示图片
- var img = document.createElement("img");
- img.src = localIds[0];
- document.querySelector("body").append(img);
- }
- });
- });
- }
- });
- </script>
首先看一下 wx.config 的配置, 由于 timestamp,nonceStr,signature 必须与后端的保持一致, 所以我这个地方都是通过 / signture 接口拿到这些数据, 保持前后端数据的一致性(上文提到说通过 / signture 接口把数据返回给前端, 在这里就用到啦!).jsApiList 是所要调用的 jsapi 接口列表, 有很多, 需要用到哪些就配哪些.
对于 wx.ready, 官方文档做了很明确的说明, 不做过多解释, 上面的案例就是在页面初始化的时候去调用拍照或从手机相册中选图接口, 然后上传图片, 并展示在界面中, 相信大家都能够看懂吧!
微信官方文档有一系列 jsapi 列表, 包括分享, 摇一摇, 支付, 图像处理......
具体的文档地址点我
总结
后面前端配置部分讲的有点笼统, 主要官方文档这部分也写的特别详细, 然后相信大家都是优秀的小伙伴, 都能看懂, 所以偷懒了点; 这里主要给大家列一下坑点:
获取
access_token 和 jsapiTicket
接口的调用次数是有限的, 所以获取了
access_token 和 jsapiTicket
之后要缓存起来(不管用那种缓存技术), 每次获取的有效期 2 小时;
生成 JS-SDK 使用权限签名时, 用 sha1()加密的字符串一定要严格按照官方文档的格式拼接;
前端配置 wx.config 的时候,
timestamp,nonceStr,signature
三个值必须和服务端的保持一致, 所以这里我建议通过接口去获取;
来源: https://juejin.im/post/5bee8507e51d457c042c23c8