资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Koa2微信公众号开发(一) 本地开发调试环境搭建

Koa2微信公众号开发(一) 本地开发调试环境搭建

snifes / 1141人阅读

摘要：本篇是该系列的第一篇，本地开发环境搭建以及接入微信。若确认此次请求来自微信服务器，原样返回参数内容，则接入生效，成为开发者成功，否则接入失败。

一、简介

关于微信公众号的介绍就省略了，自行搜索。注册过程也不说了。我们会直接注册测试号来实现代码。这将会是个全面讲解微信公众号开发的系列教程。本篇是该系列的第一篇，本地开发环境搭建以及接入微信。
在开始之前最好去看看开发者文档微信公众平台技术文档

二、本地开发调试环境搭建 2.1 开发环境 
</>复制代码 
  1. - MacOs
  2. - Node v8.9.1
  3. - Koa2
2.2 微信公众平台开发的基本原理

我们先来看看微信公众平台开发的基本原理：在进行微信开发的时候,需要在我们在自己的服务器上部署服务对微信消息进行处理。微信服务器就相当于一个转发服务器。终端（手机、Pad等）发起请求至微信服务器，微信服务器然后将请求转发给自定义服务（这里就是我们的具体实现）。服务处理完毕，然后转发给微信服务器，微信服务器再将具体响应回复到终端，通信协议为：HTTP；数据格式为：XML。


我们的服务需要做的就是对请求做出响应，解析XML,进行相应的处理后再返回特定的XML。

2.3 ngrok微信本地开发

这儿我们了解到了接入微信开发需要一个自己的响应服务器，我们可以购买服务器或者新浪云百度云之类的服务。但是在我们开发阶段这样做是很麻烦的，我们需要搭建一个好用的本地调试环境，将内网映射出去，让外网能够访问的。
这儿推荐使用Ngrok服务。win、mac都能方便使用，而且稳定，外网域名是固定的。

打开它的网站https://www.ngrok.cc/注册登录然后开通隧道。同时你需要下载相应的客户端
在win中这是个批处理文件，运行它然后填入相应的隧道id回车即可，在Mac中命令行执行如下命令。

</>复制代码 
  1. ./sunny clientid 隧道id

运行成功会返回ngrok换发域名。


更多参见ngrok官网教程

到此，我们来让node服务跑起来，并通过ngrok的域名外网访问

</>复制代码 
  1. mkdir koa2-wechat && cd koa2-wechat
  2. npm install koa --save

新建app.js

</>复制代码 
  1. const Koa = require("koa")
  2. const app = new Koa()
  3. app.use(async ctx => {
  4.   ctx.body = "JavaScript之禅"
  5. });
  6. app.listen(7001);

我们运行app.js，将服务跑起来，浏览器打开localhost:7001我们将能够看见返回了JavaScript之禅。这儿推荐使用supervisor，它会监视你对代码的改动,并自动重动 Node

</>复制代码 
  1. npm install -g supervisor
  2. supervisor app.js

接下来就是用前面讲的ngrok进行内网转发了

</>复制代码 
  1. ./sunny clientid 隧道id

如果不出问题，你打开你的转发域名http://.free.ngrok.cc也将看见JavaScript之禅

三、接入微信公众平台开发 3.1 接入流程

接入微信公众平台开发，开发者需要按照如下步骤完成：

1、填写服务器配置

2、验证服务器地址的有效性

3、依据接口文档实现业务逻辑

我们登录微信公众平台接口测试帐号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参数内容，则接入生效，成为开发者成功，否则接入失败。加密/校验流程如下：

将token、timestamp、nonce三个参数进行字典序排序

将三个参数字符串拼接成一个字符串进行sha1加密

开发者获得加密后的字符串可与signature对比，标识该请求来源于微信

Talk is cheap. Show me the code

3.2 koa2验证服务器地址的有效性

修改app.js

