Koa2微信公衆號開發(一) 本地開發調試環境搭建

1、簡介

關於微信公衆號的介紹就省略了，自行搜索。註冊過程也不說了。咱們會直接註冊測試號來實現代碼。這將會是個全面講解微信公衆號開發的系列教程。本篇是該系列的第一篇，本地開發環境搭建以及接入微信。
在開始以前最好去看看開發者文檔微信公衆平臺技術文檔

2、本地開發調試環境搭建

2.1 開發環境

- MacOs
- Node v8.9.1
- Koa2

2.2 微信公衆平臺開發的基本原理

咱們先來看看微信公衆平臺開發的基本原理：在進行微信開發的時候,須要在咱們在本身的服務器上部署服務對微信消息進行處理。微信服務器就至關於一個轉發服務器。終端（手機、Pad等）發起請求至微信服務器，微信服務器而後將請求轉發給自定義服務（這裏就是咱們的具體實現）。服務處理完畢，而後轉發給微信服務器，微信服務器再將具體響應回覆到終端，通訊協議爲：HTTP；數據格式爲：XML。

咱們的服務須要作的就是對請求作出響應，解析XML,進行相應的處理後再返回特定的XML。

2.3 ngrok微信本地開發

這兒咱們瞭解到了接入微信開發須要一個本身的響應服務器，咱們能夠購買服務器或者新浪雲百度雲之類的服務。可是在咱們開發階段這樣作是很麻煩的，咱們須要搭建一個好用的本地調試環境，將內網映射出去，讓外網可以訪問的。
這兒推薦使用Ngrok服務。win、mac都能方便使用，並且穩定，外網域名是固定的。

打開它的網站https://www.ngrok.cc/註冊登陸而後開通隧道。同時你須要下載相應的客戶端
在win中這是個批處理文件，運行它而後填入相應的隧道id回車便可，在Mac中命令行執行以下命令。

./sunny clientid 隧道id

運行成功會返回ngrok換髮域名。

更多參見ngrok官網教程

到此，咱們來讓node服務跑起來，並經過ngrok的域名外網訪問

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);

咱們運行app.js，將服務跑起來，瀏覽器打開localhost:7001咱們將可以看見返回了JavaScript之禪。這兒推薦使用supervisor，它會監視你對代碼的改動,並自動重動 Node

npm install -g supervisor
supervisor app.js

接下來就是用前面講的ngrok進行內網轉發了

./sunny clientid 隧道id

若是不出問題，你打開你的轉發域名http://.free.ngrok.cc也將看見JavaScript之禪

3、接入微信公衆平臺開發

3.1 接入流程

接入微信公衆平臺開發，開發者須要按照以下步驟完成：

一、填寫服務器配置

二、驗證服務器地址的有效性

三、依據接口文檔實現業務邏輯

咱們登陸微信公衆平臺接口測試賬號https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login，登陸後填寫接口配置信息(你的url地址以及token)，這時確定不能配置成功的。咱們須要驗證服務器地址的有效性，開發者提交信息後，微信服務器將發送GET請求到填寫的服務器地址URL上，GET請求攜帶參數以下表所示：

參數	描述
signature	微信加密簽名，signature結合了開發者填寫的token參數和請求中的timestamp參數、nonce參數。
timestamp	時間戳
nonce	隨機數
echostr	隨機字符串

開發者經過檢驗signature對請求進行校驗。若確認這次GET請求來自微信服務器，原樣返回echostr參數內容，則接入生效，成爲開發者成功，不然接入失敗。加密/校驗流程以下：

1. 將token、timestamp、nonce三個參數進行字典序排序
2. 將三個參數字符串拼接成一個字符串進行sha1加密
3. 開發者得到加密後的字符串可與signature對比，標識該請求來源於微信

Talk is cheap. Show me the code

3.2 koa2驗證服務器地址的有效性

修改app.js

const Koa = require('koa')
const app = new Koa()
// 引入node加密模塊進行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)

進入測試號的頁面從新提交接口配置信息，你將會看見一個一閃而過的配置成功過提示框。恭喜，這標誌着你正式跳進了微信開發的坑了。

GitHub地址 https://github.com/liuxing/ko...

本篇文章到此結束，下一節將講解公衆號的消息回覆功能

參考連接

• 微信公衆平臺開發者文檔
• 公衆號測試號
• Ngrok
• koa
• supervisor

你們能夠關注個人公衆號，一塊兒玩耍。有技術乾貨也有扯淡亂談,回覆888還有乾貨領取

左手代碼右手磚，拋磚引玉

不說了，吃雞去了???