Vue实现路径转二维码，并用手机扫码下载APP

1.安装qrcodejs2插件

2. 页面中引入

3.页面中填充

4.页面中调用

5.完整代码

6.最终效果

今天，组长让我做一下扫二维码就可以下载APP的一个功能，也参考了网上其他技术大佬的一些想法，就写了这篇文章仅记录自己的学习，最后有完整代码以及效果图。

1.安装qrcodejs2插件

npm install qrcodejs2 --save

2. 页面中引入

import QRCode from 'qrcodejs2';components:{QRCode}

3.页面中填充

这里我是点击按钮弹框显示二维码的方式，如果不需要弹框就一个div就可以了，可根据自己的需求来改。

<div><el-button type="text" @click="dialogFormVisible = true">APP下载</el-button><el-dialog title="客户端下载" :visible.sync="dialogFormVisible" @opened="loadRQCode"><div id="jbox-content" class="jbox-content" style="height:311px;overflow:hidden;overflow-y:auto;"><div style="text-align:center;color:red;padding:10px;">注：当前仅支持Android客户端使用<br></div><div id="qrcode" ref="qrcode" style="display: flex;justify-content: center"></div><div style="text-align: center;padding:10px; "><el-button type="primary" @click="dialogFormVisible = false">取 消</el-button></div></div></el-dialog>
</div>

4.页面中调用

data(){return{isLoaded: false,dialogFormVisible: false}
},
methods:{loadRQCode() {if(!this.isLoaded) {request({url: '/appInfo/androidApk',method: 'get'}).then((res)=>{new QRCode('qrcode',{width: 200,height: 200,text: res.msg})this.isLoaded = true;})}}
}

5.完整代码

<template><div><el-button type="text" @click="dialogFormVisible = true">APP下载</el-button><el-dialog title="客户端下载" :visible.sync="dialogFormVisible" @opened="loadRQCode"><div id="jbox-content" class="jbox-content" style="height:311px;overflow:hidden;overflow-y:auto;"><div style="text-align:center;color:red;padding:10px;">注：当前仅支持Android客户端使用<br></div><div id="qrcode" ref="qrcode" style="display: flex;justify-content: center"></div><div style="text-align: center;padding:10px; "><el-button type="primary" @click="dialogFormVisible = false">取 消</el-button></div></div></el-dialog></div>
</template>import request from "@/utils/request";
import QRCode from 'qrcodejs2';export default {name: "",components:{QRCode},data(){return{isLoaded: false,dialogFormVisible: false}},methods:{loadRQCode() {if(!this.isLoaded) {request({url: '/appInfo/androidApk',method: 'get'}).then((res)=>{new QRCode('qrcode',{width: 200,height: 200,text: res.msg})this.isLoaded = true;})}}}

注：
1.以上请求的方式我是后台controller写了一个方法获取application.yml里配置的安卓的下载路径，所以用的request去请求后台的方法从而拿到我要的路径，如果不需要这样，直接写是这样的：
new QRCode('qrcode',{width: 200,height: 200,text: '你要用的下载路径'
})；
2.由于我用的弹框的形式，用的@opened去触发形成二维码的会导致只有弹一次框就要在后面追加一个二维码，所以我用了一个isLoaded的全局变量来判断；
3.这个形成的二维码，如果是微信QQ扫的话，都是默认会提示说要在浏览器打开的，因为它们都无法直接打开网址的。

6.最终效果

以上的学习记录就到这了，拜拜！

说明：学习记录，若有错误，欢迎指正，若有疑问，欢迎评论

Vue实现路径转二维码，并用手机扫码下载APP相关推荐

使用WPS生成二维码，手机扫码访问主机的资源
问题描述如果我们想要使用二维码,包装一个链接,访问目标资源. 在淘宝上可以看到,一些网店提供制作二维码服务.其实我们自己也可以做. 原理是:我们把资源发送给商家,商家拿到后,将资源部署到服务器上,部 ...
如何把文档表格转化成二维码，手机扫码就能看？
伴随信息时代的发展,二维码对人们的生活发生了巨大的改变,在各种场景都可以使用二维码来实现信息的交流与传递. 但是你要知道二维码的存储空间其实非常有限,是无法直接存储文档的,那到底怎么把文档内容生成二维 ...
前端Vue H5生成带二维码的分享海报，实现长按保存到手机相册
前端Vue H5生成带二维码的分享海报,实现长按保存到手机相册前言:关于H5分享海报的需求,经常会遇到,通常就是一个分享的二维码+分享文案,生成一张图片,供用户在手机上长按保存到手机,然后就可以将保 ...
vue使用qrcode生成二维码
vue使用qrcode生成二维码 1. 首先安装qrcode插件 npm i qrcode -S 2.引入使用 import QRCode from 'qrcode' 3.生成二维码 <temp ...
vue+qrcodejs2 动态生成二维码并下载
安装依赖 npm install --save qrcodejs2 vue页面引用 <script>import QRCode from 'qrcodejs2'import axios f ...
vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
vue 根据链接生成二维码(功能实现)
今天同事问我一个问题,在vue项目中想要根据一个链接显示对应的二维码该怎么实现. 我前一段时间,有用apicloud项目生成二维码的功能,但是vue版本的没有处理过.百度后找到一个可行的方案: 大神实 ...
VUE微信H5生成二维码海报保存在本地相册
VUE微信H5生成二维码海报保存在本地相册一.效果二.说明公司需求:宣传海报从后台获取,二维码地址也从后台获得,然后生成一个海报,海报上固定位置放二维码,长按图片可以保存在本地相册(其实前面的需 ...
【Vue 实战】生成二维码
文章目录一.前言二.实战步骤 1. 安装依赖 2. 引入到需要使用的页面三.插件参数 1. value (二维码的值内容) 2. size (二维码元素的大小) 3. render-as 4. ...

Vue实现路径转二维码，并用手机扫码下载APP

1.安装qrcodejs2插件

2. 页面中引入

3.页面中填充

4.页面中调用

5.完整代码

6.最终效果

Vue实现路径转二维码，并用手机扫码下载APP相关推荐

最新文章

热门文章