3 Barcode Scanner

原文链接: https://tauri.app/plugin/barcode-scanner/

让你的移动应用使用摄像头扫描二维码、EAN-13 以及其他类型的条形码。

支持的平台

设置

自动

使用你的项目包管理器添加依赖：

• npm
• yarn
• pnpm
• deno
• bun
• cargo

1

npm run tauri add barcode-scanner

1

yarn run tauri add barcode-scanner

1

pnpm tauri add barcode-scanner

1

deno task tauri add barcode-scanner

1

bun tauri add barcode-scanner

1

cargo tauri add barcode-scanner

手动

1. 在 src-tauri 文件夹中运行以下命令，把插件加入 Cargo.toml 里的项目依赖：

   1	cargo add tauri-plugin-barcode-scanner --target 'cfg(any(target_os = "android", target_os = "ios"))'

2. 修改 lib.rs 初始化插件：

   1 2 3 4 5 6 7 8 9 10 11

   #[cfg_attr(mobile, tauri::mobile_entry_point)] pub fn run() { tauri::Builder::default() .setup(|app| { #[cfg(mobile)] app.handle().plugin(tauri_plugin_barcode_scanner::init()); Ok(()) }) .run(tauri::generate_context!()) .expect("error while running tauri application"); }

3. 用你偏好的 JavaScript 包管理器安装 JavaScript 端绑定：

• npm
• yarn
• pnpm
• deno
• bun

1

npm install @tauri-apps/plugin-barcode-scanner

1

yarn add @tauri-apps/plugin-barcode-scanner

1

pnpm add @tauri-apps/plugin-barcode-scanner

1

deno add npm:@tauri-apps/plugin-barcode-scanner

1

bun add @tauri-apps/plugin-barcode-scanner

配置

在 iOS 上，barcode scanner 插件需要 NSCameraUsageDescription 信息属性列表值，它应当说明你的应用为什么需要使用摄像头。

在 src-tauri/Info.ios.plist 文件中加入以下片段：

1
2
3
4
5
6
7

<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
	<dict>
		<key>NSCameraUsageDescription</key>
		<string>Read QR codes</string>
	</dict>
</plist>

用法

barcode scanner 插件在 JavaScript 中可用。

1
2
3
4
5
6
7
8

import { scan, Format } from '@tauri-apps/plugin-barcode-scanner';
// 使用 `"withGlobalTauri": true` 时，你可以这样写
// const { scan, Format } = window.__TAURI__.barcodeScanner;

// `windowed: true` 实际上会把 webview 设为透明，
// 而不是为摄像头打开一个独立的视图。
// 请确保你的用户界面已准备好用透明元素展示其下方的内容
scan({ windowed: true, formats: [Format.QRCode] });

权限

默认情况下，所有有潜在危险的插件命令和作用域都被阻止，无法访问。你必须在 capabilities 配置中修改权限才能启用它们。

更多信息请参阅能力概述，以及使用插件权限的分步指南。

1
2
3
4
5
6
7

{
  "$schema": "../gen/schemas/mobile-schema.json",
  "identifier": "mobile-capability",
  "windows": ["main"],
  "platforms": ["iOS", "android"],
  "permissions": ["barcode-scanner:allow-scan", "barcode-scanner:allow-cancel"]
}