网页前端知识汇总（三）——网页前端利用二维码插件qrcode生成在线二维码

最近几年二维码的广泛应用，方便了很多行业，如支付宝，微信，小程序扫码之类的，这个在二十年前，想都不敢想这么方便，那时候有书刊编码扫一扫都感觉是高科技了，如今，二维码的广泛应用，生活还是方便了不少！这个得益于移动智能设备的发展

那网页上的二维码是怎么生成的呢？一般很少中小企业自己开发JS库，大部分使用第三方库使用，下面我讲解下我现在在使用的JS库，qrcode.js

首先，在使用之前，你要在网络上下载qrcode.js库文件，网络上很多下载点；下载好后新建一个demo.html文件，引入qrcode.js库文件；

<script type="text/javascript" src="js/qrcode.js"></script>

这个路径是我测试用的路径，你可以根据自己的项目路径自定义，确保路径能够访问该库文件地址

下面就是新建一个div，如下面

<div id="xycms_qrcode"></div>

注意，一定要命名id属性值，这个也是指定生成区域的唯一标识，我命名为xycms_qrcode；

下面我说下生成方法（默认使用CSDN网址作为测试）

方法一：利用默认生成方法

<script>
new QRCode(document.getElementById('xycms_qrcode'), 'https://www.csdn.net/');
</script>

刷新下浏览器地址，是不是二维码就生成好了呢

方法二：自定义生成，根据自己喜好，对二维码颜色，大小自定义设置

<script>
var qrcode = new QRCode('xycms_qrcode', {width: 256,height: 256,colorDark : '#ffffff',colorLight : '#6C3',correctLevel : QRCode.CorrectLevel.H
});
qrcode.makeCode('https://www.csdn.net/');
</script>

这样就生成底色白色，绿色线条的二维码了，替代了默认白底黑条的二维码；比起默认，我自己更倾向于自定义，根据自己的喜好自定义随意调整；

好了，简单的生成二维码技术就介绍到这里了

网页前端知识汇总（三）——网页前端利用二维码插件qrcode生成在线二维码相关推荐

vue/html+qrcode生成付款二维码(前端部分)
vue+qrcode生成付款二维码 1.Vue项目中如何使用qrcode生成付款二维码一.安装qrcode.js 二.新建qrcode.vue组件三.项目中引入组件 2.Html项目中如何使用 1 ...
SLAM前端知识汇总
1.常用特征点汇总 1.1 Fast特征点 <SLAM14讲>中LK光流中用的特征点就是Fast特征点,然后对这些特征点进行光流追踪. 在8.3.2节的LK光流代码,第1帧提取的就是Fas ...
如何学习前端知识？优秀的前端开发工程师应该具备什么条件？
Web前端开发技术主要包括三个要素:html.css和JavaScript! 如何学习前端知识? 我们生活在一个充满规则的宇宙里面.社会秩序按照规则运行,计算机语言几乎全部是规则的集合.计算机前辈们定 ...
GitHub上收集的最全的前端资源汇总（包括前端学习、求职、开发资源）
http://www.imooc.com/article/12645 个人结合github上各位大神分享的资源进行了简单的汇总整理,每一个条目下面都有丰富的资料,是前端学习.工作的好帮手. 项目地址: ...
网页前端知识汇总（四）——网页前端搜索框用get或者post提交方式的区别
GET或者POST提交表单是不是很多人都在使用?其实不管是哪种提交方法,其实最终结果就是获取参数的方法不一样:一般用于表单网页标签form属性里面,可以用于查询,提交网页数据等操作:那这两个提交方法到 ...
网页前端知识汇总（一）——CSS如何为网页图片设置圆角效果
是不是有的没有玩过程序的小伙伴浏览网页时会发现有的图片是圆角的,自己保存到本地却是直角的?其实图片性质没有改变,改变的只是网页显示,用遮罩层(CSS处理)后的显示效果,那这些图片的圆角效果是怎么设置的 ...
前端学习第三弹：利用div+css制作个人简历
尝试用纯html制作简历,但是显得过于死板,参数设置不灵活,由于刚刚接触这一块,从网上找了很多资源,先输出后输入,通过一个具体的例子查缺补漏,这样学起来更有劲头也更具效率. ...
Java 生成在线二维码以Base64返回前端
依赖的jar包主要是Google 的zxing 进行二维码的生成 <dependency><groupId>com.google.zxing</groupId>&l ...
《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章网页设计基础知识...
本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...

网页前端知识汇总（三）——网页前端利用二维码插件qrcode生成在线二维码

网页前端知识汇总（三）——网页前端利用二维码插件qrcode生成在线二维码相关推荐

最新文章

热门文章