微信小程序生成二维码（weapp-qrcode）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序生成二维码（weapp-qrcode）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

插件 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 的时候需要设置定时器以兼容安卓部分机型出现的问题；

最后

方法有很多，工具也有很多；找到适合自己项目的就行；下面分享几个我在见到还不错的文章以及插件，感兴趣的可以自己去试一下：
1、文章：小程序做二维码带logo绘制二维码
2、插件GitHub：weapp-qrcode-canvas-2d文章来源地址https://www.toymoban.com/news/detail-607035.html

到了这里，关于微信小程序生成二维码（weapp-qrcode）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！