weapp-qrcode.js 微信小程序生成二维码插件，并保存在相册中_小程序、公众号_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

weapp-qrcode.js 微信小程序生成二维码插件，并保存在相册中

来源：我爱模板网作者：类型：图文教程点击次数：发布时间：2020-03-17 18:50:21

前面，我爱模板网上传了一篇文章：qrcode.js 生成二维码的js插件。这个weapp-qrcode.js其实就是qrcode.js的微信小程序版。它的功能和qrcode.js的功能一模一样，使用方法也差不多：

1、在wxml中加入canvas用来显示二维码，并在二维码下面加个按钮，保存二维码：

`1`	`<canvas` `class="code"` `canvas-id="myQrcode"` `style="background:#fff;width: 640rpx;height: 640rpx;"/>`

`2`	`<view` `class="down"` `bindtap="saveQrcode">保存到手机相册</view>`

2、引入weapp-qrcode：

`1`	`import QRCode from` `'../../../utils/weapp-qrcode.js';`

3、创建二维码

01createQrcode() {
02    var that = this;
03    var codeJson = {
04        id: that.data.id,
05        type: 2,  //1 用户  2商家  3群组  4优惠券
06    }
07    new QRCode('myQrcode', {
08        text: JSON.stringify(codeJson),
09        width: that.createRpx2px(640),
10        height: that.createRpx2px(640),
11        padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
12        correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
13        callback: (res) => {
14            // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
15            that.data.qrcodePath = res.path;
16        }
17    })
18},

4、保存到本地

01// 用户二维码保存到本地相册
02saveQrcode: function () {
03    var that = this;
04    wx.getImageInfo({
05        src: that.data.qrcodePath,
06        success: function (ret) {
07            var path = ret.path;
08            wx.saveImageToPhotosAlbum({
09                filePath: path,
10                success(result) {
11                    if (result.errMsg === 'saveImageToPhotosAlbum:ok') {
12                        wx.showToast({
13                          title: '保存成功',
14                        })
15                    }
16                }
17            })
18        }
19    })
20},

5、将rpx转px。由于二维码的canvas在页面中，显示，为了适应屏幕，采用了rpx作为单位。但是创建二维码new QRCode时，传入的是px，所以，为了传入的尺寸和canvas一样大，需要使用createRpx2px方法，将rpx转为px：

1createRpx2px(rpx) {
2    return wx.getSystemInfoSync().windowWidth / 750 * rpx
3},

下载weapp-qrcode.js