vue.js 参数编码解码_一组用于检测和解码QR码的Vue.js组件

vue.js 参数编码解码

vue-qrcode阅读器 (vue-qrcode-reader)

A set of Vue.js components, allowing you to detect and decode QR codes, without leaving the browser.

一组Vue.js组件，使您无需离开浏览器即可检测和解码QR码。

View Demo 查看演示 View Github 查看Github

• :movie_camera: QrcodeStream accesses the device camera and continuously scans incoming frames.

  ：movie_camera： QrcodeStream访问设备相机并连续扫描传入的帧。

• :put_litter_in_its_place: QrcodeDropZone renders to an empty region where you can drag-and-drop images to be decoded.

  ：put_litter_in_its_place： QrcodeDropZone渲染到一个空白区域，您可以在其中拖放要解码的图像。

• :open_file_folder: QrcodeCapture is a classic file upload field, instantly scanning all files you select.

  ：open_file_folder： QrcodeCapture是一个经典的文件上传字段，可立即扫描您选择的所有文件。

All components are responsive. Beyond that, close to zero styling. Make them fit your layout. Usage is simple and straight forward:

所有组件都具有响应能力。 除此之外，几乎零样式。 使它们适合您的布局。 用法很简单明了：

<qrcode-stream @decode="onDecode"></qrcode-stream>

methods: {
  onDecode (decodedString) {
    // ...
  }
}

屏幕截图 (Screenshots)

浏览器支持：chart_with_upwards_trend： (Browser support :chart_with_upwards_trend:)

QrcodeStream (QrcodeStream)

This component fundamentally depends on the Stream API.

该组件从根本上取决于Stream API 。

No	Yes	Yes	Yes¹	Yes²

没有	是	是	是的¹	是²

1. Chrome requires HTTPS or localhost (see Troubleshooting for help)

   Chrome需要HTTPS或localhost (请参阅故障排除以获取帮助)

2. Safari also requires HTTPS even on localhost (see #48). It also won't work in:

   Safari 甚至在localhost上也需要HTTPS(请参阅＃48 )。 它还不适用于：

   • Chrome for iOS, Chrome(适用于iOS) ， Firefox for iOS, ... (see Firefox(适用于iOS) ，...(请参阅#29)＃29 )
   • WkWebView component of native iOS apps
     本机iOS应用程序的WkWebView组件
   • prior to iOS 13.4 (see 在iOS 13.4之前添加到主屏幕(PWA模式)的Web应用程序(请参阅#76)＃76 )

QrcodeDropZone和QrcodeCapture (QrcodeDropZone and QrcodeCapture)

The newest API these components depend on is the FileReader API.

这些组件所依赖的最新API是FileReader API 。

10+	Yes	Yes	Yes	Yes¹

10+	是	是	是	是的¹

1. QrcodeCapture doesn't work in web apps added to home screen (PWA mode) on iOS prior to 11.3 (see this StackOverflow question)

   QrcodeCapture在11.3之前的iOS上添加到主屏幕(PWA模式)的Web应用程序中不起作用(请参阅此StackOverflow问题 )

安装方式：包装： (Installation :package:)

模块导入 (Module import)

Run:

跑：

npm install vue-qrcode-reader

Either import the components independantly for local registration:

可以独立导入组件以进行本地注册：

import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'

const MyComponent = {

  components: {
    QrcodeStream,
    QrcodeDropZone,
    QrcodeCapture
  },

  // ...
))

Or register all of them globally right away:

或立即在全球范围内注册所有这些：

import Vue from "vue";
import VueQrcodeReader from "vue-qrcode-reader";

Vue.use(VueQrcodeReader);

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

import️导入软件包时包含一个css文件。 您可能需要设置捆绑程序才能将CSS嵌入到页面中。

经典导入 (Classic import)

Vue itself must be included first. Then add the following CSS and JS file:

Vue本身必须首先包含在内。 然后添加以下CSS和JS文件：

• <link href="vue-qrcode-reader.css" rel="stylesheet">

  <link href=" vue-qrcode-reader.css " rel="stylesheet">

• <script src="vue-qrcode-reader.browser.js"></script>

  <script src=" vue-qrcode-reader.browser.js "></script>

All components are automatically registered globally. Use kebab-case to reference them in your templates:

所有组件都将在全局自动注册。 使用kebab-case在您的模板中引用它们：

<qrcode-stream></qrcode-stream>
<qrcode-drop-zone></qrcode-drop-zone>
<qrcode-capture></qrcode-capture>

故障排除：zap： (Troubleshooting :zap:)

使用QrcodeStream时看不到相机。 (I don't see the camera when using QrcodeStream.)

• Check if it works on the demo page. Especially the Decode All demo, since it renders error messages. If you see errors, consult the docs to understand their meaning.

  检查它是否在演示页面上有效。 尤其是“ 全部解码”演示，因为它会呈现错误消息。 如果看到错误，请查阅文档以了解其含义。

  • init event to investigate errors.init事件以调查错误。
  • The demo doesn't work: Carefully review the Browser Support section above. Maybe your device is just not supported.
    该演示不起作用：请仔细查看上面的“浏览器支持”部分。 也许不支持您的设备。

我在本地主机上运行开发服务器。 如何在没有HTTPS的移动设备上进行测试？ (I'm running a dev server on localhost. How to test on my mobile device without HTTPS?)

• If your setup is Desktop Chrome + Android Chrome, use Remote Debugging which allows your Android device to access your local server as localhost.

  如果您的设置是台式机Chrome + Android Chrome，请使用远程调试 ，该调试允许您的Android设备作为localhost访问本地服务器 。

• Otherwise use a reverse proxy like ngrok or serveo to temporarily make your local server publicly available with HTTPS.

  否则，请使用ngrok或Servo之类的反向代理使您的本地服务器通过HTTPS暂时公开可用。

• There are also loads of serverless/static hosting services that have HTTPS enabled by default and where you can deploy your web app for free (e.g. GitHub Pages, GitLab Pages, Google Firebase, Netlify, Heroku, ZEIT Now, ...)

  也有许多无服务器/静态托管服务，默认情况下启用了HTTPS，您可以在其中免费部署Web应用程序(例如GitHub Pages ， GitLab Pages ， Google Firebase ， Netlify ， Heroku ， ZEIT Now等)。

未检测到我的某些QR码。 (Some of my QR codes are not being detected.)

• Make sure, there is some white border around the QR code.

  确保QR码周围有一些白色边框。

• Color inverted QR codes are not supported (dark background, light foreground).

  不支持彩色反转QR码(深色背景，浅色前景)。

• Model 1 QR codes are also not supported.

  还不支持Model 1 QR码 。

翻译自: https://vuejsexamples.com/a-set-of-vue-js-components-for-detecting-and-decoding-qr-codes/

vue.js 参数编码解码