当然可以！下面是一个完整的【实战教程】，教你如何在微信小程序中生成可自定义页面路径的方形二维码，并附带完整代码。
🧩 实现目标
通过调用微信小程序的云开发功能或使用微信官方API，生成一个跳转到指定页面的二维码，可将其展示或保存，样式为方形。
✅ 方法一：使用小程序码（推荐）
一、准备工作
- 开通小程序云开发
- 登录微信公众平台
- 开启“云开发”
- 创建一个云环境
- 获取 AppID 和 AppSecret
- 在“开发设置”中查看
二、云函数：生成小程序码
在 cloudfunctions 中创建一个云函数 getQRCode
1. getQRCode/index.js
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
const { page, scene } = event
try {
const res = await cloud.openapi.wxacode.getUnlimited({
scene, // 传参如：id=123
page, // 页面路径如：pages/detail/index
width: 430,
is_hyaline: false, // false 表示白底二维码
})
// 上传到云存储
const upload = await cloud.uploadFile({
cloudPath: `qrcodes/${Date.now()}.jpg`,
fileContent: res.buffer,
})
return {
fileID: upload.fileID
}
} catch (err) {
return {
errMsg: err.message
}
}
}
三、小程序前端调用云函数
1. 触发生成二维码
wx.cloud.callFunction({
name: 'getQRCode',
data: {
page: 'pages/detail/index', // 要跳转的页面
scene: 'id=123' // 参数（需 encodeURIComponent）
},
success: res => {
const fileID = res.result.fileID
wx.cloud.downloadFile({
fileID,
success: downloadRes => {
this.setData({
qrCodeImage: downloadRes.tempFilePath
})
}
})
}
})
2. WXML 显示二维码
<image src="{{qrCodeImage}}" mode="widthFix" style="width: 200px;" />
✅ 方法二：调用微信 API（服务器端）
适用于有后端服务器的项目：
- 使用
https://api.weixin.qq.com/wxa/getwxacodeunlimit - 携带参数：
access_token,scene,page,width, 等 - 返回图片（buffer）
但此方式需要你服务器管理 access_token，相对更复杂。
💡 Tips
scene不能超过 32 个可见字符- 生成的二维码默认是方形白底图，适合各种页面跳转
- 若要加 logo 或美化，可使用 canvas 在前端叠加
🧪 示例效果
生成的二维码长这样：
[ 方形白底二维码图 ]
点击扫码 → 自动跳转到 pages/detail/index?id=123
📦 完整目录结构参考
miniprogram/
├── pages/
├── utils/
├── cloudfunctions/
└── getQRCode/
└── index.js
好的，这里我为你准备了一个完整的微信小程序二维码生成项目模板（含 canvas 美化），可生成带 Logo 的方形二维码，并支持自定义页面路径与参数跳转，一共分为两部分：
📁 一、项目结构
- miniprogram/
├── pages/
│ └── qrcode/
│ ├── index.js
│ ├── index.wxml
│ ├── index.wxss
│ └── index.json
├── utils/
│ └── weapp-qrcode.js ← 二维码生成库
- cloudfunctions/
└── getQRCode/
└── index.js
🧩 二、功能说明
- 可输入目标页面路径及参数（如 pages/detail/index?id=123）
- 点击按钮生成二维码并显示
- 二维码可保存到本地
- 二维码可绘制到 canvas，并在中间插入 logo 图标
✨ 三、代码详解
1️⃣ 云函数 getQRCode
路径：cloudfunctions/getQRCode/index.js
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
const { page, scene } = event
try {
const res = await cloud.openapi.wxacode.getUnlimited({
scene,
page,
width: 430,
is_hyaline: false,
})
const upload = await cloud.uploadFile({
cloudPath: `qrcodes/${Date.now()}.jpg`,
fileContent: res.buffer,
})
return { fileID: upload.fileID }
} catch (err) {
return { errMsg: err.message }
}
}
2️⃣ 二维码页面 pages/qrcode/index.js
Page({
data: {
qrCodeImage: '',
scene: 'id=123',
page: 'pages/detail/index',
canvasHidden: false
},
generateQRCode() {
wx.cloud.callFunction({
name: 'getQRCode',
data: {
page: this.data.page,
scene: this.data.scene
},
success: res => {
const fileID = res.result.fileID
wx.cloud.downloadFile({
fileID,
success: downloadRes => {
this.setData({ qrCodeImage: downloadRes.tempFilePath }, () => {
this.drawQRCodeWithLogo()
})
}
})
}
})
},
drawQRCodeWithLogo() {
const ctx = wx.createCanvasContext('qrcodeCanvas', this)
const qrPath = this.data.qrCodeImage
const logoPath = '/images/logo.png' // 你自己的logo路径
// 绘制二维码
ctx.drawImage(qrPath, 0, 0, 300, 300)
// 绘制logo在中心
ctx.drawImage(logoPath, 120, 120, 60, 60)
ctx.draw()
},
saveQRCode() {
wx.canvasToTempFilePath({
canvasId: 'qrcodeCanvas',
success: res => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => wx.showToast({ title: '保存成功' })
})
}
}, this)
}
})
3️⃣ 页面结构 pages/qrcode/index.wxml
<view class="container">
<button bindtap="generateQRCode">生成二维码</button>
<canvas canvas-id="qrcodeCanvas" style="width:300px;height:300px;"></canvas>
<button bindtap="saveQRCode">保存到相册</button>
</view>
4️⃣ 样式 pages/qrcode/index.wxss
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 30rpx;
}
button {
margin: 20rpx 0;
}
📌 四、图片素材说明
将你的小程序 logo 放到 miniprogram/images/logo.png，推荐尺寸 60x60px。
📦 五、二维码美化方案（可拓展）
你还可以在 canvas 上添加：
- 渐变背景
- 圆角二维码
- 加描边、阴影
- 二维码四角圆点（仿微信扫码样式）
需要我帮你继续拓展这些美化功能也可以告诉我！
🔗 六、依赖说明
该方案完全基于：
- 微信小程序云开发
- 微信官方二维码接口（无需额外 npm 包）
- Canvas API 绘制带 Logo 的二维码
发表回复