【实战教程】微信小程序生成方形二维码可自定义页面(附完整代码)_微信小程序二维码
很多开发者在使用微信小程序码时,发现官方默认生成的是圆形带Logo的小程序码也可以生成方形但是只能是主页,没法自定义其他页面的方形二维码,但是在某些场景(如打印、黑白印刷、或者某个页面)下,可能需要传统的方形二维码。
今天,我们就来手把手教你如何通过微信官方API生成方形小程序二维码,并提供可直接运行的Node.js代码!
一、微信二维码接口的区别
微信提供了3种生成二维码的接口,但只有1种能生成方形二维码:
⚠️ 注意:getwxacode 即使设置 is_hyaline: false,仍然可能返回圆形码,所以推荐使用 createQRCode!
二、生成方形二维码(Node.js代码)
1. 准备工作
获取小程序的 AppID 和 AppSecret(在微信公众平台 → 开发 → 开发设置)。
安装 Node.js(官网下载)。
1.1验证是否成功安装
node -v # 查看 Node.js 版本npm -v # 查看 npm 版本
1.2安装依赖
npm init -y # 初始化项目(生成 package.json)npm install axios # 安装 axios 依赖
1.3在该文件夹中新建文件 generateQR.js,粘贴 下方完整代码。
2. 完整代码 javascript
const axios = require(\'axios\');const fs = require(\'fs\');// 配置参数(替换成你的小程序信息)const config = { appId: \'你的APPID\', // 小程序AppID appSecret: \'你的APPSECRET\', // 小程序AppSecret pagePath: \'pages/index/index?id=123\', // 扫码进入的页面(可带参数) outputFile: \'square_qrcode.png\' // 输出文件名};// 生成方形二维码async function generateSquareQRCode() { try { // 1. 获取Access Token const tokenUrl = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appId}&secret=${config.appSecret}`; const tokenRes = await axios.get(tokenUrl); const accessToken = tokenRes.data.access_token; // 2. 调用微信接口(createQRCode生成方形码) const apiUrl = `https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=${accessToken}`; const qrRes = await axios({ method: \'post\', url: apiUrl, data: { path: config.pagePath, // 页面路径 width: 430 // 二维码宽度(默认430px) }, responseType: \'arraybuffer\' // 关键!接收二进制图片 }); // 3. 保存二维码 fs.writeFileSync(config.outputFile, qrRes.data); console.log(\'✅ 方形二维码已生成:\', config.outputFile); } catch (error) { console.error(\'❌ 生成失败:\', error.message); if (error.response) { console.error(\'微信接口返回错误:\', error.response.data); } }}// 执行生成generateSquareQRCode();
3. 运行代码
安装依赖(在项目目录运行):
npm install axios
4.执行脚本:
node generateQR.js //你的JS文件名
查看生成的 square_qrcode.png,应该是一个黑白方形二维码!
如果仍有问题,欢迎在评论区留言!