在微信公众号或小程序后台,获取开发者ID和开发者密码,以及应用的AppID、AppSecret等信息。
配置公众号或小程序的开发环境,并在服务器端获取access_token,用于后续生成二维码和访问微信公众平台API接口。
// Node.js 示例代码,使用request模块
const request = require('request');
const APP_ID = 'your_app_id';
const APP_SECRET = 'your_app_secret';
function getAccessToken(callback) {
request.get(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${APP_ID}&secret=${APP_SECRET}`, (error, response, body) => {
if (!error && response.statusCode == 200) {
let data = JSON.parse(body);
let accessToken = data.access_token;
let expiresIn = data.expires_in; // 有效期,通常为7200秒(2小时)
callback(accessToken);
} else {
console.error(error);
}
});
}
// Node.js 示例代码,使用express框架
const express = require('express');
const app = express();
const path = require('path');
const qr = require('qrcode');
app.set('port', process.env.PORT || 3000);
app.get('/', (req, res) => {
const scene = Math.random().toString(36).substr(2); // 生成一个随机Scene值
const pagePath = '/pages/index/index'; // 小程序页面路径
const params = { // Scene值和小程序路径参数
scene,
pagePath
};
const accessToken = getAccessToken((token) => { // 获取access_token
const url = `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`;
const options = { // 请求参数
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: {
scene: params.scene, // 场景值参数
page: params.pagePath, // 小程序页面路径
width: 280, // 二维码宽度,单位 px
is_hyaline: true // 是否需要透明底色,true/false
},
json: true
};
// 发送请求
request(url, options, (error, response, body) => {
if (error) {
console.error(error);
res.json({
success: false,
error: error.message
});
} else {
// 将二进制数据转为data uri格式,并返回前端
const imageUrl = `data:image/png;base64,${body.toString('base64')}`;
/*qr.toDataURL(params.scene, (err, qrcode) => {
res.sendFile(path.join(__dirname, 'views/index.html'), {
qrcode: imageUrl
});
});*/
res.send({data:imageUrl})
}
});
});
});
app.listen(app.get('port'));
前端拿到url然后 渲染即可。
第二种方法,如果后端能力一般,可以让后端给你access_token,然后去调用第三方接口
1.在HTML页面中使用以下代码生成一个可以被修改的二维码图片元素:
2.在JavaScript中使用第三方JS库jsqrcode和qrcodejs,生成并渲染一个空的二维码图片:
var qrcode = new QRCode(document.getElementById('qrcode'), {
width: 280,
height: 280
});
qrcode.makeCode('');
3.调用微信公众平台的API接口,生成包含小程序路径及随机参数的小程序码:
var scene = Math.random().toString(36).substr(2);
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN', true);
xhr.responseType = 'arraybuffer';
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var buffer = xhr.response;
document.getElementById('qrcode').innerHTML = '';
wx.miniProgram.navigateTo({
url: '/pages/index/index?scene=' + scene
});
} else {
console.error(xhr.statusText);
}
}
};
xhr.send(JSON.stringify({
scene: scene,
page: '/pages/index/index',
width: 280
}));
在这段代码中,access_token
是一个访问令牌,可以通过调用微信公众平台的API接口获取。page
参数是小程序的页面路径,width
参数决定了二维码的尺寸大小,scene
参数是随机字符串参数。
window.onload = function() {
document.getElementById('qrcode').getElementsByTagName('img')[0].addEventListener('load', function() {
wx.previewImage({
current: this.src,
urls: [this.src],
success: function() {
wx.miniProgram.navigateTo({
url: '/pages/index/index?scene=' + scene
});
}
});
});
};
在这段代码中,wx.previewImage()
是一个预览图片的JSAPI,使用wx.miniProgram.navigateTo()
方法跳转到小程序的/pages/index/index?scene=SCENE
页面,SCENE
参数是生成的随机字符串参数。