这篇文章简单介绍了基于node包wechat和wechat-api进行微信公众号开发和基于内网穿透技术的本机调试,想要了解如何用nodejs从头开发微信公众号的童鞋请戳这篇文章。 wechat和wechat-api区别在它们github上也描述得很清楚,前者是微信的消息接口的中间件,负责一些消息交互,而后者提供了微信平台上的更多api,其中的JS-SDK的支持比较常用,稍后会介绍。
一、登录测试号
既然要开发微信公众号,那么得有公众号才行,开发期间不必申请正式的公众号,微信提供了测试账号。
二、消息中间件配置
wechat的具体用法很简单,看文档即可,这里主要介绍对应的接口配置信息图和填写:
这里的URL必须是微信平台能够访问到的,也就是必须是一个公网地址,即便有公网服务器,代码已有改动就要上传至服务器,也很是繁琐,所以此时就可以用内网穿透技术将一个公网地址映射到本机地址,内网穿透的方法有很多,也有很多现成的软件提供支持,比如花生壳、ngrok,我这里介绍的是ngrok,ngrok安装好后,运行ngrok http 本地端口号即可完成映射:
此时将对应的地址和token填入配置里提交即可:
Tip: 也可以用国内的ngrok服务,比如sunny-ngrok
三、API中间件配置
这里需要配置两个地方,JS接口安全域名和网页服务里的网页账号的修改,地址都是前端访问的地址,然后后端需要提供一个接口供前端验证,这个具体看微信JSSDK文档和中间件的getJsConfig方法,然后调试需要用到微信开发者工具,也可以在线校验合法性,以Koa为例,提供验证接口的代码如下:
const WechatAPI = require('co-wechat-api');
const Router = require('koa-router');
const router = new Router();
const appid = 'wxfde88c18aee20f23';
const appsecret = '021c91f5b0f0a9a08ac1583425240f00';
const wxapi = new WechatAPI(appid, appsecret);
router.get('/getSignature', async (ctx) => {
const res = await wxapi.getJsConfig({
url: ctx.request.header.referer,
});
ctx.body = {
code: 0,
data: res,
};
});
在pc端开发完前端之后,需要在手机上进行测试,第一步当然是需要设置公众号的一个菜单,具体看createMenu这个方法,准备一个js文件专门用于菜单的更新,每次更新的时候,运行一下这个文件即可,代码如下:
const WechatAPI = require('co-wechat-api');
const appid = 'wxfde88c18aee20f23';
const appsecret = '021c91f5b0f0a9a08ac1583425240f00';
const wxapi = new WechatAPI(appid, appsecret);
const menuConfig = {
"button":[
{
"type":"click",
"name":"今日歌曲",
"key":"V1001_TODAY_MUSIC"
},
{
"name":"菜单",
"sub_button":[
{
"type":"view",
"name":"搜索",
"url":"http://www.soso.com/"
},
{
"type":"click",
"name":"赞一下我们",
"key":"V1001_GOOD"
}]
}]
}
]
};
wxapi.createMenu(menuConfig).then((res) => {
console.log(res);
});
至于手机如何访问电脑上的地址,就很简单了,将手机与电脑置于同一网络当中,利用一些代理工具比如charles进行代理就行了。