教你如何用node.js开发微信公众号（二）

在前一篇文章中，已经介绍了如何去配置微信公众平台以及如何用 node.js 去处理一些用户发起的主动行为。有需要了解的点我去上一篇

那么在这篇文章将继续讲解如何用 node.js 去开发微信公众号，主要内容包括 access_token 的生成，各种 api 的调用，还有前端如何去调用微信提供的 jsapi 。

调用微信接口

调用微信接口，最重要的就是要先获取 access_token ,没有 access_token 的话,就无法调通任何微信提供的接口。那么如何获取 access_token 呢？来看一段代码：

下面来解释一下这段代码做了什么事情：

1. 定义了 appid和secret ,这两个是由微信公众平台提供的，不明白的转到上一篇；
2. 微信会提供一个获取 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 ；
3. 调用后会返回一个 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 ;

来看一下官方给出的配置：

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>
复制代码

总结

后面前端配置部分讲的有点笼统，主要官方文档这部分也写的特别详细，然后相信大家都是优秀的小伙伴，都能看懂，所以偷懒了点；这里主要给大家列一下坑点：

1. 获取 access_token和jsapiTicket 接口的调用次数是有限的，所以获取了 access_token和jsapiTicket 之后要缓存起来(不管用那种缓存技术),每次获取的有效期2小时；
2. 生成 JS-SDK 使用权限签名时，用 sha1() 加密的字符串一定要严格按照官方文档的格式拼接；
3. 前端配置 wx.config 的时候， timestamp，nonceStr，signature 三个值必须和服务端的保持一致，所以这里我建议通过接口去获取；