当然可以，下面是一个完整的【实战教程】，介绍如何在微信小程序中生成 可自定义跳转页面的方形二维码，并附带完整的代码结构、使用说明和测试指南。适合用于生成分享页、产品页、邀请页等用途。

🧪【实战教程】微信小程序生成方形二维码（可自定义跳转页面）

🧩 实现目标

  • ✅ 生成方形样式的小程序二维码（非圆角）
  • ✅ 支持跳转到自定义路径（如 pages/product?id=123）
  • ✅ 可保存二维码图片到手机
  • ✅ 附完整后端（Node.js）+ 小程序前端代码

🧰 技术准备

  • 小程序端（前端）：微信小程序原生框架
  • 后端（API 服务）：Node.js + Express（或 PHP/Java/Python）
  • 微信开放能力：使用 wxacode.getUnlimited 接口

📦 后端接口代码（Node.js 示例）

创建一个 getQRCode.js 文件：

const express = require('express');
const request = require('request');
const fs = require('fs');
const router = express.Router();

const appid = '你的AppID';
const secret = '你的AppSecret';

router.get('/getQrcode', async (req, res) => {
  const scene = req.query.scene || 'id=123';
  const page = req.query.page || 'pages/index/index';

  // 获取access_token
  request({
    url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,
    method: 'GET',
    json: true
  }, (err, _, body) => {
    const token = body.access_token;

    // 获取二维码
    request({
      url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`,
      method: 'POST',
      encoding: null,
      json: true,
      body: {
        scene,
        page,
        width: 280,
        is_hyaline: false,  // 不透明背景
        auto_color: false,
        line_color: { r: 0, g: 0, b: 0 }
      }
    }, (err, _, buffer) => {
      res.set("Content-Type", "image/png");
      res.send(buffer);
    });
  });
});

module.exports = router;

在 app.js 中引入：

const express = require('express');
const app = express();
const qrRoute = require('./getQRCode');
app.use('/api', qrRoute);
app.listen(3000, () => console.log('服务已启动：http://localhost:3000'));

🧱 小程序前端代码

1. 页面结构（pages/qrcode/qrcode.wxml）

<view class="container">
  <image src="{{qrcode}}" mode="aspectFit" style="width:280rpx;height:280rpx" />
  <button bindtap="saveImage">保存到相册</button>
</view>

2. 逻辑处理（qrcode.js）

Page({
  data: {
    qrcode: ''
  },
  onLoad(options) {
    const scene = encodeURIComponent('id=123'); // 自定义参数
    const page = encodeURIComponent('pages/product/index');
    const url = `https://你的域名/api/getQrcode?scene=${scene}&page=${page}`;

    this.setData({ qrcode: url });
  },
  saveImage() {
    wx.downloadFile({
      url: this.data.qrcode,
      success: function (res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success() {
            wx.showToast({ title: '保存成功', icon: 'success' });
          }
        });
      }
    });
  }
});

3. 小程序配置

app.json 中配置页面路径

{
  "pages": [
    "pages/qrcode/qrcode",
    "pages/product/index"
  ]
}

后台服务器配置 CORS（跨域）响应头（开发阶段）

res.setHeader("Access-Control-Allow-Origin", "*");

📸 生成效果

  • 正方形二维码图片，大小 280×280 像素
  • 自动包含小程序码样式，无 logo
  • 可通过 scene 携带自定义参数
  • 可长按识别或扫码访问小程序内部页面

🚧 注意事项

  1. 后端必须在公网可访问域名（需备案），并在小程序后台设置为 request 合法域名
  2. 小程序必须上线或使用开发者工具内登录才支持二维码跳转
  3. 每个 scene 限制为 32 个可见字符以内
  4. wxacode.getUnlimited 的二维码不可以直接下载使用商用，需要遵守微信平台协议

📚 参考资料