原生Vue实现二维码扫一扫

通过使用 vue-qrcode-reader 进行实现，必须是 Https 或 Localhost

文章目录

原生Vue实现二维码扫一扫
vue-qrcode-reader
使用步骤
- 1.引入库(全局引入)
- 2.使用

vue-qrcode-reader

yarn add vue-qrcode-reader --save

使用步骤

1.引入库(全局引入)

代码如下（示例）main.js：

import VueQrcodeReader from "vue-qrcode-reader";
Vue.use(VueQrcodeReader);

2.使用

代码如下（示例）：

<p class="error">{{ error }}</p>
<p class="decode-result">Last result: <b>{{ result }}</b>
</p>
<qrcode-stream @decode="onDecode" @init="onInit" />
{{ result }}

    async onInit(promise) {try {await promise} catch (error) {if (error.name === 'NotAllowedError') {this.error = 'ERROR: you need to grant camera access permission'} 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'} else if (error.name === 'InsecureContextError') {this.error ='ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.'} else {this.error = `ERROR: Camera error (${error.name})`}}},onDecode(result) {this.result = result},

原生Vue实现二维码扫一扫，兼容PC、安卓、IOS相关推荐

vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...
IOS7使用原生API进行二维码和条形码的扫描
使用IOS7原生API进行二维码条形码的扫描 IOS7之前,开发者进行扫码编程时,一般会借助第三方库.常用的是ZBarSDK,IOS7之后,系统的AVMetadataObject类中,为我们提供了解析 ...
vue生成二维码并下载
vue生成二维码图片,这里使用的是qrcode.js 这个插件 1.下载插件 npm install --save qrcodejs2 2.组件内使用 <template> <B ...
【绝对靠谱】Vue生成二维码Qrcode，可插入二维码中心logo图标，可以设置二维码颜色大小等属性
效果代码 npm install vue-qr --save 个别网络用 cnpm install vue-qr --save 安装 <template><div class=&q ...
微信生成带参数的二维码,合成海报,扫码后推送小程序？
微信服务号渠道二维码功能,支持生成带参数二维码,合成海报二维码,微信扫码后推送内容:结合微号帮平台48小时信息推送,推送微信小程序. 带参二维码海报二维码微信扫码后回复 48小时信息推送在微号帮 ...
二维码和app扫码下载
文章目录二维码基本原理二级码生成在线二维码生成 java代码生成二维码前端二维码生成 app扫码下载二维码基本原理参考: https://cli.im/help/48235 二维条码是指在 ...
vue实现二维码批量打印功能
vue实现二维码批量打印功能业务需求:客户需要给每个商品贴上二维码,为了更加高效的完成这项工作需要配合热敏打印机实现批量打印二维码的需求,因为是web项目后端会部署到服务器上,因此只能通过js的方式 ...
利用VUE生成二维码（两种方式）
利用Vue生成二维码 Author:kak vue有两种生成二维码的方式,qrcode.vue-qr(有icon): 1.qrcode npm ``install` `--save qrcodejs2 ...
uni-app二维码、条形码扫码自定义
uni-app二维码.条形码扫码自定义 - DCloud问答 https://github.com/xiaowang1314/uniapp-plugin-collections/blob/master ...

原生Vue实现二维码扫一扫，兼容PC、安卓、IOS

原生Vue实现二维码扫一扫

文章目录

vue-qrcode-reader

使用步骤

1.引入库(全局引入)

2.使用

原生Vue实现二维码扫一扫，兼容PC、安卓、IOS相关推荐

最新文章

热门文章