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)
}
}
vue 生成 二维码 qrCode 插件 使用 方法的更多相关文章
- VUE 生成二维码插件
原文:https://www.jianshu.com/p/496fd1cbee8d npm install qrcodejs2 --save 页面中引入 dom 结构 JS 方法编写 export d ...
- js生成二维码 qrcode
js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...
- Java生成二维码QRCode.jar
所需jar包:QRCode.jar:http://download.csdn.net/detail/xuxu198899223/7717745 package ewm; import java.awt ...
- php生成二维码的插件phpqrcode
参考网址: http://www.thinkphp.cn/topic/7749.html http://blog.csdn.net/stxyc/article/details/44650971 php ...
- VUE 生成二维码(qrcodejs)
1. 概述 1.1 引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行 ...
- 【C#/WPF】.Net生成二维码QRCode的工具
先马 http://qrcodenet.codeplex.com/ 使用该工具WPF生成二维码的简单例子: 前台XAML准备一个Image控件显示二维码. string qrcodeStr = &qu ...
- vue 生成二维码+截图
链接生成二维码 1.npm安装 npm install --save qrcodejs2 2.引入 import QRCode from 'qrcodejs2' 3.生成二维码 new QRCode( ...
- 微信支付支付宝支付生成二维码的方法(php生成二维码的三种方法)
如果图简单,可以用在线生成 http://pan.baidu.com/share/qrcode?w=150&h=150&url=http://www.xinzhenkj.com 最简单 ...
- 使用PHP生成二维码的两种方法(带logo图像)
一.利用Google API生成二维码 Google提供了较为完善的二维码生成接口,调用API接口很简单,以下是调用代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
随机推荐
- 机器学习之决策树(ID3)算法与Python实现
机器学习之决策树(ID3)算法与Python实现 机器学习中,决策树是一个预测模型:他代表的是对象属性与对象值之间的一种映射关系.树中每个节点表示某个对象,而每个分叉路径则代表的某个可能的属性值,而每 ...
- 【JZOJ3296】【SDOI2013】刺客信条(assassin)
╰( ̄▽ ̄)╭ Description 故事发生在1486 年的意大利,Ezio 原本只是一个文艺复兴时期的贵族,后来因为家族成员受到圣殿骑士的杀害,决心成为一名刺客.最终,凭借着他的努力和出众的天赋 ...
- scala实现定时任务的方法
/** * ScheduledExecutorService是从Java SE5的java.util.concurrent里,做为并发工具类被引进的,这是最理想的定时任务实现方式. * 它有以下好处: ...
- 自学FPGA笔记之 “sublime的使用”
之前用的notepad++,现在新发现一款软件:sublime.调出一整个逻辑块,写代码能快一点,而且常见的always之类的词汇还不易输入错误,并且比较不容易漏掉begin end.现在总结一下自 ...
- GenericServlet vs HttpServlet
1>>>>>>>> Difference between HttpServlet vs Generic Severlet javax.servlet. ...
- python的数据类型和变量
数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定 ...
- API管理的五大规则
http://www.csdn.net/article/2012-12-18/2812929-5-Rules-For-API-Management 1. 设计 开发人员使用API访问各种不同的类,并且 ...
- BZOJ1878 洛谷1972 HH的项链题解
洛谷链接 BZOJ链接 看到这样不用修改的题目,应该佷容易就联想到了离线来处理. 我们发现若将询问按照r来排序,排完后每次对答案有贡献的仅是每个颜色最后出现的位置 我们用next[i]表示i处颜色之前 ...
- 在window.onload中使用setTimeout
window.onload = function(){ function n(i){ alert(1); } setTimeout('n(1)',2000); } 以上代码会报错:n() is not ...
- SQL Server —— 主键和外键
一.定义 1.1.什么是主键和外键 关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录,该属性组就可以成为一个主键. 比如: 学生表(学号,姓名,性别,班级)其中 ...