评论

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  
点赞 10
收藏
评论

20 个评论

  • 杨易
    杨易
    2020-11-02

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


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

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

    2020-08-31
    赞同
    回复
  • 猛男陈阔
    猛男陈阔
    2020-08-02

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

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

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

    2020-07-13
    赞同
    回复 5
    • 未来
      未来
      2020-08-13
      你好,请问这个问题你解决了吗
      2020-08-13
      回复
    • 向阳花木易德蠢
      向阳花木易德蠢
      2020-12-28
      怎么解决呢
      2020-12-28
      回复
    • 东海叮叮
      东海叮叮
      2021-11-01
      我也遇到这个问题了,在安卓手机上
      2021-11-01
      回复
    • 圆周π
      圆周π
      2022-02-17
      我也遇到了
      2022-02-17
      回复
    • 。。。
      。。。
      2023-12-06
      我也碰到这个问题了,请问怎么解决的呢
      2023-12-06
      回复
  • Jay丶萧邦
    Jay丶萧邦
    2020-06-30

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

    2020-06-30
    赞同
    回复 4
    • Sean
      Sean
      2021-04-23
      padding
      2021-04-23
      回复
    • 我就是我
      我就是我
      2021-07-28回复Sean
      padding加了也没效果呀,你是加载哪里
      2021-07-28
      回复
    • 幻想拯救世界的中二少年
      幻想拯救世界的中二少年
      2021-11-27
      请问咋搞呀急急急
      2021-11-27
      回复
    • tao
      tao
      2022-11-09
      这个怎样解决的呢,加x、y轴起始位置只有两个边有白边效果
      2022-11-09
      回复
  • 菱玉
    菱玉
    2020-05-27

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

    2020-05-27
    赞同
    回复 3
    • Proxy
      Proxy
      2021-01-19
      你有解决方案了嘛,可以改correctLevel,但是改完根本看不了
      2021-01-19
      回复
    • 菱玉
      菱玉
      2021-01-19回复Proxy
      typeNumber  把这个去掉了用的默认值-1
      2021-01-19
      回复
    • 草尖上的光芒
      草尖上的光芒
      2021-06-13
      我也碰到超长的问题,请问是怎么解决的?
      2021-06-13
      回复
  • 花火
    花火
    2020-05-26

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

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

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

    2020-05-11
    赞同
    回复 2
  • Karl🐮
    Karl🐮
    2020-04-24

    非常感谢! 最近的开发,在小米五真机上,保存的二维码一直识别不了。

    排查了布局、第三方库的因素,最后断定是wx.canvasToTempFilePath出了问题,可以保存,二维码也不会变形,就是一直识别不了。

    刚好上来社区看到这篇文章。真的是帮了大忙!!!!

    2020-04-24
    赞同
    回复 4
    • 吾与喵
      吾与喵
      2020-05-05
      你好,请问你是具体怎么解决的呢,我这边小米手机还是识别不了,生成的二维码都是错的。
      2020-05-05
      回复
    • Karl🐮
      Karl🐮
      2020-05-26回复吾与喵
      加定时器setTimeout
      2020-05-26
      回复
    • 吾与喵
      吾与喵
      2020-05-26回复Karl🐮
      谢谢,已解决
      2020-05-26
      回复
    • 菱玉
      菱玉
      2020-06-01
      你好,你是用的上面的插件绘制的二维码吗,我现在也是用的这个但是我这边有一个问题就是直接调用插件绘制出来的canvans在安卓手机上不显示,我现在是先绘制了然后转的图片显示在页面上的,这样就是转图片有点耗时间别的暂时没上么问题,你那边有这个问题没?
      2020-06-01
      回复
  • Admin ²º²⁴
    Admin ²º²⁴
    2020-02-15

    不错的经验分享,暂时没用到,但是可以先mark一下,以后估计会用。可以少走弯路

    2020-02-15
    赞同
    回复

正在加载...

登录 后发表内容