手机扫码+生成二维码

手机生成二维码

安装npm地址

npm install  qrcodejs2 --save

按需引入使用
vue文件

<template><div><van-button type="primary" @click="generateQr">生成二维码</van-button><div id="qrcode"></div></div>
</template><script>
import QRCode from "qrcodejs2";
export default {components: { QRCode },data() {return {link: "https://baidu.com",};},methods: {generateQr() {this.qrcode();},qrcode() {let that = this;let qrcode = new QRCode("qrcode", {width: 124,height: 124, // 高度text: this.link, // 二维码内容// render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）// background: '#f0f',   // 背景色// foreground: '#ff0'    // 前景色});},},
};
</script><style>
</style>

扫码

如果真机上可以弹出使用摄像机权限，但是扫码后没有反应，就是版本问题，ios支持14.3以上，安卓的浏览器限制，看下图2
api地址：https://gruhn.github.io/vue-qrcode-reader/api/QrcodeStream.html#browser-support

推荐一个好用的网站：https://caniuse.com/stream

扫码npm地址

安装
使用
下面是vue文件

<template><div><van-nav-bar title="首页" right-text="菜单" right-icon="bars"><template #right><van-icon name="bars" size="18" @click="menuShow" /></template></van-nav-bar><van-swipe :autoplay="3000"><van-swipe-item v-for="(image, index) in images" :key="index"><img v-lazy="image" /></van-swipe-item></van-swipe><nav-bar v-if="nshow"></nav-bar><van-grid><van-grid-item icon="photo-o" text="人员管理" @click="perManage" /><van-grid-item icon="photo-o" text="人员录入" @click="perAdd" /><van-grid-item icon="photo-o" text="违规上报" @click="perViolation" /><van-grid-item icon="photo-o" text="扫一扫" /><!-- <van-grid-item icon="photo-o" text="生成二维码" @click="qrcode" /> --></van-grid><qrcode-stream @decode="onDecode"> </qrcode-stream> <div><p class="error">{{ error }}</p><p class="decode-result">Last result: <b>{{ result }}</b></p><qrcode-stream @decode="onDecode" @init="onInit" /></div></div>
</template>
<script>
import NavBar from "./common/navBar";
import { QrcodeStream } from "vue-qrcode-reader";
import { Lazyload } from 'vant';
import Vue from 'vue';
Vue.use(Lazyload);
export default {name: "",data() {return {nshow: false,userInfo: "",result: "",error: "",navShow: false,images: ['https://img01.yzcdn.cn/vant/apple-1.jpg','https://img01.yzcdn.cn/vant/apple-2.jpg',],};},mounted() {this.title = this.$route.meta.title;this.isleftarrow = this.$route.meta.isleftarrow;},components: {QrcodeStream,NavBar,},methods: {menuShow() {!this.navShow;},// 扫码方法开始onDecode(result) {this.result = result;window.location.href = this.result;},async onInit(promise) {try {await promise;} catch (error) {if (error.name === "NotAllowedError") {this.error = "ERROR: you need to grant camera access permisson";} else if (error.name === "NotFoundError") {this.error = "ERROR: no camera on this device";} else if (error.name === "NotSupportedError") {this.error = "ERROR: secure context required (HTTPS, localhost)";} else if (error.name === "NotReadableError") {this.error = "ERROR: is the camera already in use?";} else if (error.name === "OverconstrainedError") {this.error = "ERROR: installed cameras are not suitable";} else if (error.name === "StreamApiNotSupportedError") {this.error = "ERROR: Stream API is not supported in this browser";}}},// 扫码方法结束// 人员录入qrcode() {this.$router.push({path: "/personnel/qrcode",});},// 人员管理perManage() {this.$router.push({path: "/personnel/perManage",});},// 人员录入perAdd() {this.$router.push({path: "/personnel/perAdd",});},// 违规上报perViolation() {this.$router.push({path: "/personnel/perViolation",});},exit() {//销毁localStorage.clear();this.$router.push({path: "/login",});},},
};
</script>
<style scoped>
.error {font-weight: bold;color: red;
}
.van-swipe-item{width: 80vw;
}
.van-swipe-item img{width: 100%;
}
</style>

手机扫码+生成二维码相关推荐

Android扫一扫和生成二维码（使用华为ScanKit）
本文主要讲如何使用华为统一扫码scan Kit进行扫一扫以及生成二维码, 有兴趣的可以看一下华为扫描和Zxing扫描的区别使用步骤 1.在全局的build.gradle文件里添加华为maven仓库 ...
Android用Zxing扫二维码/生成二维码功能
新年已过,一切恢复真正常,新的一年给自己几句指引: 光努力还不行,方向很重要. 总是想着最坏的结果,就会让人失去改变的勇气. 你当然有权利选择自己的人生--但只有在你真正强大后,逆行的阻力才会降到最小 ...
条形码、二维码扫一扫和生成二维码采用ZXing3.0开源库在android studio中实现
在开始之前先给各位上个运行效果图二维码QRcode全称Quick Response Code 通过在一个矩形区域内使用黑白像素来进行编码高纠错性.高可用性.高识别性四周面有3个大的方框和一个小的 ...
android zxing扫码生成二维码
zxing 实现生成二维码,扫码 demo:https://download.csdn.net/download/chengtaoyan/11170917
iOS中扫描二维码/生成二维码详解
最近大家总是问我有没有关于二维码的demo,为了满足大家的需求,特此研究了一番,希望能帮到大家! 指示根视图: ? 1 self.window.rootViewController = [[UINav ...
【Unity】在Unity中实现扫描二维码生成二维码功能
在Unity中使用二维码扫描功能需要我们在Unty中导入扫描库下载地址:https://github.com/micjahn/ZXing.Net/releases 然后编写扫描脚本: 先在脚本上添加 ...
iOS-长按识别二维码/生成二维码/扫描二维码
参考:http://www.jianshu.com/p/997cec333822 参考:https://github.com/nglszs/BCQRcode 方式一:长按识别二维码 #import & ...
扫描二维码生成二维码
1.导入依赖 allprojects {repositories {google()jcenter()maven {url 'https://jitpack.io'}} } implementatio ...
HTML5实现扫描识别二维码/生成二维码
扫描识别二维码思路: 1. 操作摄像头,获取图片.HTML5 WEBRTC的navigator.getUserMedia方法去实时获取摄像头资源. 2. 利用canvas使用相关算法分析图片识别图 ...

手机扫码+生成二维码

手机生成二维码

扫码

手机扫码+生成二维码相关推荐

最新文章

热门文章