介绍一下
微信公众号: 微信认证服务号才有权限,通过接口获取推广支持-生成带参数二维码,用户扫码后,微信推送事件消息给服务器
Koa: 是由 Express 团队设计的全新 Web 框架,旨在为 Web 应用程序和 API 构建一个更小、更具表现力、更强大的基础框架。通过利用异步函数,Koa 可以让你摆脱回调,并显著增强错误处理能力。Koa 的核心没有捆绑任何中间件,而是提供了一套优雅的方法,让编写服务器代码变得快速而有趣。
Cloud Studio(云端 IDE): 是基于浏览器的集成式开发环境,为开发者提供了一个稳定的云端工作站。支持CPU与GPU的访问。用户在使用 Cloud Studio 时无需安装,随时随地打开浏览器即可使用。
画个图,看一下大概流程
一、微信公众平台接口测试帐号申请
无需公众帐号、快速申请接口测试号,直接体验和测试公众平台所有高级接口
ruby
申请地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
二、Cloud Studio(云端 IDE)
使用云端 IDE,新建工作空间
arduino
https://ide.cloud.tencent.com/
三、创建 Koa 项目
- 初始化项目
bash
mkdir Wechat
cd Wechat
npm init -y
npm i nodemon -D
- 配置 package.json
swift
{
"name": "wechat",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon index.js",
"serve": "node index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"koa": "^2.16.1",
"koa-router": "^13.0.1"
},
"devDependencies": {
"nodemon": "^3.1.9"
}
}
- 安装 Koajs
css
npm i koa koa-router
- 创建 index.js 文件
ini
const Koa = require('koa');
const koaRouter = require("koa-router");
const router = new koaRouter();
const app = new Koa();
const port = 3000; // 监听端口
/**
* 接收消息服务器配置
*/
router.get("/wechat", (ctx) => {
const { signature, timestamp, nonce, echostr } = ctx.query;
const Token = 'Token';
console.log(ctx.query)
ctx.body = echostr;
});
app.use(router.routes());
/*
请求方式不匹配的时候,会报请求方式不被允许
*/
app.use(router.allowedMethods());
app.listen(port, () => {
console.log('server is running on ' + ' http://localhost:' + port)
})
- 运行项目
arduino
npm run dev
三、公众号配置接口信息
测试号管理,接口配置信息
arduino
url https://你的域名.com/wechat
Token Token

四、获取二维码
- 新建文件 service/index.js
javascript
const axios = require('axios');
const appID = ' '
const appsecret = ' '
// 创建一个 axios 实例
const weixinAxios = axios.create({
baseURL: 'https://api.weixin.qq.com/cgi-bin'
});
weixinAxios.defaults.headers.post['Content-Type'] = 'application/json';
/**
* 获取 access_token
* @returns
*/
const gettoken = async () => {
try {
const { data } = await weixinAxios.get('/token', {
params: {
grant_type: 'client_credential',
appid: appID,
secret: appsecret
}
});
return data;
} catch (error) {
console.error(error);
}
}
/**
* 获取二维码
* @returns
*/
const createQrcode = async (scene_id, access_token) => {
try {
const { data } = await weixinAxios.post('/qrcode/create?access_token=' + access_token, {
expire_seconds: 604800,
action_name: 'QR_SCENE',
action_info: {
scene: {
scene_id: '12345678'
}
}
});
console.log(data);
return data;
} catch (error) {
console.error(error);
}
}
/**
* 获取 getUserInfo
* @returns
*/
const getUserInfo = async (openid,access_token) => {
try {
const { data } = await weixinAxios.get('/user/info', {
params: {
access_token,
openid,
lang: 'zh_CN'
}
});
console.log(data);
return data;
} catch (error) {
console.error(error);
}
}
module.exports = {
createQrcode, gettoken,getUserInfo
}
- 编写 index.js 文件
javascript
/**
* 生成带参数的二维码
*/
router.get("/wechat/token", async (ctx) => {
try {
const resultToken = await gettoken();
const resultTicket = await createQrcode('123456', resultToken.access_token)
console.log('resultTicket', resultTicket)
let qrcodeUrl = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${resultTicket.ticket}`
let result = `<image src='${qrcodeUrl}'/>`
ctx.body = result;
} catch (error) {
console.log(error)
}
});
- 安装 axios
css
npm i axios
- 通过ticket换取二维码
获取二维码ticket后,开发者可用ticket换取二维码图片。请注意,本接口无须登录态即可调用。 HTTP GET请求(请使用https协议)
ini
https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET
提醒:TICKET记得进行UrlEncode
- 文档地址
ruby
https://mp.weixin.qq.com/debug
https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html
五、接受微信推送事件
- 安装依赖
css
npm i raw-body xml2js
- 编写index.js 文件
ini
const Koa = require('koa');
const koaRouter = require("koa-router");
const { gettoken, createQrcode, getUserInfo } = require('./service/index')
const getRawBody = require('raw-body')
const xml2js = require('xml2js');
const parser = new xml2js.Parser();
const router = new koaRouter();
const app = new Koa();
const port = 3000; // 监听端口
/**
* 接收消息服务器配置
*/
router.get("/wechat", (ctx) => {
const { signature, timestamp, nonce, echostr } = ctx.query;
const Token = 'kdsacn';
console.log(ctx.query)
ctx.body = echostr;
});
/**
* 接收微信推送 post 请求处理
*/
router.post("/wechat", async (ctx) => {
console.log("----------------接受微信推送 post 请求处理 start ------------------------");
//const { xmlData } = ctx.req.body
console.log(ctx.req)
// 解析 xml 的字符串内容
let wholeXML = await getRawBody(ctx.req, {
length: ctx.req.headers['content-length'],
limit: '1mb',
encoding: 'utf-8'
});
// 将 xml 解析成 json
const formatJson = await parser.parseStringPromise(wholeXML);
console.log(formatJson)
let FromUserName = formatJson.xml.FromUserName[0];
if(FromUserName){
const resultToken = await gettoken();
const userInfo = await getUserInfo(FromUserName,resultToken.access_token)
console.log('userInfo',userInfo)
}
ctx.body = 'ok';
});
/**
* 生成带参数的二维码
*/
router.get("/wechat/token", async (ctx) => {
try {
const resultToken = await gettoken();
const resultTicket = await createQrcode('123456', resultToken.access_token)
console.log('resultTicket', resultTicket)
let qrcodeUrl = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${resultTicket.ticket}`
let result = `<image src='${qrcodeUrl}'/>`
ctx.body = result;
} catch (error) {
console.log(error)
}
});
app.use(router.routes());
/*
请求方式不匹配的时候,会报请求方式不被允许
*/
app.use(router.allowedMethods());
app.listen(port, () => {
console.log('server is running on ' + ' http://localhost:' + port)
})
- 接收事件推送文档
ruby
https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Receiving_event_pushes.html