wyuanyang / wxapp-qrcode

微信小程序--二维码生成器

微信小程序-二维码生成器

本项目用于在微信小程序中生成二维码，也可用于第三方框架Mpvue,Taro等。

生成预览

• 可支持输入中文文本

安装

git clone https://github.com/demi520/wxapp-qrcode.git

使用

1.创建canvas节点,以及设置canvas-id。(可以控制该区域不显示，但是必须要存在)

<canvas style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas"/>

2.引入qrcode.js,将utils/qrcode.js 文件复制到自己工程里，并引入。

// 注意： 这里xxx是你自己的路径
let QR = require("xxxx/qrcode.js")  // require方式
import QR from 'xxxx/qrcode.js'    // es6的方式

3.在js文件中，定义相关的方法，要注意在data中创建imagePath（最终生成的图片路径）,可以将img的src属性绑定imagePath

createQrCode: function (content, canvasId, cavW, cavH) {
  //调用插件中的draw方法，绘制二维码图片
  //this.canvasToTempImage 为绘制完成的回调函数，可根据自己的业务添加
  QR.api.draw(content, canvasId, cavW, cavH, this, this.canvasToTempImage);
},

//获取临时缓存图片路径，存入data中
canvasToTempImage: function (canvasId) {
  let that = this;
  wx.canvasToTempFilePath({
    canvasId,   // 这里canvasId即之前创建的canvas-id
    success: function (res) {
      let tempFilePath = res.tempFilePath;
      console.log(tempFilePath);
      that.setData({       // 如果采用mpvue,即 this.imagePath = tempFilePath
        imagePath:tempFilePath,
      });
    },
    fail: function (res) {
      console.log(res);
    }
  });
}

4.绑定事件，调用createQrCode，生成二维码

createQrCode ('wxapp-qrcode', 'mycanvas', 300, 300)

FAQ

自定义组件中不能生成qrcode?

封装方法时: 添加上this, QR.api.draw(url, canvasId, cavW, cavH, this); 可参考qrcode.js 768行，wx.createCanvasContext

如何适配不同屏幕大小的canvas？

可参考 pages/main/index.js 中的 setCanvasSize 方法。

Ps

感谢微信小程序|联盟 @amis提供的素材和创意；

测试有其他问题请回帖哦，感激！！

wxapp-qrcode's Issues

怎么样能生成一维码呢

能生成一维码吗

生成二维码之后，那个灰色那边的背景能去掉吗，只要二维码。用你的那个生成之后他会有白色的框框

生成了二维码但是识别不了啊

用这个插件生成 https://www.baidu.com，或者任意网站的二维码，发现不管是微信扫一扫还是浏览器的扫一扫都没法识别

二维码生成后会有白色的边框 这个边框能去掉么

问题请教

能否生成ISO-8859-1格式的二维码?

关于在真机上生成二维码不显示问题

因为在电脑上测试的时候是可以正常生成二维码的，但到手机上后，二维码就不显示了，但只要息屏然后在打开屏幕有出现了，目前不知道原因，我提取了源码中部分代码单独绘制的时候又可以显示绘制路径，但使用完整的代码就不显示了，手机是安卓的，苹果的不知道是不是也一样

大bug

真机调试的时候,生成的二维码有问题 如图 而且有时候还不能生成出来,生成的是透明的图片

出个版本去掉外边的边框的

出个版本去掉外边的边框的

此处canvasToTempImage应该放在ctx.draw执行完成回调中执行，否则会出现二维码为透明图片的情况

https://github.com/demi520/wxapp-qrcode/blob/5a840fd48ccb6d95bad79c03c83b946b6cfab702/pages/main/index.js#L52

生成的二维码有时候在一些机型会有部分缺失

问题机型 荣耀10

在最新版本 wepy中使用，无法显示二维码

控制台报警告
建议使用新 canvas 2d 接口提升渲染性能，详见文档：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html#Canvas-2D-%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81

是不是微信开发框架升级了不支持

为何去掉http，内容换成中文，扫不出来，只有数字和英文可以

关于二维码绘制范围和白边的问题

