Koa2微信公眾號開發(fā)之本地開發(fā)調(diào)試環(huán)境搭建
最近沉迷吃雞不能自拔,好久沒更新文章了。后續(xù)將陸續(xù)完善《Koa2微信公眾號開發(fā)》。
一、簡介
關(guān)于微信公眾號的介紹就省略了,自行搜索。注冊過程也不說了。我們會直接注冊測試號來實現(xiàn)代碼。這將會是個全面講解微信公眾號開發(fā)的系列教程。本篇是該系列的第一篇,本地開發(fā)環(huán)境搭建以及接入微信。
在開始之前最好去看看開發(fā)者文檔微信公眾平臺技術(shù)文檔
二、本地開發(fā)調(diào)試環(huán)境搭建
2.1 開發(fā)環(huán)境
- MacOs
- Node v8.9.1
- Koa2
2.2 微信公眾平臺開發(fā)的基本原理
我們先來看看微信公眾平臺開發(fā)的基本原理:在進行微信開發(fā)的時候,需要在我們在自己的服務(wù)器上部署服務(wù)對微信消息進行處理。微信服務(wù)器就相當于一個轉(zhuǎn)發(fā)服務(wù)器。終端(手機、Pad等)發(fā)起請求至微信服務(wù)器,微信服務(wù)器然后將請求轉(zhuǎn)發(fā)給自定義服務(wù)(這里就是我們的具體實現(xiàn))。服務(wù)處理完畢,然后轉(zhuǎn)發(fā)給微信服務(wù)器,微信服務(wù)器再將具體響應(yīng)回復(fù)到終端,通信協(xié)議為:HTTP;數(shù)據(jù)格式為:XML。

我們的服務(wù)需要做的就是對請求做出響應(yīng),解析XML,進行相應(yīng)的處理后再返回特定的XML。
2.3 ngrok微信本地開發(fā)
這兒我們了解到了接入微信開發(fā)需要一個自己的響應(yīng)服務(wù)器,我們可以購買服務(wù)器或者新浪云百度云之類的服務(wù)。但是在我們開發(fā)階段這樣做是很麻煩的,我們需要搭建一個好用的本地調(diào)試環(huán)境,將內(nèi)網(wǎng)映射出去,讓外網(wǎng)能夠訪問的。
這兒推薦使用Ngrok服務(wù)。win、mac都能方便使用,而且穩(wěn)定,外網(wǎng)域名是固定的。
打開它的網(wǎng)站www.ngrok.cc/注冊登錄然后開通隧道。同時你需要下載相應(yīng)的客戶端
在win中這是個批處理文件,運行它然后填入相應(yīng)的隧道id回車即可,在Mac中命令行執(zhí)行如下命令。
./sunny clientid 隧道id
運行成功會返回ngrok換發(fā)域名。

更多參見ngrok官網(wǎng)教程
到此,我們來讓node服務(wù)跑起來,并通過ngrok的域名外網(wǎng)訪問
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,將服務(wù)跑起來,瀏覽器打開localhost:7001我們將能夠看見返回了JavaScript之禪。這兒推薦使用supervisor,它會監(jiān)視你對代碼的改動,并自動重動 Node
npm install -g supervisor supervisor app.js
接下來就是用前面講的ngrok進行內(nèi)網(wǎng)轉(zhuǎn)發(fā)了
./sunny clientid 隧道id
如果不出問題,你打開你的轉(zhuǎn)發(fā)域名http://**.free.ngrok.cc也將看見JavaScript之禪
三、接入微信公眾平臺開發(fā)
3.1 接入流程
接入微信公眾平臺開發(fā),開發(fā)者需要按照如下步驟完成:
1、填寫服務(wù)器配置
2、驗證服務(wù)器地址的有效性
3、依據(jù)接口文檔實現(xiàn)業(yè)務(wù)邏輯
我們登錄微信公眾平臺接口測試帳號https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login,登錄后填寫接口配置信息*(你的url地址以及token)*,這時肯定不能配置成功的。我們需要驗證服務(wù)器地址的有效性,開發(fā)者提交信息后,微信服務(wù)器將發(fā)送GET請求到填寫的服務(wù)器地址URL上,GET請求攜帶參數(shù)如下表所示:
| 參數(shù) | 描述 |
|---|---|
| signature | 微信加密簽名,signature結(jié)合了開發(fā)者填寫的token參數(shù)和請求中的timestamp參數(shù)、nonce參數(shù)。 |
| timestamp | 時間戳 |
| nonce | 隨機數(shù) |
| echostr | 隨機字符串 |
開發(fā)者通過檢驗signature對請求進行校驗。若確認此次GET請求來自微信服務(wù)器,原樣返回echostr參數(shù)內(nèi)容,則接入生效,成為開發(fā)者成功,否則接入失敗。加密/校驗流程如下:
- 將token、timestamp、nonce三個參數(shù)進行字典序排序
- 將三個參數(shù)字符串拼接成一個字符串進行sha1加密
- 開發(fā)者獲得加密后的字符串可與signature對比,標識該請求來源于微信
Talk is cheap. Show me the code
3.2 koa2驗證服務(wù)器地址的有效性
修改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)
進入測試號的頁面重新提交接口配置信息,你將會看見一個一閃而過的配置成功過提示框。恭喜,這標志著你正式跳進了微信開發(fā)的坑了。
本篇文章到此結(jié)束,下一節(jié)將講解公眾號的消息回復(fù)功能
參考鏈接
微信公眾平臺開發(fā)者文檔
公眾號測試號
Ngrok
koa
supervisor
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
node.js利用redis數(shù)據(jù)庫緩存數(shù)據(jù)的方法
Redis數(shù)據(jù)庫采用極簡的設(shè)計思想,最新版的源碼包還不到2Mb。其在使用上也有別于一般的數(shù)據(jù)庫。下面這篇文章就來給大家介紹了node.js利用redis數(shù)據(jù)庫緩存數(shù)據(jù)的方法,需要的朋友可以參考借鑒,下面來一起看看吧。2017-03-03
解決koa2 ctx.render is not a function報錯問題
這篇文章主要介紹了解決koa2 ctx.render is not a function報錯問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
如何正確使用Nodejs 的 c++ module 鏈接到 OpenSSL
這篇文章主要介紹了如何正確使用Nodejs 的 c++ module 鏈接到 OpenSSL,需要的朋友可以參考下2014-08-08
在Linux上用forever實現(xiàn)Node.js項目自啟動
在一臺計算機上手動跑Node項目簡單,node xx.js就搞定了,想讓Node項目后臺運行,雖然不能直接用node命令搞定,但是在安裝了forever這個包以后,還是很輕松的。不過要是在遠程服務(wù)器上構(gòu)建Node項目,如果沒法自啟動,一旦服務(wù)器重啟,那就麻煩了。2014-07-07
node.js中的http.response.removeHeader方法使用說明
這篇文章主要介紹了node.js中的http.response.removeHeader方法使用說明,本文介紹了http.response.removeHeader的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12
node.js中的fs.appendFileSync方法使用說明
這篇文章主要介紹了node.js中的fs.appendFileSync方法使用說明,本文介紹了fs.appendFileSync方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下2014-12-12

