评论

weapp-qrcode使用教程及踩过的坑

本文主要介绍weapp-qrcode插件的使用教程及使用过程中踩过的坑

一、前言

最近在做小程序的需求中碰到需要可以支持用户自定义信息再生成二维码的需求,之前在PC端对应的功能我们是利用jquery-qrcode.js来实现的,但是在小程序里不支持操作dom,所以这个插件就用不了啦。然后在github上找到了weapp-qrcode这个插件,只要我们注意避免一些坑,利用好它的各种属性,功能还是挺强大的,基本画二维码的各种需求都能照顾到。

二、使用

  1. 在 github 上下载工程,主要用到的文件是 /dist/weapp-qrcode.js 文件。

    github地址:weapp-qrcode

  2. 在 wxml 文件中,创建绘制的 canvas,并定义好 width, height, canvasId

    <canvas style="width: 220px; height: 220px;background:pink;" canvas-id="myQrcode"></canvas>
    
  3. 引入文件,这里直接将文件copy到了util文件夹下,再在需要用到的文件里引用。

    let drawQrcode = require("../../utils/weapp.qrcode.min.js");
    
  4. 使用 drawQrcode() 绘制二维码。

    注意:在 调用 drawQrcode() 方法之前,一定要确保可以获取到 canvas context 。
    drawQrcode({
      width: 200,
      height: 200,
      canvasId: 'myQrcode',
      // ctx: wx.createCanvasContext('myQrcode'),
      text: 'https://github.com/yingye',
      // v1.0.0+版本支持在二维码上绘制图片
      // ctx: wx.createCanvasContext('myQrcode'),
      text: 'https://github.com/yingye',
      // v1.0.0+版本支持在二维码上绘制图片
      image: {
           imageResource: '../../image/icon.png',
           dx: 70,
           dy: 70,
      	 dWidth: 60,
      	 dHeight: 60
       }
      })
    

三、雷坑盘点

上面介绍了 weapp-qrcode 的基本用法,使用上面的方法已经可以成功画出一个二维码图片了, 但是它里面还有许多坑需要注意避免。

  1. 在二维码中间绘制logo图片:如果使用的是网络地址的图片, 直接设置 options.image 的值logo会绘制失败,所以需要先使用 wx.getImageInfo 去获取图片信息;
  2. 利用 x,y 可以画出有 padding 感觉的二维码图片 (需要给canvas设置背景颜色);
  3. 直接在callback中调用 wx.canvasToTempFilePath 在部分安卓机上转出来的二维码图片异常(不完整), 需要自行设置计时器;
  4. 在组件中使用 drawQrcode() 需要传_this。
  5. canvas 绘图的尺寸单位是px, 但是小程序中我们一般使用 rpx 作为尺寸单位, 所以如果 canvas 是使用 rpx 来设置它的大小, 需要注意 rpx 与 px 之间的转换。

下面是一个相对比较复杂一点的绘制二维码的例子:

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);
})

API

drawQrcode([options])

options{ Type: Object }

参数 说明 示例
width 必须,二维码宽度,与canvas的width保持一致 200
height 必须,二维码高度,与canvas的height保持一致 200
canvasId 非必须,绘制的canvasId ‘myQrcode’
ctx 非必须,绘图上下文,可通过 wx.createCanvasContext(‘canvasId’) 获取,v1.0.0+版本支持 ‘wx.createCanvasContext(‘canvasId’)’
text 必须,二维码内容 https://github.com/yingye
typeNumber 非必须,二维码的计算模式,默认值-1 8
correctLevel 非必须,二维码纠错级别,默认值为高级,取值:{ L: 1, M: 0, Q: 3, H: 2 }} 1
background 非必须,二维码背景颜色,默认值白色 ‘#ffffff’
foreground 非必须,二维码前景色,默认值黑色 ‘#000000’
_this 非必须,若在组件中使用,需要传入,v0.7.0+版本支持 this
callback 非必须,绘制完成后的回调函数,v0.8.0+版本支持。安卓手机兼容性问题,可通过自行设置计时器来解决,更多可以参考 issue #18 function (e) { console.log(‘e’, e) }
x 非必须,二维码绘制的 x 轴起始位置,默认值0,v1.0.0+版本支持 100
y 非必须,二维码绘制的 y 轴起始位置,默认值0,v1.0.0+版本支持 100
image 非必须,在 canvas 上绘制图片,层级高于二维码,v1.0.0+版本支持,更多可参考drawImage { imageResource: ‘’, dx: 0, dy: 0, dWidth: 100, dHeight: 100 }
最后一次编辑于  2020-02-13  
点赞 8
收藏
评论

12 个评论

  • 竖锯
    竖锯
    02-22

    你好,我生成的二维码一开始不显示,切换页面后就显示出来了,这是啥问题

    02-22
    赞同
    回复
  • 唯一期盼
    唯一期盼
    2020-11-23

    赞一个

    2020-11-23
    赞同
    回复
  • 杨易
    杨易
    2020-11-02

    请问生成的二维码被压缩了显示不全怎么解决啊?切换到别的软件然后再切回小程序二维码页面又显示正常了


    2020-11-02
    赞同
    回复
  • 祥仔
    祥仔
    2020-08-31

    问一下,你们是如何做到一个账号上能够演示多个小程序的,大神求思路

    2020-08-31
    赞同
    回复
  • xy
    xy
    2020-08-02

    生成的二维码 乱码是什么原因?

    2020-08-02
    赞同
    回复
  • Sugar丶
    Sugar丶
    2020-07-13

    您好,部分安卓手机上二维码会这样是什么情况呢

    2020-07-13
    赞同
    回复 2
    • 未来
      未来
      2020-08-13
      你好,请问这个问题你解决了吗
      2020-08-13
      回复
    • 。。。。。。
      。。。。。。
      2020-12-28
      怎么解决呢
      2020-12-28
      回复
  • 下了一场雪
    下了一场雪
    2020-06-30

    这个插件怎么去绘制白边啊,绘制出来的二维码都没白边。。。

    2020-06-30
    赞同
    回复
  • 菱玉
    菱玉
    2020-05-27

    如果生成二维码的字符串很长怎么办,现在这个就提示已经超了

    2020-05-27
    赞同
    回复 2
    • 袁同学
      袁同学
      01-19
      你有解决方案了嘛,可以改correctLevel,但是改完根本看不了
      01-19
      回复
    • 菱玉
      菱玉
      01-19回复袁同学
      typeNumber  把这个去掉了用的默认值-1
      01-19
      回复
  • 花火
    花火
    2020-05-26

    感谢!!!!!!!!!!

    2020-05-26
    赞同
    回复
  • 康子
    康子
    2020-05-11

    为什么我用的本地图片logo还是出不来

    2020-05-11
    赞同
    回复 1
    • 林北
      林北
      03-30
      你好 请问你解决这个问题了吗
      03-30
      回复

正在加载...

登录 后发表内容