功能需求: 输入链接或文字,生成二维码
效果演示:
输入网址
使用手机扫码
输入文字
扫描二维码
好,现在我们开始编程,简单介绍一下思路:找到一个免费的二维码生成api接口,进行对接
我用到的是一个叫FREE API的网站,里面有许多免费的接口,初学前端的友友们可以用这个网站进行练习。
网址:https://www.free-api.com/
接下来我们找到二维码生成的接口技术文档,进入官方文档
通过接口文档,我们知道,需要写一个axios请求,然后传入text和size参数
generaterQRcode() {
//生成二维码的axios请求
this.axios({
methods: "get",
url: "https://api.oick.cn/qrcode/api.php",//接口地址
params: {
text:"早上好",//参数,这里是静态的
size:200,
},
}).then((res) => {
console.log('点击成功');
let imgurl=res.data;
this.QRcode.imgurl=imgurl;//图片链接
});
},
但是这样会出现一个问题
后端传回来的是一个图片,而不是一个URL,所以我们需要在请求头加上
responseType: "blob"
然后调用自带的window.URL.createObjectURL()函数来创建URL
let im