</>复制代码 
  1. const Koa = require("koa")
  2. const app = new Koa()
  3. // 引入node加密模块进行sha1加密
  4. const crypto = require("crypto")
  5. const config = {
  6.   wechat: {
  7.     appID: "appID",
  8.     appsecret: "appsecret",
  9.     token: "zenofjavascript",
  10.   }
  11. }
  12. app.use(async ctx => {
  13.     const { signature, timestamp, nonce, echostr } = ctx.query  
  14.     const token = config.wechat.token
  15.     let hash = crypto.createHash("sha1")
  16.     const arr = [token, timestamp, nonce].sort()
  17.     hash.update(arr.join(""))
  18.     const shasum = hash.digest("hex")
  19.     if(shasum === signature){
  20.       return ctx.body = echostr
  21.     }
  22.     ctx.status = 401      
  23.     ctx.body = "Invalid signature"
  24. })
  25. app.listen(7001)

进入测试号的页面重新提交接口配置信息，你将会看见一个一闪而过的配置成功过提示框。恭喜，这标志着你正式跳进了微信开发的坑了。

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

本篇文章到此结束，下一节将讲解公众号的消息回复功能

参考链接

微信公众平台开发者文档

公众号测试号

Ngrok

koa

supervisor

大家可以关注我的公众号，一起玩耍。有技术干货也有扯淡乱谈,回复888还有干货领取

左手代码右手砖，抛砖引玉

不说了，吃鸡去了???

GPU云服务器 云服务器 微信公众号开发 微信公众号开发者模式 微信公众号服务器调试 公众号开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94485.html

相关文章

  • Koa2 + Mongo + 爬虫 搭建 小说微信小程序（本地开发篇）

    摘要：前言根据慕课网实现电影微信公众号前后端开发学习后的改造由于上下班期间会看会小说，但是无奈广告太多，还要收费，于是结合课程，进行开发，并上传到自己的微信小程序。 前言：根据慕课网 Koa2 实现电影微信公众号前后端开发 学习后的改造 由于上下班期间会看会小说，但是无奈广告太多，还要收费，于是结合课程，进行开发，并上传到自己的微信小程序。 showImg(https://segment...

    Kross 评论0 收藏0

  • ngrok+express解决本地环境中微信接口调试问题

    摘要：在微信项目的开发中，经常需要对微信提供的接口进行调试，比如说录音分享上传图像等接口，但是微信要求绑定安全域名才能使用其提供的一系列功能而在开发环境中使用或者本地无法完成域名的认证和绑定所以无法在本地调试。 在微信项目的开发中，经常需要对微信jssdk提供的接口进行调试，比如说录音, 分享 ,上传图像等接口，但是微信jssdk要求绑定安全域名才能使用其提供的一系列功能 , 而在开发环境中...

    luffyZh 评论0 收藏0

  • 搭建并使用前端代理服务器

    摘要：本文主要是从前端的角度，使用搭建一个简易的测试项目，在自己搭建的代理服务的下实现简单的微信分享。在微信测试工具中调试接口，点击发送即可会出现比较漂亮的分享链接。 一、背景简介： 目前流行的前后端分离项目，一般都处于不同的域名下，前后端开发过程中，是分别部署在不同服 务器上，在做接口联调时，会出现跨域的情况，部署上线时，基本不存在这种需要，因此搭建一个 前端代理服务，方便开发。 作为一个...

    lyning 评论0 收藏0

  • 搭建并使用前端代理服务器

    摘要：本文主要是从前端的角度，使用搭建一个简易的测试项目，在自己搭建的代理服务的下实现简单的微信分享。在微信测试工具中调试接口，点击发送即可会出现比较漂亮的分享链接。 一、背景简介： 目前流行的前后端分离项目，一般都处于不同的域名下，前后端开发过程中，是分别部署在不同服 务器上，在做接口联调时，会出现跨域的情况，部署上线时，基本不存在这种需要，因此搭建一个 前端代理服务，方便开发。 作为一个...

    jasperyang 评论0 收藏0

发表评论

登陆后可评论

0条评论

snifes

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<