uniapp生成微信小程序二维码主要有两种方式：后端接口调用与前端API生成，后端需通过微信服务器接口获取access_token，调用/wxa/getwxacode或/wxa/getwxacodeunlimit生成二维码图片并返回前端；前端可直接使用uniapp提供的uni.createQRCode方法，传入小程序路径、尺寸等参数生成二维码，适用于简单场景，前者适合带参数的动态二维码，后者更便捷但灵活性较低，需根据需求选择，同时注意微信小程序的域名配置及接口权限限制。
Uniapp生成微信小程序二维码：完整指南与最佳实践
在微信小程序的开发与推广过程中，二维码作为核心流量入口，扮演着至关重要的角色，无论是线下活动推广、社交分享裂变，还是带参数的场景化跳转（如邀请码、来源统计），生成小程序二维码都是开发者必须掌握的高频需求，Uniapp作为一款"一次开发，多端发布"的跨平台开发框架，凭借其Vue.js语法、丰富的组件库和完善的生态体系，已成为众多开发者的首选方案，本文将系统性地介绍如何通过Uniapp实现微信小程序二维码的生成，涵盖后端官方接口调用与前端库生成两种主流方案,并附上详细的注意事项与最佳实践。
前置准备：小程序配置与权限开通
在开始生成二维码之前,请确保已完成以下基础配置：
小程序基本信息
登录微信公众平台，进入「开发」-「开发管理」-「开发设置」，记录小程序的AppID（小程序ID），这是后续调用微信接口的唯一标识,务必妥善保管。
接口权限开通
微信官方提供了生成小程序二维码的两种接口,各有适用场景：
- 临时二维码：有效期最长为30天，无需小程序发布即可使用，适合短期活动场景（如7天促销、限时优惠）。
- 永久二维码：无有效期限制，但要求小程序已发布并通过审核，适合长期固定入口（如首页、个人中心）。
两类接口均需在「开发」-「接口设置」中确认权限状态，默认情况下，这些接口权限已开通，但若未显示相关选项,可能需要提交小程序审核后才能使用。
后端调用微信官方接口（推荐带参数场景）
微信官方提供了生成小程序二维码的接口，但出于安全考虑，必须通过后端服务器调用（避免暴露AppSecret），核心流程为：后端获取access_token → 调用生成二维码接口 → 返回图片数据 → 前端展示。
接口说明
微信官方提供两个核心接口：
生成临时二维码
https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN- 请求方式：POST
- 主要参数：
path：小程序页面路径，如/pages/index/indexwidth：二维码宽度，默认430像素auto_color：是否自动配置线条颜色，默认为false
- 返回：图片二进制流
生成永久二维码
https://api.weixin.qq.com/wxa/getwxacodeunlimited?access_token=ACCESS_TOKEN- 请求方式：POST
- 主要参数：
path：小程序页面路径width：二维码宽度scene：场景参数，如inviteCode=123（需URL编码）is_hyaline：是否需要透明背景，默认为false
- 返回：图片二进制流
关键区别：临时接口生成的二维码数量有限（最多10万个），且要求小程序已发布；永久接口无数量限制,但同样需要小程序发布后才能使用。
后端实现（以Node.js为例）
（1）获取access_token
access_token是调用微信接口的凭证，有效期2小时,建议缓存并定时刷新：
const axios = require('axios');
const redis = require('redis'); // 使用Redis缓存access_token
const APPID = '你的小程序AppID';
const APPSECRET = '你的小程序AppSecret';
const getAccessToken = async () => {
const client = redis.createClient();
const cachedToken = await client.get('wx_access_token');
if (cachedToken) {
return cachedToken;
}
try {
const res = await axios.get(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APPID}&secret=${APPSECRET}`);
const { access_token, expires_in } = res.data;
// 缓存access_token，提前5分钟过期以避免token失效
client.set('wx_access_token', access_token, 'EX', expires_in - 300);
return access_token;
} catch (error) {
console.error('获取access_token失败:', error);
throw new Error('获取微信access_token失败');
}
};
（2）生成二维码
以生成永久二维码（带参数inviteCode=123）为例：
const generateQRCode = async () => {
try {
const accessToken = await getAccessToken();
const url = `https://api.weixin.qq.com/wxa/getwxacodeunlimited?access_token=${accessToken}`;
const params = {
path: '/pages/index/index?inviteCode=123', // 小程序页面路径+参数
width: 280,
scene: 'inviteCode=123', // 场景参数（与path参数二选一，优先path）
is_hyaline: true // 透明背景
};
const res = await axios.post(url, params, {
responseType: 'arraybuffer', // 接收二进制流
headers: {
'Content-Type': 'application/json'
}
});
// 返回base64格式图片（可直接用于前端img标签）
return Buffer.from(res.data, 'binary').toString('base64');
} catch (error) {
console.error('生成二维码失败:', error);
throw new Error('生成小程序二维码失败');
}
};
Uniapp前端调用与展示
后端生成二维码后，可通过接口返回base64或图片URL，前端使用<image>标签展示：
<template>
<view class="container">
<button @click="getQRCode" :disabled="loading">
{{ loading ? '生成中...' : '生成小程序二维码' }}
</button>
<view v-if="qrCodeBase64" class="qr-container">
<image
:src="'data:image/png;base64,' + qrCodeBase64"
mode="widthFix"
class="qr-image"
/>
<text class="tip">长按保存二维码</text>
</view>
<view v-if="error" class="error">{{ error }}</view>
</view>
</template>
<script>
export default {
data() {
return {
qrCodeBase64: '',
loading: false,
error: ''
}
},
methods: {
async getQRCode() {
this.loading = true;
this.error = '';
try {
const response = await uni.request({
url: 'https://your-api-domain.com/generate-qrcode',
method: 'POST'
});
if (response.data.success) {
this.qrCodeBase64 = response.data.data;
} else {
this.error = response.data.message || '生成二维码失败';
}
} catch (err) {
this.error = '网络请求失败，请稍后重试';
console.error(err); 标签： #微信小程序二维码
