微信小程序開發——使用第三方插件生成二維碼

需求場景：

小程序中指定頁面須要根據列表數據生成多張二維碼。

實現方案：

鑑於須要生成多張二維碼，能夠將生成二維碼的功能封裝到組件中，直接在頁面列表循環中調用就行了。也能夠給組件添加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>

上邊組件能夠點擊小程序二維碼生成組件導入到微信開發者工具中進行查看。