# 微信小程序-二维码生成器
> 本项目用于在微信小程序中生成二维码,也可用于第三方框架Mpvue,Taro等。
## 生成预览
![jsh5css.cn](http://jsh5css.cn/blog/wp-content/uploads/2016/12/20161207143611_73427.png)
* 可支持输入中文文本
## 安装
``` bash
git clone https://github.com/demi520/wxapp-qrcode.git
```
## 使用
1.创建canvas节点,以及设置canvas-id。(可以控制该区域不显示,但是必须要存在)
```html
<canvas style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas"/>
```
2.引入qrcode.js,将`utils/qrcode.js` 文件复制到自己工程里,并引入。
```javascript
// 注意: 这里xxx是你自己的路径
let QR = require("xxxx/qrcode.js") // require方式
import QR from 'xxxx/qrcode.js' // es6的方式
```
3.在js文件中,定义相关的方法,**要注意在data中创建imagePath(最终生成的图片路径),可以将img的src属性绑定imagePath**
```javascript
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,生成二维码
```javascript
createQrCode ('wxapp-qrcode', 'mycanvas', 300, 300)
```
## FAQ
### 自定义组件中不能生成qrcode?
封装方法时: 添加上this, `QR.api.draw(url, canvasId, cavW, cavH, this);` 可参考qrcode.js 768行,*[wx.createCanvasContext](https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html)*
### 如何适配不同屏幕大小的canvas?
可参考 `pages/main/index.js` 中的 `setCanvasSize` 方法。
## Ps
感谢[微信小程序|联盟](http://www.wxapp-union.com/) [@amis](http://www.wxapp-union.com/home.php?mod=space&uid=310)提供的素材和创意;
测试有其他问题请回帖哦,感激!!
微信小程序--二维码生成器.zip
需积分: 1 185 浏览量
2024-01-07
21:06:48
上传
评论
收藏 18KB ZIP 举报
极致人生-010
- 粉丝: 3257
- 资源: 3077
最新资源
- 基于matlab实现本份代码能对图像进行gabor滤波处理,结合指纹方向图以及指纹沟壑频率特性,对指纹图像进行增强.rar
- 基于matlab实现RBM神经网络实现了手写数字体识别的GUI程序.rar
- 基于matlab实现蝙蝠算法优化相关向量机建模对数据进行建模和预测.rar
- 基于matlab实现编写的禁忌搜索算法,解决了TSP问题,对初学者有重要的参考价值.rar
- 基于matlab实现SOH关于IMU进行姿态求解的C代码,里面包含了两套代码,分别是重力约束法求解和梯度下降法求解.rar
- 1_简单电子邮件客户端.zip
- 基于matlab实现powell优化搜索算法,适合于多参数优化且目标函数中不包含参数的情况.rar
- 基于matlab实现PID神经网络前向和反向学习算法的matlab的原程序代码.rar
- 基于matlab实现nsga-2的多目标优化算法,有注解.rar
- AIR-AP1815-K9-ME-8-5-182-0.zipFor 1815 1830 1840 1850 2700 3700
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