微信小程序开发——使用第三方插件生成二维码

2023-11-08 17:21:10

需求场景：

小程序中指定页面需要根据列表数据生成多张二维码。

实现方案：

鉴于需要生成多张二维码，可以将生成二维码的功能封装到组件中，直接在页面列表循环中调用就好了。也可以给组件添加slot，在页面调用时写入需要跟二维码组件绑定在一起进行显示的内容。

技术难点：

微信小程序并没有提供官方二维码生成功能魔抗，所以这个就只能自己去找插件实现了。对于网上的插件，有很大一部分都是根据qrcode.js改进的。

对于插件的选择并不是很顺利，第一次选定了weapp-qrcode这个插件，本来开发测试都好好的，到了同事的华为v10上，就会出现间隔性不显示的问题（两个页面之间切换，有时候会不显示二维码），这个问题已经在git上提了Issues，并被作者标记为bug。

后边又找到另一个插件weapp-qrcode-base64，经反复测试验证，这个插件可以正常使用，已经将这个功能做了个小程序片段，详见：小程序二维码生成组件。

组件代码：

components/qrcode/index.js

// components/myComponent.js
const QR = require(‘./weapp-qrcode.js‘)
const rpx2px = wx.getSystemInfoSync().windowWidth / 750
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    value: String, //二维码内容
    width: String, //二维码宽度（默认长宽相等）
  },
  data: {
    qrcodeURL: ‘‘
  },
  ready: function() {
    var imgData = QR.drawImg(this.data.value, {
      typeNumber: 3,//码点大小 1-40，数字越大，码点越小，二维码会显得越密集
      errorCorrectLevel: ‘H‘,//纠错等级 H等级最高(30%) 简单来说，就是二维码被覆盖了多少仍然能被识别出来 详见qrcode.js
      size: parseInt(rpx2px * this.data.width)
    })
    this.setData({
      qrcodeURL: imgData
    })
  },
  methods: {
    /**
     * 长按保存图片
     */
    save: function() {
      var self = this
      var aa = wx.getFileSystemManager(),
        filePath = wx.env.USER_DATA_PATH + ‘/qrcode_‘ + self.data.value + ‘.png‘;
      //写入临时文件
      aa.writeFile({
        filePath: filePath,
        data: self.data.qrcodeURL.slice(22),
        encoding: ‘base64‘,
        success: res => {
          //保存临时文件到手机相册中去
          wx.saveImageToPhotosAlbum({
            filePath: filePath,
            success: function(res) {
              wx.showToast({
                title: ‘保存成功‘,
              })
            },
            fail: function(err) {
              console.log(err)
            }
          })
          console.log(res)
        },
        fail: err => {
          console.log(err)
        }
      })
    }
  }
})

components/qrcode/index.wxml

<view class=‘qrcode‘>
  <image src="{{qrcodeURL}}" bindlongpress=‘save‘ style="width:{{width}}rpx; height:{{width}}rpx;margin:0 auto;"> </image>
  <slot name="text"></slot>
</view>

页面引用：

pages/index/index.js

Page({
  data: {
    textArr: [
      "11111111",
      "00000000",
      "7539514682492"
    ]
  },
  onLoad: function() {

  }
})

pages/index/index.wxml

<view wx:for="{{textArr}}">
  <qrcode class="iblock" value="{{item}}" width="440">
    <view slot="text">
      {{item}}
    </view>
  </qrcode>
</view>

上边组件可以点击小程序二维码生成组件导入到微信开发者工具中进行查看。

微信小程序开发——使用第三方插件生成二维码

码农公寓

相关文章