使用 node.js 生成不限制的微信小程序码

于 2024-08-16 11:35:52 发布
阅读量948 收藏 15
点赞数 26
分类专栏： node 文章标签： node.js 微信小程序 小程序 express 前端 后端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44248187/article/details/141255445
版权

使用 node.js 的web框架 express.js 生成不限制的微信小程序码

在 Node.js 中生成微信小程序码通常涉及到与微信官方 API 的交互。微信提供了生成小程序码的接口，这些码可以用于打开特定的小程序页面或者带有参数的页面。以下是一个简单的步骤指南和示例代码来说明如何使用 Node.js 生成微信小程序码。

准备工作

1、注册并创建小程序：

  • 在微信公众平台注册并创建一个小程序。
  • 获取 AppID 和 AppSecret。

2、安装依赖：

  • 安装 express 或其他 Node.js web 框架来做后端服务。
  • 安装 axios 或其他 HTTP 库来发送请求。
  • 安装 cors 用于处理跨域请求。

步骤：

  • 获取 Access Token：通过调用微信的 API 接口获取 Access Token 接口说明。
  • 生成小程序码：使用 Access Token 调用生成小程序码的接口 接口说明。

示例代码

首先确保安装了必要的 npm 包:

npm install express axios cors

1、获取 Access Token

/**
 * 获取 Access Token
 * @param {string} appid 小程序appid
 * @param {string} secret 小程序secret
 * @returns access_token 
 */
async function getAccessToken(appid, secret) {
  // 获取接口调用凭据 接口英文名叫getAccessToken
  // 官方说明地址：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.htm
  const url = `https://api.weixin.qq.com/cgi-bin/token`;

  const response = await axios({
    method: "get",
    url,
    params: {
      grant_type: 'client_credential',
      appid,
      secret,
    },
  });

  if (response.data?.errcode) {
    throw new Error(JSON.stringify(response.data))
  }

  return response.data.access_token;
}

2、生成小程序码

/**
 * 生成小程序码
 * @param {String} access_token access_token
 * @param {Object} data 全部参数请查看：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html#%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0
 * @returns 图片 Buffer
 */
async function generateWxaCodeUnlimited(access_token, data) {
  // 获取不限制的小程序码 接口英文名 getUnlimitedQRCode
  // 官方说明地址：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html
  const url = `https://api.weixin.qq.com/wxa/getwxacodeunlimit`;

  const response = await axios({
    method: "post",
    url,
    data,
    params: {
      access_token,
    },
    responseType: "arraybuffer",
  });

  if (response.data?.errcode) {
    throw new Error(JSON.stringify(response.data))
  }

  return response.data
}

3、将 buffer 转换为文件

/**
 * 将buffer转换为文件
 * @param {Buffer} buffer buffer
 * @param {String} savePath 要保存的路径
 * @param {String} filename 文件名称
 * @returns 返回保存的文件路径
 */
async function bufferToFile(buffer, savePath, filename) {
  // 写入文件
  fs.writeFile(`.${savePath + filename}`, buffer, (err) => {
    if (err) {
      throw new Error(err);
    }
  });

  console.log('Image saved successfully', `Image saved as ${savePath + filename}`);

  return savePath + filename
}

4、将 buffer 转换为 Base64

/**
 * 将 buffer 转换为 Base64
 * @param {Buffer} buffer buffer
 * @returns 
 */
function bufferToBase64(buffer) {
  const base64 = `data:image/jpeg;base64,${buffer.toString('base64')}`
  return base64
}

5、设置路由处理函数，用于生成小程序码


// 设置路由处理函数，用于生成小程序码
app.get('/getCode', async (req, res) => {
  // 打印请求查询参数
  console.log('req', req.query);

  // 替换为你的场景值
  const { scene = 'your_scene' } = req.query

  // 获取 Access Token
  const access_token = await getAccessToken(wxConfig.appid, wxConfig.secret);

  // 生成小程序码
  const buffer = await generateWxaCodeUnlimited(access_token, { ...req.query, scene });

  // 将buffer转换为文件
  const fileUrl = await bufferToFile(buffer, '/public/', `wxa_code_unlimited_${scene}.png`);

  // 将 buffer 转换为 Base64 字符串
  const base64 = bufferToBase64(buffer);

  res.send({// 响应结果
    path: `http://${req.hostname}:${port}${fileUrl}`, // 返回图片的路径
    base64: base64, // 返回 Base64 字符串
  }).json();
})

6、请求接口测试

$ # GET to /getCode
$ curl "http://localhost:3000/getCode?scene=864910436"
$ # result -> {
  #  "path":"http://localhost:3000/public/wxa_code_unlimited_864910436.png",
  #  "base64":"data:image/jpeg;base64,eyJlcnJjb03N2NhNGUzNyJ9"
  # }

7、前端小程序测试

  • 打开 请求到的数据 path 或者 base64 的值后即可看到生成出来的小程序码

在这里插入图片描述

  • 使用小程序使用 wx.scanCode() api 扫描生成的小程序码
