一、通過(guò)引入方式使用總結(jié)（原生或Jquery）

• 不需要依賴任何庫(kù)

• 主要是通過(guò)獲取 DOM 的標(biāo)簽,再通過(guò) HTML5 Canvas 繪制而成,

• 基本用法

  <div id="qrcode"></div>
  <script src="qrcode.js"></script>
  <script type="text/javascript">
    new QRCode(document.getElementById("qrcode"), "http://www.runoob.com");  // 設(shè)置要生成二維碼的鏈接
  </script>
  

• 設(shè)置參數(shù)方式

   var qrcode = new QRCode(document.getElementById("qrcode"), {
     text: 'url',// 二維碼地址
     width: 256,//圖像寬度
     height: 256,//圖像高度
     colorDark : '#000000',//  前景色
     colorLight : '#ffffff',//背景色
     correctLevel : QRCode.CorrectLevel.H//容錯(cuò)級(jí)別可設(shè)置為 QRCode.CorrectLevel.L  QRCode.CorrectLevel.M  QRCode.CorrectLevel.Q  QRCode.CorrectLevel.H
   });
  

• 使用API

  qrcode.clear(); // 清除代碼，僅在不支持 Canvas 的瀏覽器下有效
  qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一個(gè)二維碼，或用于動(dòng)態(tài)生成二維碼
  

Qrcode 庫(kù)及實(shí)例下載
GitHub

二、 模塊導(dǎo)入方式

• 安裝qrcode.js

  npm install qrcode
  

• 引用

  import QRCode from 'qrcode' //引入qrcode
  export default{
    data(){
      return {
     }
    },
  components: {
    QRCode: QRCode //引入 QRCode組件
  },
  methods:{
    useqrcode(url){
      //一、直接生成寫(xiě)法,不轉(zhuǎn)canvas
      let qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 132,  
        height: 132,
        text:url, // 二維碼地址
        colorDark : "#000",
        colorLight : "#fff",
      })
      //二、轉(zhuǎn)canvas寫(xiě)法
      var canvas = document.getElementById('canvas')
      QRCode.toCanvas(canvas, url, function (error) {
        if (error) console.error(error)
        console.log('success!');
      })
    }
  },
  mounted(){
      this.useqrcode('https://www.baidu.com');//調(diào)用生成二維碼的方法
    }
  }
  

• 頁(yè)面部分

  <template>
    <div id="QRCode"> <!-- 保存二維碼的容器 -->
      <div id='qrcode'></div> 
      <canvas id="canvas"></canvas>
    </div>
  </template>
  

三、 使用vue-qriously

• qrcode.js存在長(zhǎng)度限制

• 安裝

  npm install --save vue-qriously
  

• 引入

  // ES6
  import Vue from 'vue'
  import VueQriously from 'vue-qriously'
  Vue.use(VueQriously)
  

• 使用

  <template>
    <div>
      <qriously :value="qrcode" :size="200" />
  </div>
  </template>
  <script>
  export default {
    data() {
    return {
        qrcode: 'www.baidu.com'
     }
   }
  }
  </script>
  

注：在微信內(nèi)置瀏覽器下均可長(zhǎng)按實(shí)現(xiàn)識(shí)別二維碼和保存圖片