支付寶小程序開發——根據字符串生成二維碼

支付寶小程序開發中，如果需要根據字符串生成二維碼，那么可以直接使用 qrcode 插件，你無需引用js，直接使用開發者工具的npm功能就可以了。

一. 安裝插件：

1.開發者工具左側工具欄點擊如圖所示的圖標（npm）：

2.NPM包管理界面，輸入框中輸入 qrcode 並按回車鍵，等待插件安裝完成：

 

二. 引用並使用插件：

//引用插件
const QRCode = require('qrcode');
Page({
  data: {
    imgSrc: ''
  },
  onReady() {
    //根據字符串生成svn格式的二維碼
    let self = this;
    QRCode.toString('13549687961', { type: 'svg' }, function(err, url) {
      let str = 'data:image/svg+xml;base64,' + Buffer(url).toString('base64');
      self.setData({
        imgSrc: str
      })
    });
  }
    ......

頁面引用：

<image src="{{imgSrc}}"  style="width:100%;" mode="aspectFit" />

如此，編譯項目，二維碼生成：

 

 三. 需要生成多個券碼的情況：

如果是根據數組中的某個券碼生成二維碼，那么可以封裝這個方法：

//根據字符串生成二維碼
  getQrcode(str) {
    var qrcode=''
    QRCode.toString(str, { type: 'svg', errorCorrectionLevel: 'H', maskPattern: 4, version: 2 }, function(err, url) {
      qrcode= 'data:image/svg+xml;base64,' + Buffer(url).toString('base64');
    });
    return qrcode
  },

  //將券碼合成二維碼並保存到卡券詳情數據中
  arr.forEach(item=>{
    console.log(item)
    item["qrcode"]=self.getQrcode(item.coupon_number)
  })
  self.setData({
    cardData: arr
  })