> 技术文档 > 【实战教程】微信小程序生成方形二维码可自定义页面(附完整代码)_微信小程序二维码

【实战教程】微信小程序生成方形二维码可自定义页面(附完整代码)_微信小程序二维码

很多开发者在使用微信小程序码时,发现官方默认生成的是圆形带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,应该是一个黑白方形二维码!

如果仍有问题,欢迎在评论区留言!