// pages/test.js
// 官方说明地址 https://developers.weixin.qq.com/miniprogram/dev/api/device/scan/wx.scanCode.html
wx.scanCode({
  success (res) {
    console.log(res)

    // 扫码成功返回的结果为：
    // res {
    //   "charSet": "utf-8", 
    //   "result": "", 
    //   "path": "pages/index?scene=864910436", 
    //   "codeVersion": 0, 
    //   "errMsg": "scanCode:ok", 
    //   "rawData": "bDJQQjlPekJtKkt2UGtYJGlYJiFrYzM2", 
    //   "scanType": "WX_CODE"
    // }

    wx.navigateTo({
      url: res.path,
    })
  }
})


// pages/index.js
Page({
  onLoad (query) {
    // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
    const scene = decodeURIComponent(query.scene)
    console.log(scene) // 864910436
  }
})

完整代码

// index.js
const express = require('express'); // 导入 Express 模块
const cors = require('cors'); // 导入 CORS 模块，用于处理跨域请求
const axios = require('axios'); // 导入 Axios 模块，用于发起 HTTP 请求
const fs = require("fs"); // 导入 Node.js 的 fs 模块，用于文件系统操作

const app = express(); // 创建 Express 应用实例

app.use(cors()); // 使用 CORS 中间件解决跨越请求

const port = 3000; // 设置应用监听的端口号

// 配置静态文件服务，使得/public路径下的文件可以直接访问，如果没有请手动创建
app.use('/public', express.static('public')); 

const wxConfig = {// 微信小程序配置信息
  appid: 'your_appid',// 替换为你的 AppID
  secret: 'your_secret',// 替换为你的 AppSecret
}

// 设置路由处理函数，用于生成小程序码
app.get('/getCode', async (req, res) => {
  console.log('req', req.query); // 打印请求查询参数

  // 替换为你的场景值
  const { scene = 'your_scene' } = req.query

  // 获取 Access Token
  const access_token = await getAccessToken(wxConfig.appid, wxConfig.secret);

  // 生成小程序码
  const buffer = await generateWxaCodeUnlimited(access_token, { ...req.query, scene });

  // 将buffer转换为文件
  const fileUrl = await bufferToFile(buffer, '/public/', `wxa_code_unlimited_${scene}.png`);

  // 将 buffer 转换为 Base64 字符串
  const base64 = bufferToBase64(buffer);

  res.send({// 响应结果
    path: `http://${req.hostname}:${port}${fileUrl}`, // 返回图片的路径
    base64: base64, // 返回 Base64 字符串
  }).json();
})

/**
 * 获取 Access Token
 * @param {string} appid 小程序appid
 * @param {string} secret 小程序secret
 * @returns access_token 
 */
async function getAccessToken(appid, secret) {
  // 获取接口调用凭据 接口英文名叫getAccessToken
  // 官方说明地址：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.htm
  const url = `https://api.weixin.qq.com/cgi-bin/token`;

  const response = await axios({
    method: "get",
    url,
    params: {
      grant_type: 'client_credential',
      appid,
      secret,
    },
  });

  if (response.data?.errcode) {
    throw new Error(JSON.stringify(response.data))
  }

  return response.data.access_token;
}

/**
 * 生成小程序码
 * @param {String} access_token access_token
 * @param {Object} data 全部参数请查看：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html#%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0
 * @returns 图片 Buffer
 */
async function generateWxaCodeUnlimited(access_token, data) {
  // 获取不限制的小程序码 接口英文名 getUnlimitedQRCode
  // 官方说明地址：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html
  const url = `https://api.weixin.qq.com/wxa/getwxacodeunlimit`;

  const response = await axios({
    method: "post",
    url,
    data,
    params: {
      access_token,
    },
    responseType: "arraybuffer",
  });

  if (response.data?.errcode) {
    throw new Error(JSON.stringify(response.data))
  }

  return response.data
}

/**
 * 将 buffer 转换为文件
 * @param {Buffer} buffer buffer
 * @param {String} savePath 要保存的路径
 * @param {String} filename 文件名称
 * @returns 返回保存的文件路径
 */
async function bufferToFile(buffer, savePath, filename) {
  // 写入文件
  fs.writeFile(`.${savePath + filename}`, buffer, (err) => {
    if (err) {
      throw new Error(err);
    }
  });

  console.log('Image saved successfully', `Image saved as ${savePath + filename}`);

  return savePath + filename
}

/**
 * 将 buffer 转换为 Base64
 * @param {Buffer} buffer buffer
 * @returns 
 */
function bufferToBase64(buffer) {
  const base64 = `data:image/jpeg;base64,${buffer.toString('base64')}`
  return base64
}

// 监听端口
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`, `is open url http://127.0.0.1:${port}`)
})

注意事项

替换 your_appid, your_secret 为你的实际值。
以上就是使用 Node.js 生成不限制数量的微信小程序码的过程。你可以根据具体需求调整参数和处理逻辑。

