vue使用qrcodejs2生成二维码,安卓部分手机生成失败

最新推荐文章于 2024-09-13 22:14:44 发布
最新推荐文章于 2024-09-13 22:14:44 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36744553/article/details/109771577
版权

vue使用qrcodejs2生成二维码,安卓手机生成失败

项目中需要使用qrcodejs2生成一个二维码,调试测试都ok,但是部署之后真机访问,始终无法生成二维码,debug之后发现问题如下:

qrcodejs2 内获取安卓版本方法无法兼容9以上的版本

在这里插入图片描述

开发的手机版本号:“Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Mobile Safari/537.36 Edg/86.0.622.69”

真机版本号:“Mozilla/5.0 (Linux; U; Android 10; zh-cn; Mi 10 Build/QKQ1.191117.002) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/71.0.3578.141 Mobile Safari/537.36 XiaoMi/MiuiBrowser/13.2.20”

修改match内匹配规则为:/android ([0-9].?[0-9]?)/i

重新部署测试后正常!

marloues
关注
专栏目录
Vue3 - 解决使用 qrcodejs 生成二维码时报错 TypeError:Cannot read properties of undefined(reading‘_android‘) 解决教程！
王佳斌
07-08 1744
vue3，nuxt3，qrcode，二维码，报错，TypeError:Cannot read properties of undefined(reading‘_android‘)，无法读取未定义的属性（正在读取“_android”），vue3 qrcodejs报错_android是什么意思，如何解决这个问题，详细处理教程，qrcodejs2-fix，改用qrcode.value还是不行，依旧报错，更换版本也不行，浏览器控制台报错，终端报错，生成失败，二维码不显示，白屏，使用qrcodejs2报错TypeEr
qrcodejs华为手机无法识别二维码解决方法
CrazBarry的博客
09-21 5204
前言 现在移动端都很普遍用到生成二维码，一般都是由前端生成，当然也有后台生成返图片给你。 比如生成海报，邀请二维码都有用到。我在项目中遇到的问题就是华为手机长按识别二维码会无法识别，原因大家应该也有搜百度，是应为qrcodejs生成二码后会把canvas display：none但是在华为手机不生效，微信不支持canvas长按识别，我解决的方法就是手动把canvas转图片，隐藏掉自带的那块。直接上代码。 项目用的是VUE，封装的Qrcode的组件 qrCode.vue <template>
uni-app 使用uQRCode在模拟器和安卓中不显示二维码
weixin_45758420的博客
06-17 3595
uniapp使用uQRCode插件开发分享二维码功能，在app端（安卓ios没有试）二维码不出现的问题，使用的是hbuildX3.4.15、插件市场导入的uQRCode是1.0.8
【踩坑】qrcodejs2生成二维码安卓真机不显示（解决安卓机型二维码绘制失败）
weixin_44052136的博客
11-08 4182
前言：本篇文章我们将介绍使用qrcodejs2生成二维码，产生了上述的兼容问题。如果觉得作者写的不错，希望得到您的点赞/收藏/支持，如果有不同意见，欢迎下方评论区留言。 注：问题原因：经过排查，发现qrcodejs2自带生成的base64图片是png格式，然而部分安卓机型存在无法将png图片绘制进canvas的情况，导致base64的png图片绘制失败，无法显示二维码。（但是也不报错） 一、解决方法 1.机型判断 注：因为ios对png、jpg都可以进行绘制，所以可加可不加。 export functio
Vue-QR码组件指南及问题解决方案
gitblog_07044的博客
09-13 287
Vue-QR码组件指南及问题解决方案 vue-qrcode 项目地址: https://gitcode.com/gh_mirrors/vue/vue-qrcode 项目基础...
vue如何使用qrcodejs2 生成二维码弹出框不加载二维码(已解决)
08-11 4312
1.需求 我们有一个项目是给某大会签到入场的项目，整体的需求是嘉宾媒体之类的用户线上注册然后生成线下证照，这里就讲一下碰到的几个问题，记录一下~！ 2.具体过程如下 1.安装 qrcodejs2 npm install qrcodejs2 --save 2.在main.js或者是需要使用的页面引入 import QRCode from 'qrcodejs2' 3.生成二维码的页面 <div id="qrCode" ref="qrCodeDiv"></div> 4.js里
QRCode安卓机生成二维码问题
cu死的边缘疯狂试探
07-23 755
今天发现QRCode.js在安卓机上生成二维码有问题（有的是生成不出来，有的生成位置不对）。 后面查了一下资料，发现有很多朋友都发生过这个问题，所以记录一下，给后人乘凉。 // android 2.x doesn't support Data-URI spec function _getAndroid() { var android = false; var sAgent = navigator.userAgent; if (/android/i.test(sAgent)) { // an
qrcode.js 插件在 webpack 中的 _android 错误解决
beyond__devil的博客
11-26 2465
前端生成二维码时，使用的 qrcode.js 插件 在 webpack 中报错： _android not work Cannot read property '_android' of undefine 解决方法： https://github.com/davidshimjs/qrcodejs/issues/148 https://github.com/davidshimjs/qr...
uniapp生成二维码，兼容rpx适配。
07-21
要确保在不同屏幕尺寸下二维码大小一致，需要在生成二维码时使用`uni.upx2px`进行转换： ```javascript const qrWidth = uni.upx2px(250); // 将250rpx转换为px const qrHeight = uni.upx2px(250); uni.qrcode({...
VUE3使用qrcodejs2报错 Cannot read properties of null (reading ‘appendChild‘) qrcode
nanfang_yinan的博客
07-04 4730
使用qrcodejs2对url生成二维码时，明明引入了qrcodejs2模块，但是还是ts 的报错 解决办法：在根目录下的shims-vue.d.ts文件中加入没有报错了
Vue实现路径转二维码，并用手机扫码下载APP
qq_52445443的博客
08-25 2023
今天，组长让我做一下扫二维码就可以下载APP的一个功能，也参考了网上其他技术大佬的一些想法，就写了这篇文章仅记录自己的学习，最后有完整代码以及效果图。
二维码生成js包,QRCode新旧版本各二种
01-10
各位大大下载完后, 请看里面的注意事项 , 然后本人给各位大大准备了两种版本的jar包.希望多多打赏
qrcodejs2 生成二维码，安卓中微信无法识别
a913396的博客
07-21 1190
https://blog.csdn.net/qq_27127385/article/details/105665406 1、<divid="qrcode"ref="qrcode"style="width:200px;margin:auto;margin-top:18px;"></div> 使用这样的苹果手机可以识别，安卓无法识别，微信社区说 8.0后不支持，胡说。 2、参考之上的链接，可以实现苹果、安卓都可以识别，使用2个div来实现。 3、然后使用v-if...
前端生成二维码以及会出现的问题
m0_61672533的博客
09-13 619
前端生成二维码
uniapp中使用uqrcode 页面绘制二维码无法显示问题
m0_47727127的博客
03-29 876
使用canvas绘制，uqrcode标签中value为二维码的内容。
VUE开发报错之生成二维码（vue-qr插件）
PeterOK的博客
08-04 1万+
近来有幸被安排实现一个生成二维码预览的功能，个人感觉挺好玩，就欣然接受了。首先百度了下，发现vue中生成二维码的插件还不少呢，用的比较火的，有这么两个插件 vue-qart 和 vue-qr ，对比了下，感觉vue-qr的功能实现起来更加简单丰富，所以选择了vue-qr。本人是vue小白，记录下实现过程和遇到的深坑。 效果图如下：   因为是插件，所以实现起来还是比较简单的，固定的套路。...
vue项目中使用qrcode.js生成二维码图片出现的一些问题
呆子小木心的博客
07-28 2867
vue项目中使用qrcode.js生成二维码图片出现的一些问题
【踩坑】qrcodejs生成二维码真机不显示（解决部分机型二维码绘制失败）
Jinkerr的博客
03-03 8406
这个问题我也遇到了，网上搜了很多文章都没有提到，最后自己踩坑解决了 1) 问题描述： 使用qrcode.js生成base64二维码图片并绘制进canvas，然而仅在电脑调试和部分真机都没问题，但是某些真机就会显示不了…… 2) 分析解决： 由于qrcode.js自带生成的base64图片是png格式，部分真机可能无法将png图片绘制进canvas。 解决方法： 将qrcode.js生成的png图片再转成jpg格式，然后再绘制进去canvas就可以解决了 ..................
vue中使用qrcode动态生成二维码，并解决点击按钮多次生成二维码的问题
热门推荐
liuy_1314的博客
10-17 1万+
vue中使用qrcode动态生成二维码，并解决点击按钮多次生成二维码的问题将qrcode.js引入你的页面中在methods里添加函数 网上有很多教程，用npm安装，但我没有成功，所以我用的是引入js文件 将qrcode.js引入你的页面中 我把js文件和页面放在一个文件夹里的 在downLoad.vue里引入jsimport &amp;quot;./qrcode&amp;quot;; 需要注意的是，可能因为vue配置的不同，引入...
vue使用qrcodejs2生成二维码转换为图片
最新发布
10-25
在Vue应用中，你可以使用`vue-qrcode-reader`这个库结合`qrcodejs2`来生成二维码并将其转换为图片。首先，你需要安装这两个依赖： ```bash npm install qrcodejs2 vue-qrcode-reader ``` 然后，在Vue组件里，可以这样做： ```html <template> <div> <button @click="generateQRCode">生成二维码</button> <img v-if="qrImage" :src="qrImage" alt="二维码"> </div> </template> <script> import QRCode from 'qrcodejs2'; import { useQrReader } from 'vue-qrcode-reader'; export default { data() { return { qrImage: null, }; }, methods: { async generateQRCode() { // 创建一个qrcode实例 const qr = new QRCode(document.createElement('canvas')); // 你可以在这里设置二维码的内容 const content = '你要显示的信息'; qr.make(content); // 获取二维码的Base64数据 this.qrImage = qr.toDataURL(); }, }, components: { useQrReader, }, }; </script> ``` 在这个例子中，当你点击“生成二维码”按钮时，会创建一个新的二维码，并将其渲染成图片。注意，这只是一个基本示例，实际应用可能需要处理错误、取消等场景。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值