前端（Vue）怎么实现二维码生成

功能需求： 输入链接或文字，生成二维码

效果演示：

输入网址

使用手机扫码

输入文字

扫描二维码

好，现在我们开始编程，简单介绍一下思路：找到一个免费的二维码生成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 imgurl = window.URL.createObjectURL(res.data);
this.QRcode.imgurl = imgurl;

完整代码

generaterQRcode() {this.axios({methods: "get",url: "https://api.oick.cn/qrcode/api.php",responseType: "blob",params: {text: "早上好",size:200,},}).then((res) => {console.log('点击成功');let imgurl = window.URL.createObjectURL(res.data);this.QRcode.imgurl = imgurl;});},

然后为了输入文字或链接生成二维码，我们需要写一个输入框，和一个生成按钮

html部分

<div class="qr"><!-- 这里我用到了at-ui框架，自己用html,css写也是可以实现的的 --><at-card style="width: 600px"><h4 slot="title">二维码生成</h4><div slot="extra" class="generatecode"><at-inputv-model="QRcode.inputValue"placeholder="请输入文字或者网页链接生成二维码"class="inputcode"></at-input><!-- 将输入框的值与QRcode.inputValue进行绑定 --><at-button type="primary" class="btn" @click="generaterQRcode">生成</at-button><!-- 点击按钮触发事件 --></div><div class="QRcodeContent"><img :src="QRcode.imgurl" alt="" /><!--显示生成的图片 --><span v-if="QRcode.imgurl">请使用手机扫码</span><!-- 如果QRcode.imgurl有值就显示请用手机扫码的提示 --></div></at-card>
</div>

css部分

<style lang='scss' scoped>
.qr{margin-left: 300px;
}
.generatecode{height: 48px;display: flex;flex-direction: row;align-items: center;.inputcode{width:300px;}.btn{margin-left: 10PX;}
}
.QRcodeContent{display: flex;flex-direction: row;justify-content: space-around;align-items: center;
}

接下来，我们将输入框的值赋给api的text参数

  generaterQRcode() {this.axios({methods: "get",url: "https://api.oick.cn/qrcode/api.php",responseType: "blob",params: {text: this.QRcode.inputValue,size:200,},}).then((res) => {console.log('点击成功');console.log(res);let imgurl = window.URL.createObjectURL(res.data);this.QRcode.imgurl = imgurl;});},

实现效果

完整代码

<template><div class="qr"><at-card style="width: 600px"><h4 slot="title">二维码生成</h4><div slot="extra" class="generatecode"><at-inputv-model="QRcode.inputValue"placeholder="请输入文字或者网页链接生成二维码"class="inputcode"></at-input><at-button type="primary" class="btn" @click="generaterQRcode">生成</at-button></div><div class="QRcodeContent"><img :src="QRcode.imgurl" alt="" /><span v-if="QRcode.imgurl">请使用手机扫码</span></div><!--  --></at-card></div>
</template><script>
export default {name: "",data() {return {QRcode: {imgurl: "",inputValue: "",},};},methods: {generaterQRcode() {this.axios({methods: "get",url: "https://api.oick.cn/qrcode/api.php",responseType: "blob",params: {text: this.QRcode.inputValue,size:200,},}).then((res) => {console.log('点击成功');console.log(res);let imgurl = window.URL.createObjectURL(res.data);this.QRcode.imgurl = imgurl;});},},
};
</script>
<style lang='scss' scoped>
.qr{margin-left: 300px;
}
.generatecode{height: 48px;display: flex;flex-direction: row;align-items: center;.inputcode{width:300px;}.btn{margin-left: 10PX;}
}
.QRcodeContent{display: flex;flex-direction: row;justify-content: space-around;align-items: center;
}
</style>

前端（Vue）怎么实现二维码生成相关推荐

前端vue uni-app基于uQRCode封装简单快速实用全端二维码生成插件
快速实现基于uQRCode封装简单快速实用全端二维码生成插件; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12677 效果图 ...
vue二维码生成插件 - npm安装篇
vue二维码生成插件 - npm安装篇具体使用: 1. 安装: npm install vue-qr --save 2. 引入和声明 //在需要生成二维码的文件中引入比如qrCode.vue imp ...
uniapp中根据URL链接生成二维码（适用所有Javascript运行环境的前端应用）,保存二维码到本地相册。
推荐一款适用所有Javascript运行环境的二维码生成组件. uQRCode是一款基于Javascript环境开发的二维码生成插件,适用所有Javascript运行环境的前端应用和Node.js应用 ...
vue 在线生成二维码二维码生成背景下载
安装引用 3.注入 app.vue 这里只是生成二维码生成二维码 js 这里是需要二维码并且与另一张合成一张image的! 上代码
二维码生成【前端，后端】
二维码生成,可以在后端生成图片,存储在服务器,然后把虚拟路径返回到前端,也可以把数据传输到前端,通过前端框架生成在线二维码,在前端生成二维码不占用内存,但是网络原因会影响显示. 一.后端: Strin ...
vscode中vue项目，QRCode二维码生成
昨天突然说让我写个简单的二维码生成页面 1.首先肯定要打开我们的项目,然后安装QRCode npm install qrcodejs2 2.然后新建一个文件(比如index.vue) 在文件最上面写上 ...
vue二维码生成可自定义logo
代码已上传至github github代码地址:https://github.com/Miofly/mio.git <template xlang="wxml">< ...
vue二维码生成和打印
二维码生成存放二维码 <div id="qrCode" class="qrCode"><div id='code' class=" ...
二维码生成及下载（前端）
最近在项目中用到二维码生成及下载,做个笔记记录下首先引入js文件, 这是在网上找的 <script src="http://cdn.staticfile.org/jquery.qrc ...

前端（Vue）怎么实现二维码生成

前端（Vue）怎么实现二维码生成相关推荐

最新文章

热门文章