vue做app手机扫二维码出不来

如果你想要使用 Vue 构建一个支持二维码扫码功能的手机应用，可能会遇到无法扫码的问题。这篇文章将会详细地介绍造成这种情况的原因以及解决办法。

## 问题原因

在使用 Vue 构建的手机应用中，如果你希望用户可以通过扫描二维码来进入应用或者某个页面，一般会使用 Vue QR Code 这个库来生成二维码。不过，有一些用户在尝试使用这个功能时发现，扫描二维码的时候，会出现无法识别的情况。

这种问题的原因是因为移动设备的浏览器对 QR Code 标识符的解析方式不同于桌面浏览器，而且不同的浏览器版本可能也存在差异。通常情况下，二维码是通过浏览器的 Canvas 元素来绘制出来并显示在页面上的。而移动设备浏览器中的 Canvas 对应的是系统原生的 Webview，这也是导致无法扫码的一个常见原因。

具体来说，这种情况可能是由于以下原因造成的：

1. Canvas 绘制出的二维码尺寸过小，无法被扫描。

2. 手机浏览器对 Canvas 元素的支持不够完善，无法正常显示二维码。

3. Canvas 绘制出的二维码时没有进行正确的比例缩放处理，导致扫码器无法识别。

## 解决办法

遇到无法扫描二维码的问题时，需要采取相应的解决措施来解决。下面简要介绍几种可行的方案。

### 方案一：通过 CSS 来放大二维码

在 HTML 文件中添加以下代码，用于放大已经生成的二维码：

```css

/* 二维码放大 */

canvas{

transform: scale(2); /* 这里放大了2倍 */

transform-origin: left top;

}

```

此时你可以调整 `scale()` 函数的值，使得二维码能够更加清晰的展示在页面上。

不过需要注意的是，放大二维码有可能导致生成的图片模糊不清，这种情况下用户扫描二维码的准确性以及速度可能会受到影响。因此，建议使用这种方式时需自行考虑具体情况。

### 方案二：使用第三方库

除了使用 Vue QR Code，你也可以考虑使用其他的第三方库来生成二维码。例如，可以使用 `qrcodejs2` 这个库来生成二维码。相比于 Vue QR Code，`qrcodejs2` 更加轻量级，生成的二维码也比较清晰，放大后不会失真。

① 在终端中使用命令进行安装

```

npm install --save qrcodejs2

```

② 在 Vue 文件中引入

```javascript

import QRCode from 'qrcodejs2';

```

③ 在 `mounted` 钩子函数中生成二维码

```javascript

mounted() {

let qrcode = new QRCode(this.$refs.qrcode, {

text: 'https://github.com',

width: 200,

height: 200,

colorDark : '#000000',

colorLight : '#ffffff',

correctLevel : QRCode.CorrectLevel.H

});

}

```

### 方案三：使用 canvas-to-blob 插件

最后一个解决办法是采用 `canvas-to-blob` 这个库来生成二维码。这个库是一个将 Canvas 元素转换为 Blob 对象的小型库，可以将 Canvas 元素生成的图片转换为可点击的 URL，从而实现链接跳转的功能。

① 安装 canvas-to-blob

```

npm install canvas-to-blob --save

```

② 在 Vue 文件中引入

```javascript

import canvasToBlob from 'canvas-to-blob';

```

③ 代码实现

```javascript

methods: {

createQrCode(){

let qrcode = new QRCode(this.$refs.qrcode, {

text: 'https://github.com',

width: 200,

height: 200,

colorDark : '#000000',

colorLight : '#ffffff',

correctLevel : QRCode.CorrectLevel.H

});

let canvas = this.$refs.qrcode.getElementsByTagName('canvas')[0];

let context = canvas.getContext('2d');

canvas.toBlob(function(blob) {

let image = new Image();

image.src = URL.createObjectURL(blob);

image.onload = function(){

context.drawImage(image, 0, 0);

URL.revokeObjectURL(image.src);

}

});

},

}

```

这种方案效果不错，可以确保扫描二维码的准确性和速度。不过，使用 `canvas-to-blob` 时需要注意其对手机设备性能的限制，可能会导致一些问题。