微信小程序生成自定义二维码
程序员文章站
2024-03-16 21:08:16
...
文件地址
主要用到其中的weapp.qrcode.esm.js
可以直接拖到目录中
页面中引入
import drawQrcode from '../../utils/weapp.qrcode.esm'
使用方式
先在模板中使用canvas标签
<canvas class="twoDCode" style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
方法中调用
drawQrcode({
width: 200,
height: 200,
canvasId: 'myQrcode',
// ctx: wx.createCanvasContext('myQrcode'),
text: this.codeText || '二维码信息丢失',
foreground: '#1D4E89',
image: {
imageResource: '../../static/images/logo.png',
dx: 70,
dy: 70,
dWidth: 60,
dHeight: 60
}
})
要注意的是 canvas中的宽高,要和方法里的宽高保持一致。
text 就是你需要生成的二维码包含的信息,这里我是指向data中的数据。
image是可以里的图片是 生成在二维码中的图片,当然也有网络加载的方式,看到一个很好例子
let that = this;
// 直接设置 options.image 的值,在手机上logo会绘制失败
new Promise((resolve, reject) => {
// 绘制网络地址的logo时需要先使用 wx.getImageInfo 获取到图片信息
// 注意网络图片需先配置download域名 wx.getImageInfo 才能生效。
wx.getImageInfo({
src: 'https://.../qrcode.jpg',
success: (res) => {
resolve(res.path);
},
fail: (e) => {
// 获取logo失败也不应该影响正确生成二维码图片
// 这里可以给出失败提示
resolve();
}
})
}).then((path) => {
let options = {
width: 180,
height: 180,
x: 10,
y: 10,
canvasId: 'myQrcode',
text: 'https://www.baidu.com',
callback: (e) => {
// 使用 setTimeout, 避免部分安卓机转出来的二维码图片不完整
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'myQrcode',
x: 0,
y: 0,
width: 200,
height: 200,
success: (e) => {
that.setData({ qrcodeImg: e.tempFilePath });
}
})
}, 0);
}
}
if(!!path){
options.image = {
imageResource: path,
dx: 70,
dy: 70,
dWidth: 60,
dHeight: 60
}
}
drawQrcode(options);
})
最后的效果图
上一篇: dubbo集群容错之loadbalance负载均衡
下一篇: dubbo集群容错和负载均衡