China-quanda
关注
专栏目录
nodejs 生成微信小程序码（葵花码）二进制流转base64
xiaoxiongxia的博客
01-25 1108
nodejs 生成微信小程序码（葵花码），二进制流转base64
wxqrcode.js 微信小程序二维码生成
05-24
微信小程序前端生成二维码直接显示，详情https://blog.csdn.net/qq_27721169/article/details/80435699
nodejs实现微信小程序
LUANGhuan110的博客
09-20 1720
nodejs实现微信小程序登陆
微信小程序+Nodejs项目实战合集
04-03
微信小程序+Nodejs项目实战合集 内含两套完整实战教你全为了解一个小程序的开发流程及步骤
nodejs实现小程序码生成
fz250052的博客
05-20 3881
        这是作者第一次做小程序也是第一次用nodejs，一下有写的不好的地方请前辈们指出，谢谢。之前小编开始做小程序码的时候发现资料有点少，所以在这里分享一下自己的实现方式。 一、  先说一下小程序码的作用，就是用户可以通过微信扫描小程序码进入小程序的特定页面，比如某件商品或者某个人的主页。小程序码生成时可以携带参数，我们可以在小程序码跳转的页面接收参数进行相应的操作。二、简单说一下小程序...
小程序码生成
05-20
利用nodejs实现accesstoken获取以及校验更新,生成微信小程序码及保存到指定路径。
微信小程序开发附源码：使用node.js实现微信小程序实时聊天功能.doc
05-18
在本案例中，开发者选择使用 Node.js 来搭建服务端，以支持微信小程序的聊天功能。以下是关于这一主题的详细解释： 首先，Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许开发者在服务器端使用 ...
使用node.js实现微信小程序实时聊天功能
10-18
本文将详细介绍如何使用Node.js搭建服务，为微信小程序提供实时聊天功能。 首先，确保你已安装Node.js。你可以从其官方网站下载最新版本的安装包，按照向导进行安装。安装完成后，通过在命令行输入`node -v`来检查...
node.js毕业设计基于微信小程序的白噪音系统（源码+程序+LW+部署）
node-php毕设程序源码
01-05 266
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：。项目技术：Express框架 + Node.js+ Vue 等等组成，B/S模式 +Vscode管理+前后端分离等等。环境需要1.运行环境：最好是Nodejs最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发环境：Vscode或HbuilderX都可以。推荐HbuilderX;3.mysql环境：建议是用5.7版本均可4.硬件环境：windows 7/8/10 1G内存以上。
【前端】Vue项目和微信小程序生成二维码和条形码
最新发布
共同学习，共同成长
06-26 1万+
大家好，我是码喽的自我修养！今天给大家分享Vue项目和微信小程序如何生成二维码和条形码，介绍了JsBarcode、wxbarcode等插件，并提供具体代码帮助大家深入理解，彻底掌握！
微信小程序node.js框架
01-24
微信小程序node.js框架.下载之后需要按照官方文档进行调配即可看到效果
基于qrcodejs的微信小程序二维码生成库
08-10
基于qrcodejs的微信小程序二维码生成库
nodeJsWxminiprogramCode:nodeJs获取小程序页面二维码
05-28
简单说明 小程序中用到了扫描二维码打开指定的小程序页面功能，微信提供了指定页面的二维码生成借口，但是返回的不是二维码的网络地址，需要服务端转存一下;用node搞了一下 接口需要用access_token来请求，请求access_token涉及到appid,secret就没贴出来；用下面的接口获取access_token，GET请求;懒得写代码的直接扔到浏览器获取即可； https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
微信小程序茶叶商城（含后端）示列源码, 微信小程序 茶叶商城 示列源码 后台node.js
06-13
微信小程序茶叶商城示例源码是一个综合性的项目，包含了前端的微信小程序开发和后端的Node.js服务端实现。这个项目旨在提供一个完整的电子商务平台，用于茶叶的在线销售和管理。接下来，我们将深入探讨其中涉及的...
JS生成二维码生成-微信小程序
炙风的博客
06-18 1221
制作了一个微信程序，只有简单的页面，记录下 由于只有一个页面，所以很简单，仅供像我一样的初学者参考下 1，获取文本框的内容通过GET传值到服务器，服务器生成二维码之后返回二维码图片的URL 2，小程序在收到返回的数据后修改首页图片的URL实现二维码的显示 效果如图所示 1，index.wxml部分 <view class="container"> <...
nodejs 获取微信小程序二维码
m0_56381003的博客
06-19 468
nodejs 获取微信小程序二维码 在使用nodejs获取微信小程序二维码的时候 总是无法转换为base64格式
微信小程序获取不限制的小程序码
2301_78513202的博客
06-04 681
微信小程序获取二维码，可以作为小程序的分享码
微信小程序的注册安装以及node.js的环境搭建
weixin_44855758的博客
08-01 2700
这里写自定义目录标题注册微信小程序账号创建HelloWorld微信小程序node.js环境搭建合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与...
使用node.js和WebSocket构建微信小程序实时聊天
"使用Node.js和WebSocket实现实时聊天功能于微信小程序中" 在微信小程序中集成聊天功能可能看似不寻常，但这是一项技术挑战。为了完成这个任务，我们需要理解两个核心概念：WebSocket和Node.js。WebSocket是一种在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值