vue 生成 二维码 qrCode 插件 使用 方法

首先安装方法:(--save 参数会改变package.json 推荐使用 下次直接install就行了)

 
npm install --save qrcode

 然后项目使用:

import QRCode from 'qrcode' 

 

 

然后使用方法:

html 使用

<!-- index.html -->
<html>
  <body>
    <canvas id="canvas"></canvas>
    <script src="bundle.js"></script> 
  </body>
</html>

 

// index.js -> bundle.js
var QRCode = require('qrcode')
var canvas = document.getElementById('canvas')
 
QRCode.toCanvas(canvas, '二维码内容xxxxxx', function (error) {
  if (error) console.error(error)
  console.log('success!');
})

 

NodeJS

var QRCode = require('qrcode')
 
QRCode.toDataURL('二维码内容xxxxxx!', function (err, url) { console.log(url) })

 

ES6/ES7

1.异步方式

import QRCode from 'qrcode'
 
// With promises
QRCode.toDataURL('二维码内容xxxxxx!') .then(url => { console.log(url) }) .catch(err => { console.error(err) })

 

2.同步方式

// With async/await
let text = 'xxxxxxxx';

const generateQR = async text => {
  try {
    console.log(await QRCode.toDataURL(text))
  } catch (err) {
    console.error(err)
  }
}

 

 

 

 

 

 

 

 

posted @ 2019-05-30 22:44  Human_nature  阅读(2293)  评论(0编辑  收藏  举报