nuxt使用QRCode.js 生成二维码

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/

 

posted @ 2019-01-17 16:50 青云码上 阅读( ...) 评论( ...) 编辑 收藏