H5-生成二维码
<div class="poster-qr">
<div class="qrWrapper">
<!-- 放置二维码的容器 -->
<div id="qrcode" ref="qrcode" class="qrcode"/>
</div>
<div class="qrDesc">长按扫描二维码领取</div>
</div>
import QRCode from 'qrcodejs2'
export default {
name: 'SharePoster',
components: { QRCode },
data() {
return {}
},
mounted() {
this.$nextTick(() => {
this.qrcode('http://www.baidu.com') // 二维码的内容,由后端返回链接
})
},
methods: {
// 生成二维码
qrcode(url) {
new QRCode(window.document.getElementById('qrcode'), {
width: window.document.getElementById('qrcode').offsetWidth,
height: window.document.getElementById('qrcode').offsetHeight,
text: url,
colorDark: '#000',
colorLight: '#fff',
correctLevel: QRCode.CorrectLevel.H
})
}
}
H5-生成二维码的更多相关文章
- H5生成二维码
要用H5生成二维码: 1.引入js库,可自行点击链接复制使用 <script type="text/javascript" src="http://static.r ...
- h5开发app之在线生成二维码
h5通过jquery和qrcode在线生成二维码 首先我们需要下载一个qrcode.js文件,然后依次引入jquery和qrcode文件. 1.创建一个输入框以便做演示使用: <input id ...
- 在UniApp的H5项目中,生成二维码和扫描二维码的操作处理
在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作.二维码的生成,使用了JS文件wea ...
- Python 创建本地服务器环境生成二维码
一. 需求 公司要做一个H5手机端适配页面,因技术问题所以H5是外包的,每次前端给我们源码,我们把源码传到服务器让其他人访问看是否存在bug,这个不是很麻烦吗?有人说,可以让前端在他们的服务器上先托管 ...
- HTML5实现扫描识别二维码/生成二维码
扫描识别二维码 思路: 1. 操作摄像头,获取图片.HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源. 2. 利用canvas使用相关算法分析图片识别图 ...
- JavaScript生成二维码图片
1.引入一个二维码工具的js文件,同时需要引入jquery文件 下面是jquery.qrcode.min.js文件内容: (function(r){r.fn.qrcode=function(h){va ...
- jquery生成二维码并实现图片下载
1.引入jquery的两个js文件 <script src="../scripts/erweima/jquery-1.10.2.min.js"></script& ...
- js 生成二维码图片
1.用纯JavaScript实现的微信二维码图片生成器 QRCode.js是javascript实现二维码(QRCode)制作生成库. QRCode.js有着良好的跨浏览器兼容性(高版本使用HTML5 ...
- qrCode生成二维码图片
QRCode.js 是一个用于生成二维码图片的插件. 1.文件脚本 var QRCode;!function(){function a(a){this.mode=c.MODE_8BIT_BYTE,th ...
- Javascript生成二维码(QR)
网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器去做,感觉对不住服务器,尤其是对于大流量的网 ...
随机推荐
- Linux 三剑客常用命令
shell三剑客===================================================grep===================================== ...
- 项目实训DAY7
今天与昨天一样,查论文,并美化了一下功能界面的样式.
- ARP协议 路由器原理
ARP协议 路由器原理 1 广播与广播域 广播:将广播地址作为目的地址的数据帧 广播域:网络中能够接收到同一个广播所有节点的集合(在这里广播域越小越好) 交换机控制不了广播 路由器可以控制广播 ...
- 2020ccpc威海C.Rencontre题解(树形dp)
题目大意:给定一棵带边权树,给三份点的集合U1,U2,U3,求0.5*(E(dis(u1,u2))+E(dis(u1,u3))+E(dis(u2,u3))). 即,我们需要维护两份点的所有距离和.显然 ...
- 【项目记录】1:一些没有一次安装成功地Python模块
记录一下,下次查找方便. 1.PIL包 PIL名称已经换成了Pillow 所以使用: pip3 install pil 会报错. 正确方法是: pip3 install pillow 2.win32c ...
- SSM PUT请求导致的400,415,500问题
最近在尝试用PUT方法的请求时一直产生400,415,500错误,弄了半天(真的是半天),尝试了各种办法,现在终于解决了,为了防止忘记,在此记录下 下面是一步步解决的步骤.(还有许多我略过了)如果只想 ...
- SpringBoot - Lombok使用详解1(基本介绍、安装配置、var和val)
我们创建 POJO 类时,经常需要先写属性,然后手写或者自动生成 get 和 set 方法,然后还要重写 toString 方法....一系列操作下来,这个 POJO 类便会产生太多的样板式代码. 这 ...
- (五).JavaScript的函数
1. 函数 1.1 函数基础简介 函数介绍 函数:具有特定功能的代码块 本质:一种对象数据类型 功能:1. 代码复用 2. 项目模块化 函数组成(两者必须同时存在): 1. 函数定义 2. 函数调用 ...
- 树莓派3B+ wifi设置
环境: 硬件:树莓派 3b+ 固件:2018-04-18-raspbian-stretch.img 一.树莓派配置 1.1.wifi配置方法一(已测试,ok) 参考: https://www.cnbl ...
- Spyglass CDC工具使用(二)
最近一直在搞CDC (clock domain crossing) 方面的事情,现在就CDC的一些知识点进行总结. 做CDC检查使用的是Spyglass工具.以下内容转载自:Spyglass检查之CD ...