我自己改了下绘制的方法，不知道这样会不会有问题，目前在iOS设备上还行。就是确定下二维码的区域，然后把画布上的这个区域给生成一张图片使用，这样就没有白边了。
/**
* 新增$this参数，传入组件的this,兼容在组件中生成
*/
draw: function (str, canvas, cavW, cavH, $this, ecc) {
var that = this;
ecclevel = ecc || ecclevel;
canvas = canvas || _canvas;
if (!canvas) {
console.warn('No canvas provided to draw QR code in!')
return;
}

  var size = Math.min(cavW, cavH);
  str = that.utf16to8(str);//增加中文显示

  var frame = that.getFrame(str),
    // 组件中生成qrcode需要绑定this 
    ctx = wx.createCanvasContext(canvas, $this),
    px = Math.round(size / (width + 8));
  var roundedSize = px * (width + 8),
    offset = Math.floor((size - roundedSize) / 2);
  size = roundedSize;
  //ctx.clearRect(0, 0, cavW, cavW);
  ctx.setFillStyle('#ffffff')
  ctx.fillRect(0, 0, cavW, cavW);//底部区域绘制，注释掉择不绘制底色
  ctx.setFillStyle('#000000');

  var minX = cavW;
  var minY = cavH;
  var maxX = 0;
  var maxY = 0;
  for (var i = 0; i < width; i++) {
    for (var j = 0; j < width; j++) {
      if (frame[j * width + i]) {
        ctx.fillRect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);

        if (px * (4 + i) + offset < minX){
          minX = px * (4 + i) + offset
        }

        if (px * (4 + j) + offset < minY) {
          minY = px * (4 + j) + offset
        }

        if (px * (4 + i) + offset > maxX) {
          maxX = px * (4 + i) + offset
        }

        if (px * (4 + j) + offset > maxY) {
          maxY = px * (4 + j) + offset
        }

      }
    }
  }
  ctx.draw();

  var area = { minX: minX, minY: minY, maxX: maxX + px, maxY: maxY + px }
  
  return area
}

控制台输出canvas 2d 接口支持同层渲染且性能更佳，建议切换使用。

详见文档：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html#Canvas-2D-%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81

请问如何获得二维码的位图

你好，我只是想获得二维码的位图，不考虑显示的话，要如何实现呢？

为什么不直接显示cavas，而先保存图片，然后用image来显示？

点击预览图片以后不显示怎么办。。。

qrcodejs支持生成带logo图标的二维码吗？

绘制成功后返回的二维码临时路径，无法在真机上显示

绘制成功后返回的二维码临时路径，小程序中无法在真机上显示，需要打开调试才能显示

main/index.json的navigationBarTextStyle只支持black || white

https://github.com/demi520/wxapp-qrcode/blob/5a840fd48ccb6d95bad79c03c83b946b6cfab702/pages/main/index.json#L3

是否支持修改生成的二维码的容错率？

参考文章得到的生成的二维码是15%的容错率： https://www.v2ex.com/t/484091

急

如何改成不止网址，还能多输入些信息比如姓名电话，扫码后显示输入的内容

canvas绘制完,滚动/滑动页面卡顿

打开页面滑动流畅，一旦绘制二维码后，滑动页面变得卡顿！请问如何解决？等待中！谢谢

组件中无法生成qrcode吗?

你好，我想问下这个在组件下可以生成qrcode吗？因为我想把生成二维码方法抽取出来作为组件
createQrCode: function (address, canvasId, cavW, cavH) {
let that = this;
QR.api.draw(address, canvasId, cavW, cavH, that);
setTimeout(() => { that.canvasToTempImage(); }, 1000);
}

这段代码是在组件component下写的，但是二维码似乎一直无法生成，如下图所示：

因为看到你的源码说“新增$this参数，传入组件的this,兼容在组件中生成“，但是我传入进去了无法生成，所以想问下是我的用法有什么问题吗？不写在组件里是可以生成的，可以帮我看下是为啥吗？谢谢

请问这里的$this是啥？还有这个函数在main.js中用的时候后面的参数为什么没了？

现在好像用不了啊

二维码绘制问题

单独的二维码绘制单调，请问有无办法可以在二维码下加名字之类提示符呢

这个可以二次或者多次绘画同一个canvas吗

我第一次绘画完成了,二次重新绘画时不成功,也没有报错

Qrcode能生成条形码吗

您好、Qrcode能生成条形码吗

生成的canvas会有多余部分

能生成带中文标题的二维码吗

你好，请问怎样能生成带中文标题的二维码

保存到相册是GIF

canvasToTempImage () {
    wepy.canvasToTempFilePath({
      canvasId: 'mycanvas',
      fileType: 'png' //此处已经设置png
    }).then((res) => {
      var tempFilePath = res.tempFilePath
      this.imagePath = tempFilePath
      this.$apply()
    })
  }

生成的二维码保存在相册是GIF格式

请问，有生成二维码以后的回调吗

生成带logo的二维码

想要生成一个带logo的二维码，请问如何生成？

在本地开发环境生成二维码没有问题，在真机上，闪一下就过去了，等一会就又显示出来了

rt