教你如何用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三個值必須和服務端的保持一致，因此這裏我建議經過接口去獲取；