nuxt使用QRCode.js 生成二維碼

QRCode.js 是一個用於生成二維碼圖片的插件， 官方文檔 。

我是在nuxt.js（vue官方的服務端渲染方式）項目里使用的QRCode.js；

第一步：看官方文檔；

第二步：下載QRCode.js：http://code.ciaoca.com/javascript/qrcode/version/qrcodejs.zip，

　　　　解壓並將qrcode.min.js文件放到項目的static目錄下（static目錄下的文件不會被編譯），

　　　　比如你的服務器地址：https://www.aaa.com，最終打包到服務器上時，https://www.aaa.com/qrcode.min.js就是你剛才下載的qrcode.min.js

第三步：在nuxt.config.js配置文件里配置head里的script對象：

head:{
  script: 
    [
      {
        src: 'https://www.aaa.com/qrcode.min.js'  
      }
    ]  
}

第四步：在你需要顯示二維碼的位置加一個有id名的標簽，比如：

<div id="qrcode"></div> /*這里id我取名為qrcode，自己隨意取*/

第五步：data里自己隨意定義一個變量，用於配置二維碼：

export default {
  data() {
    return {
      qrcodeObj: {}, // 二維碼配置
    }
  }
}

為什么要在data數據里添加這個變量呢，因為業務需求，這個二維碼的內容可能會變化，要用到QRCode的API：makeCode，這個在第七步會講到。

 

第六步：在mounted里實例化QRCode（nuxt是服務端渲染，盡量少用created，created時，DOM還未生成）：

this.qrcodeObj = new QRCode('qrcode', {
      text: '永遠相信美好的事情即將發生',    
      width: 200,
      height: 200,
      colorDark : '#0f0', // 綠色
      colorLight : '#fff',
      correctLevel : QRCode.CorrectLevel.H
});

效果圖：

 

 第七步：替換二維碼內容，使用makeCode方法：

this.qrcodeObj.makeCode("一切都是最好的安排");

效果圖：

over，更多精彩內容還是移步官方文檔，根據自身業務靈活運用：http://code.ciaoca.com/javascript/qrcode/