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

时间 2019-11-08

原文原文链接

前言

在前一篇文章中，已经介绍了如何去配置微信公众平台以及如何用node.js去处理一些用户发起的主动行为。有须要了解的点我去上一篇
那么在这篇文章将继续讲解如何用node.js去开发微信公众号，主要内容包括access_token的生成，各类api的调用，还有前端如何去调用微信提供的jsapi。
前端

调用微信接口

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

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

定义了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来调用其余的微信接口

来看一下官方给出的获取用户列表接口文档：算法

文档地址点我！

接口文档的说明已经特别很明白了，这里不作过多说明，直接看下我这边是如何调用的吧！json

就是这么简单，相信你们都能看懂，这里就不作过多的解释了！
调用微信其余接口的方式也大同小异，基本上就是参数和调用方式的区别。更多的资料查询相关的官方文档吧！

提示： 调用失败的时候的错误提示以下：后端

前端JS-SDK的使用

最最最最最重要的一点，生成JS-SDK使用权限签名。

1. 获取jsapi_ticket

看以下代码：api

根据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. 返回数据给前端

上图代码中有一段：bash

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三个值必须和服务端的保持一致，因此这里我建议经过接口去获取；

关注

你们好，我是西瓜太郎，小前端一枚，坐标杭州，若有写的不适的地方还请大佬多多指教，若有助于八方兄弟，那小弟搬砖将会更加有动力！
祝你们工做顺利，666！！！