最近在做一个移动端的项目，里边有一个需求是生成链接并且同时把链接转换成二维码的需求，效果图如下：
涉及到隐私，打个码
因为用的是vue框架，而且是第一次做这中需求的东西，于是果断百度了一波，出来了一堆 什么qrcodejs2各种各样的，一帮人抄来抄去，能不能亲自试完了再抄啊？害我挨个爬坑。这里就给大家分享几个简单易懂用起来得劲的！
如果你的项目需求单纯的只是需要将链接转换成二维码的话，这里比较好用的推荐 "@xkeshi/vue-qrcode"插件;
用法如下：
第一步：安装@xkeshi/vue-qrcode.js包
npm install --save @xkeshi/vue-qrcode //安装到生产环境
第二步：组件中使用
template
<div class="qrcodeBox">
<qrcode :value="xxx" v-if="xxx"></qrcode>
<!-- v-if="xxx"是为了防止链接没获取到显示空白，确保获取到链接后才开始渲染 -->
</div>
script
import Qrcode from "@xkeshi/vue-qrcode"; //引入
data(){
xxx：" " //获取到的链接
}
//注册生成二维码组件
components: {
qrcode: Qrcode
},
methods:{
}
这样是不是很简单？只要xxx的转换，二维码就会自动更新，不需要进行过多的操作。
如果给你的需求不仅仅是生成二维码这么简单，还需要在移动端实现长按保存那么就得换另外一种了，下边为大家来介绍qrcode.js；
QRCode.js
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
基本用法
html
<div id="qrcode"></div>
script
<script type="text/javascript">
// 设置要生成二维码的链接
new QRCode(document.getElementById("qrcode"), "http://www.runoob.com");
</script>
或者使用一些可选参数设置：
var qrcode=new QRCode("qrcode",{
text: "http://baidu.com",
width:120,
height:120,
coloeDark:"#000000",
coloeLight:"#ffffff",
correctLevel:"QRCode.CorrectLevel.H"
})
同样我们可以使用以下方法：
qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码
浏览器支持
支持该库的浏览器有：IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, 等,兼容性强。
那么在vue中怎么使用呢？
第一步:安装qrcode.js包
npm install qrcode --save-dev
第二步:在vue中引入
import QRCode from 'qrcode'；//如果有很多页面使用的话可以在main中引入，挂载在全局；
template
<div id="code">
<canvas id="canvas" ></canvas>
</div>
script
components: {
QRcode:QRCode //注册组件
}
methods:{
getUrl(xxx){
var canvas=document.getElementById("canvas"); //获取到canvas
var code=document.getElementById("code"); //获取到code容器
QRCode.toCanvas(canvas,xxx, error=> {
if (error) console.error(error);
console.log("success!");
});
var image = new Image(); //实例一个img
image.src = canvas.toDataURL("image/png"); //转换成base64格式路径的png图片
image.style.width = "100%"; //设置样式
code.appendChild(image); //添加到code 容器中
canvas.style.display = "none"; //隐藏掉canvas
}
}
mounted(){
var xxx="www.baidu.com";
this.getUrl(xxx);
}
在这里用到的思路其实就是将链接先转换成二维码，然后再用canvas调用toDataURL()的方法得到以base64编码的url,然后用img标签加载出来，至于为什么非得转换成图片呢？这就是利用了图片在移动端浏览器中或者微信中都是有自带的长按响应事件的，当你长按对象是图片的话就会提示你保存图片，下附效果图：
在这里提醒大家，以后从网上找东西的时候一定要自己多去尝试一下，切记!
网友评论