vue和小程序使用生成二維碼插件(個人筆記）

一狐榔、vue中使用qrcodejs

官方文檔：https://github.com/davidshimjs/qrcodejs

第一步安裝

npm install --save qrcodejs2

第二步項目中引入

import QRCode from "qrcodejs2";

第三步使用

<div class="qrcodeimg">
     <div ref="qrcode"></div>
</div></pre>

  import QRCode from "qrcodejs2";
  export default {
     methods：{
        qrcode() {
             // 在屬性ref="qrcode"的div里邊添加二維碼
             this.$refs.qrcode.innerHTML = '' // 重新生成二維碼之前先清空获雕，否則可能生成多個二維碼
             const qrcode = new QRCode(this.$refs.qrcode, { 
                 width: 120,
                 height: 120, // 高度
                 colorLight: "#ffffff",
                 text: ''// 二維碼內(nèi)容（接口返回的數(shù)字或者什么收捣，如：需要掃碼跳轉(zhuǎn)的鏈接）
              });
         }
    },
    mounted() {
       this.qrcode()
    }
  };

報錯：

image.png

注：1.如出現(xiàn)以上報錯罢艾，把this.$refs獲取元素方法改為document.getElementById();
2.如出現(xiàn)appendChild的報錯，就把this.qrcode()方法寫在setTimeout里面咐蚯。

在列表里實現(xiàn)生成多個二維碼并實現(xiàn)下載

以上方法只能實現(xiàn)生成一個二維碼，要生成多個二維碼春锋，需要動態(tài)的id。

<el-table-column align="center" prop="opration" fixed="right" label="操作" width="230">
    <template scope="{row}">
        <el-popover placement="bottom-end" width="300" trigger="click" :id="'popover'+row.live_id">
             <div>
                 <div class="code tac">
                     <div class="qrcodeimg" style="padding: 30px 90px 20px">
                          <div :ref="'qrcode'+row.live_id"></div>
                     </div>
                     <div>
                           <el-button type="text" @click="download(row)">下載二維碼</el-button>
                      </div>
                 </div>
                 <div class="copy" style="margin-top:20px">
                      <el-input placeholder="請輸入內(nèi)容" style="width:70%" :id="'copyVal'+row.live_id" :value="row.push_flow"></el-input>
                      <el-button class="copyBtn" style="margin-left:10px" type="primary" :data-clipboard-target="'#copyVal'+row.live_id" :id="'copyBtn'+row.live_id" @click="handleCopyCode(row.live_id)">復制</el-button>
                 </div>
             </div>
            <el-button type="text" size="small" slot="reference" class="share" @click="handleShare(row)">分享</el-button>           
       </el-popover>
    </template>
</el-table-column>

// 生成二維碼函數(shù)
qrcode(row) {
    // 在屬性ref="qrcode"的div里邊添加二維碼
    this.$refs['qrcode' + row.live_id].innerHTML = '' // 生成新的二維碼之前先清空，否則會生成多個
    this.$nextTick(() => {
        this.Qrcode = new QRCode(this.$refs['qrcode' + row.live_id], {
           width: 120,
           height: 120, // 高度
           colorLight: "#ffffff",
           text: process.env.VUE_APP_URL + `?live_id=${row.live_id}&live_status=${row.live_status}` // 二維碼內(nèi)容（接口返回的數(shù)字或者什么,'http://www.baidu.com'）
      });
 })
},

// 下載二維碼
download(row) {
     let myCanvas = this.$refs['qrcode' + row.live_id].getElementsByTagName('canvas');
     let a = document.createElement('a')
     a.href = myCanvas[0].toDataURL('image/png');
     a.download = '二維碼';
     a.click()
},

二施禾、小程序中使用weapp-qrcode/weapp-qrcode-base64

微信小程序快速生成二維碼: https://github.com/dillonlfy/weapp-qrcode

1. weapp-qrcode插件

// 首先把weapp-qrcode.js代碼封裝到utils文件夾里面
const QRCode = require('../../utils/weapp-qrcode.js')
const W = wx.getSystemInfoSync().windowWidth;
const rate = 750.0 / W;

// rpx轉(zhuǎn)成px單位搁胆，300rpx 在6s上為 150px
const qrcode_w = 300 / rate;

Page({
    data: {
        ...
        qrcode_w: qrcode_w,
        ...
    },
    onLoad: function (options) {
        qrcode = new QRCode('canvas', {
            // usingIn: this,
            text: "https://github.com/tomfriwel/weapp-qrcode",
            image: '/images/bg.jpg',
            padding: 12,
            width: qrcode_w,
            height: qrcode_w,
            colorDark: "#1CA4FC",
            colorLight: "white",
            correctLevel: QRCode.CorrectLevel.H,
            callback: (res) => {
                // 生成二維碼的臨時文件
                console.log(res.path)
            }
        });
    },
    ...
})

wxml頁面中：

<canvas class='canvas' style="width:{{qrcode_w}}px; height:{{qrcode_w}}px;" canvas-id='canvas' bindlongtap='save'></canvas>

usingIn為可選參數(shù)，詳情清查卡在自定義組件使用時失效及解決思路 #1

text為需要轉(zhuǎn)化為二維碼的字符串攀例；

width和height為繪制出的二維碼長寬顾腊，這里設置為跟canvas同樣的長寬；

colorDark和colorLight為二維碼交替的兩種顏色杂靶；

correctLevel糾錯等級, H等級最高(30%) 簡單來說，就是二維碼被覆蓋了多少仍然能被識別出來吗垮；

如果需要再次生成二維碼，調(diào)用qrcode.makeCode('text you want convert')怯屉。

2.weapp-qrcode-base64插件

地址：https://github.com/Pudon/weapp-qrcode-base64

基于base64編碼輸出二維碼，不依賴canvas锨络。
wxml中
只需要在 wxml 文件中增加個image標簽動態(tài)引用base64編碼即可。

<image src="{{qrcodeURL}"> </image>

js中

const QR = require('./weapp-qrcode.js')
const rpx2px = wx.getSystemInfoSync().windowWidth / 750
Component({
// 此例子是封裝成組件寿谴，寫在properties里面是接收來自父組件的傳值
    properties: {
        value: String, //二維碼內(nèi)容
        width: String, //二維碼寬度（默認長寬相等）
    },
    data: {
        qrcodeURL: ''
    },
    ready: function() {
        // 此方法返回輸出base64編碼
        var imgData = QR.drawImg(this.data.value, {
          typeNumber: 3,//碼點大小 1-40失受，數(shù)字越大，碼點越小拂到，二維碼會顯得越密集
          //糾錯等級 H等級最高(30%) 簡單來說，就是二維碼被覆蓋了多少仍然能被識別出來
          errorCorrectLevel: 'H',
          size: parseInt(rpx2px * this.data.width)
        })
        // 返回輸出base64編碼imgData賦值到image標簽的src中
        this.setData({
          qrcodeURL: imgData
        })
      }
}）

3.weapp-qrcode-canvas-2d插件

https://developers.weixin.qq.com/community/develop/article/doc/000e88e73a415835ed9b46d7956013