插件 npm 地址:https://www.npmjs.com/package/weapp-qrcode
插件 GitHub 地址:https://github.com/yingye/weapp-qrcode/tree/master
一、引入
1、根据 GitHub 指引将 weapp-qrcode 放到本地 uitl 文件夹下;
2、创建 canvas
<canvas canvas-id="code" style="width:200px;height:200px;"></canvas>
3、在 js 文件中引入 weapp-qrcode 以及使用;
import drawQrcode from "../../utils/weapp-qrcode"
Page({
onLoad() {
this.handleCode();
},
handleCode(){
drawQrcode({
width:200,
height:200,
foreground:"red",
canvasId:"code",
text:"xxs",
image:{
imageResource:"../../assets/logo.png",
dx:80,
dy:80,
dWidth:40,
dHeight:40
},
callback(e){
console.log(e)
}
})
}
})
这里是添加了 logo 的二维码;相关参数请参考 GitHub 里面的表格;
二、注意
1、image 的路径如果是网络图片的话会显示不出来,需要使用 wx.getImageInfo(需要在小程序后台配置 download 域名)去获取图片信息;
2、image 图片格式是 svg 的时候不显示,需要替换成 png 的;
3、在回调函数 callback 中处理 canvas 的时候需要设置定时器以兼容安卓部分机型出现的问题;文章来源:https://www.toymoban.com/news/detail-609702.html
最后
方法有很多,工具也有很多;找到适合自己项目的就行;下面分享几个我在见到还不错的文章以及插件,感兴趣的可以自己去试一下:
1、文章:小程序 做二维码带logo绘制二维码
2、插件GitHub:weapp-qrcode-canvas-2d文章来源地址https://www.toymoban.com/news/detail-609702.html
到了这里,关于微信小程序生成二维码(weapp-qrcode)可添加logo的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!