直播小程序源码,小程序生成二维码 (兼容H5、微信小程序)
直播小程序源码,小程序生成二维码 (兼容H5、微信小程序)
1、<canvas type="2d" style="width: 127px; height: 127px;position: fixed;top: -1000px;" id="myQrcode"></canvas>
注意:不能再v-if内,否则会导致找不到该节点
2、import drawQrcode from '@/common/qrcodeJs/qrcode.js';
注意:也可以npm安装 npm install weapp-qrcode-canvas-2d --save
3、这个是项目中实践使用的,没有使用叠加图片的
/**
* 生成二维码(没有使用叠加图片)
* text - 码值
* */
handleMakeQrcode(text) {
return new Promise((resolve, reject) => {
const query = uni.createSelectorQuery()
query.select('#myQrcode').fields({
node: true,
size: true
}).exec((res) => {
// 获取node节点实例,目前仅微信,快手,京东小程序支持;
// #ifdef MP-WEIXIN || MP-KUAISHOU
let canvas = res[0].node
// #endif
// 调用方法drawQrcode生成二维码
drawQrcode({
// #ifdef MP-WEIXIN || MP-KUAISHOU
canvas: canvas,
// #endif
canvasId: 'myQrcode',
width: 127,
padding: 0,
background: '#ffffff',
foreground: '#000000',
text: text,
})
// 获取临时路径
uni.canvasToTempFilePath({
canvasId: 'myQrcode',
// #ifdef MP-WEIXIN || MP-KUAISHOU
canvas: canvas,
// #endif
x: 0,
y: 0,
width: 127,
height: 127,
destWidth: 127,
destHeight: 127,
success(res) {
resolve(res.tempFilePath); // 临时路径
},
fail(res) {
console.error(res);
reject();
}
})
});
})
}
/*
* 文档中示例 - 有叠加图片的(在二维码中加logo)
*/
const query = wx.createSelectorQuery()
query.select('#myQrcode')
.fields({
node: true,
size: true
})
.exec(async (res) => {
var canvas = res[0].node
var img = canvas.createImage();
img.src = "/image/logo.png"
img.onload = function () {
// img.onload完成后才能调用 drawQrcode方法
var options = {
canvas: canvas,
canvasId: 'myQrcode',
width: 260,
padding: 30,
paddingColor: '#fff',
background: '#fff',
foreground: '#000000',
text: 'https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d',
image: {
imageResource: img,
width: 80, // 建议不要设置过大,以免影响扫码
height: 80 // 建议不要设置过大,以免影响扫码
round: true // Logo图片是否为圆形
}
}
drawQrcode(options)
// 获取临时路径(得到之后,想干嘛就干嘛了)
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 260,
height: 260,
destWidth: 600,
destHeight: 600,
canvasId: 'myQrcode',
canvas: canvas,
success(res) {
console.log('二维码临时路径为:', res.tempFilePath)
},
fail(res) {
console.error(res)
}
})
};
})
以上就是 直播小程序源码,小程序生成二维码 (兼容H5、微信小程序),更多内容欢迎关注之后的文章