微信小程序生成二维码

我会带着你远行 2023-08-17 15:54 173阅读 0赞

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

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

## 生成预览 ##

[![jsh5css.cn][]][jsh5css.cn]

*  可支持输入中文文本

## 安装 ##

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

## 使用 ##

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

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) 原链接： https://github.com/demi520/wxapp-qrcode

转载于:https://www.cnblogs.com/wangxi01/p/11389921.html

[jsh5css.cn]: /images/20230810/a8bb3e66430244fd98f430cef77f414a.png