最近沉迷吃雞不能自拔，好久沒(méi)更新文章了。后續(xù)將陸續(xù)完善《Koa2微信公眾號(hào)開(kāi)發(fā)》。

一、簡(jiǎn)介

關(guān)于微信公眾號(hào)的介紹就省略了，自行搜索。注冊(cè)過(guò)程也不說(shuō)了。我們會(huì)直接注冊(cè)測(cè)試號(hào)來(lái)實(shí)現(xiàn)代碼。這將會(huì)是個(gè)全面講解微信公眾號(hào)開(kāi)發(fā)的系列教程。本篇是該系列的第一篇，本地開(kāi)發(fā)環(huán)境搭建以及接入微信。

在開(kāi)始之前最好去看看開(kāi)發(fā)者文檔微信公眾平臺(tái)技術(shù)文檔

二、本地開(kāi)發(fā)調(diào)試環(huán)境搭建

2.1 開(kāi)發(fā)環(huán)境

1. MacOs
2. Node v8.9.1
3. Koa2

2.2 微信公眾平臺(tái)開(kāi)發(fā)的基本原理

我們先來(lái)看看微信公眾平臺(tái)開(kāi)發(fā)的基本原理：在進(jìn)行微信開(kāi)發(fā)的時(shí)候,需要在我們?cè)谧约旱姆?wù)器上部署服務(wù)對(duì)微信消息進(jìn)行處理。微信服務(wù)器就相當(dāng)于一個(gè)轉(zhuǎn)發(fā)服務(wù)器。終端（手機(jī)、Pad等）發(fā)起請(qǐng)求至微信服務(wù)器，微信服務(wù)器然后將請(qǐng)求轉(zhuǎn)發(fā)給自定義服務(wù)（這里就是我們的具體實(shí)現(xiàn)）。服務(wù)處理完畢，然后轉(zhuǎn)發(fā)給微信服務(wù)器，微信服務(wù)器再將具體響應(yīng)回復(fù)到終端，通信協(xié)議為：HTTP；數(shù)據(jù)格式為：XML。

我們的服務(wù)需要做的就是對(duì)請(qǐng)求做出響應(yīng)，解析XML,進(jìn)行相應(yīng)的處理后再返回特定的XML。

2.3 ngrok微信本地開(kāi)發(fā)

這兒我們了解到了接入微信開(kāi)發(fā)需要一個(gè)自己的響應(yīng)服務(wù)器，我們可以購(gòu)買(mǎi)服務(wù)器或者新浪云百度云之類(lèi)的服務(wù)。但是在我們開(kāi)發(fā)階段這樣做是很麻煩的，我們需要搭建一個(gè)好用的本地調(diào)試環(huán)境，將內(nèi)網(wǎng)映射出去，讓外網(wǎng)能夠訪(fǎng)問(wèn)的。

這兒推薦使用Ngrok服務(wù)。win、mac都能方便使用，而且穩(wěn)定，外網(wǎng)域名是固定的。

打開(kāi)它的網(wǎng)站www.ngrok.cc/注冊(cè)登錄然后開(kāi)通隧道。同時(shí)你需要下載相應(yīng)的客戶(hù)端

在win中這是個(gè)批處理文件，運(yùn)行它然后填入相應(yīng)的隧道id回車(chē)即可，在Mac中命令行執(zhí)行如下命令。

./sunny clientid 隧道id

運(yùn)行成功會(huì)返回ngrok換發(fā)域名。

更多參見(jiàn)ngrok官網(wǎng)教程

到此，我們來(lái)讓node服務(wù)跑起來(lái)，并通過(guò)ngrok的域名外網(wǎng)訪(fǎng)問(wèn)

mkdir koa2-wechat && cd koa2-wechat
npm install koa --save

新建app.js

const Koa = require('koa')
const app = new Koa()

app.use(async ctx => {
 ctx.body = 'JavaScript之禪'
});

app.listen(7001);

