微信公众号扫码登入

介绍一下

微信公众号: 微信认证服务号才有权限,通过接口获取推广支持-生成带参数二维码,用户扫码后,微信推送事件消息给服务器

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 项目

  1. 初始化项目
bash 复制代码
mkdir Wechat
cd Wechat
npm init -y
npm i nodemon -D
  1. 配置 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"
  }
}
  1. 安装 Koajs
css 复制代码
npm i koa koa-router
  1. 创建 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)
})
  1. 运行项目
arduino 复制代码
npm run  dev

三、公众号配置接口信息

测试号管理,接口配置信息

arduino 复制代码
url    https://你的域名.com/wechat
Token  Token

四、获取二维码

  1. 新建文件 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
}
  1. 编写 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)
    }
});
  1. 安装 axios
css 复制代码
npm i axios
  1. 通过ticket换取二维码

获取二维码ticket后,开发者可用ticket换取二维码图片。请注意,本接口无须登录态即可调用。 HTTP GET请求(请使用https协议)

ini 复制代码
https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET 

提醒:TICKET记得进行UrlEncode

  1. 文档地址
ruby 复制代码
https://mp.weixin.qq.com/debug

https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html

五、接受微信推送事件

  1. 安装依赖
css 复制代码
npm i raw-body xml2js
  1. 编写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)
})
  1. 接收事件推送文档
ruby 复制代码
https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Receiving_event_pushes.html
相关推荐
前端大卫7 分钟前
Vue3 + Element-Plus 自定义虚拟表格滚动实现方案【附源码】
前端
却尘23 分钟前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
ccnocare24 分钟前
浅浅看一下设计模式
前端
Lee川27 分钟前
🎬 从标签到屏幕:揭秘现代网页构建与适配之道
前端·面试
Ticnix1 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人1 小时前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl1 小时前
OpenClaw 深度技术解析
前端
崔庆才丨静觅1 小时前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人1 小时前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼1 小时前
shadcn/ui,给你一个真正可控的UI组件库
前端