Skip to content
微信小程序--二维码生成器
JavaScript
Branch: master
Clone or download
demi520 Merge pull request #26 from Z-HNAN/readme-branch
Readme branch 完善了一下README
Latest commit 5a840fd Jun 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
pages
utils
.gitattributes 👾 Added .gitattributes & .gitignore files Dec 6, 2016
.gitignore 兼容组件中qrcode的生成 Mar 6, 2018
README.md 完善了README Jun 2, 2019
app.js
app.json 微信小程序 Dec 6, 2016
app.wxss
project.config.json 优化微信新版本出现的一些问题 Nov 24, 2017

README.md

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

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

生成预览

jsh5css.cn

  • 可支持输入中文文本

安装

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方法,绘制二维码图片
  QR.api.draw(content, canvasId, cavW, cavH);
  this.canvasToTempImage(canvasId);
},

//获取临时缓存图片路径,存入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 方法。

You can’t perform that action at this time.