我們運(yùn)行app.js，將服務(wù)跑起來(lái)，瀏覽器打開(kāi)localhost:7001我們將能夠看見(jiàn)返回了JavaScript之禪。這兒推薦使用supervisor，它會(huì)監(jiān)視你對(duì)代碼的改動(dòng),并自動(dòng)重動(dòng) Node

npm install -g supervisor
supervisor app.js

接下來(lái)就是用前面講的ngrok進(jìn)行內(nèi)網(wǎng)轉(zhuǎn)發(fā)了

./sunny clientid 隧道id

如果不出問(wèn)題，你打開(kāi)你的轉(zhuǎn)發(fā)域名http://**.free.ngrok.cc也將看見(jiàn)JavaScript之禪

三、接入微信公眾平臺(tái)開(kāi)發(fā)

3.1 接入流程

接入微信公眾平臺(tái)開(kāi)發(fā)，開(kāi)發(fā)者需要按照如下步驟完成：

1、填寫(xiě)服務(wù)器配置

2、驗(yàn)證服務(wù)器地址的有效性

3、依據(jù)接口文檔實(shí)現(xiàn)業(yè)務(wù)邏輯

我們登錄微信公眾平臺(tái)接口測(cè)試帳號(hào)https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login，登錄后填寫(xiě)接口配置信息*(你的url地址以及token)*，這時(shí)肯定不能配置成功的。我們需要驗(yàn)證服務(wù)器地址的有效性，開(kāi)發(fā)者提交信息后，微信服務(wù)器將發(fā)送GET請(qǐng)求到填寫(xiě)的服務(wù)器地址URL上，GET請(qǐng)求攜帶參數(shù)如下表所示：

開(kāi)發(fā)者通過(guò)檢驗(yàn)signature對(duì)請(qǐng)求進(jìn)行校驗(yàn)。若確認(rèn)此次GET請(qǐng)求來(lái)自微信服務(wù)器，原樣返回echostr參數(shù)內(nèi)容，則接入生效，成為開(kāi)發(fā)者成功，否則接入失敗。加密/校驗(yàn)流程如下：

1. 將token、timestamp、nonce三個(gè)參數(shù)進(jìn)行字典序排序
2. 將三個(gè)參數(shù)字符串拼接成一個(gè)字符串進(jìn)行sha1加密
3. 開(kāi)發(fā)者獲得加密后的字符串可與signature對(duì)比，標(biāo)識(shí)該請(qǐng)求來(lái)源于微信

Talk is cheap. Show me the code

3.2 koa2驗(yàn)證服務(wù)器地址的有效性

修改app.js

const Koa = require('koa')
const app = new Koa()
// 引入node加密模塊進(jìn)行sha1加密
const crypto = require('crypto')

const config = {
 wechat: {
  appID: 'appID',
  appsecret: 'appsecret',
  token: 'zenofjavascript',
 }
}

app.use(async ctx => {
  const { signature, timestamp, nonce, echostr } = ctx.query 
  const token = config.wechat.token
  let hash = crypto.createHash('sha1')
  const arr = [token, timestamp, nonce].sort()
  hash.update(arr.join(''))
  const shasum = hash.digest('hex')
  if(shasum === signature){
   return ctx.body = echostr
  }
  ctx.status = 401   
  ctx.body = 'Invalid signature'
})

app.listen(7001)

進(jìn)入測(cè)試號(hào)的頁(yè)面重新提交接口配置信息，你將會(huì)看見(jiàn)一個(gè)一閃而過(guò)的配置成功過(guò)提示框。恭喜，這標(biāo)志著你正式跳進(jìn)了微信開(kāi)發(fā)的坑了。

本篇文章到此結(jié)束，下一節(jié)將講解公眾號(hào)的消息回復(fù)功能

參考鏈接

微信公眾平臺(tái)開(kāi)發(fā)者文檔
公眾號(hào)測(cè)試號(hào)
Ngrok
koa
supervisor

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論