條碼掃描器

GitHub npm crates.io

API 參考 npm crates.io

允許您的行動應用程式使用相機掃描 QR 碼、EAN-13 和其他種類的條碼。

支援平台

此插件需要 Rust 版本至少為 1.77.2

平台	層級	備註
windows
linux
macos
android
ios

設定

安裝 barcode-scanner 插件以開始使用。

自動

使用您的專案套件管理器新增依賴項

npm

npm run tauri add barcode-scanner

yarn

yarn run tauri add barcode-scanner

pnpm

pnpm tauri add barcode-scanner

deno

deno task tauri add barcode-scanner

bun

bun tauri add barcode-scanner

cargo

cargo tauri add barcode-scanner

手動

1. 在 src-tauri 資料夾中執行以下命令，將插件新增至專案 Cargo.toml 中的依賴項

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

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

   src-tauri/src/lib.rs

   #[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 Guest 綁定

   npm

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

   yarn

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

   pnpm

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

   deno

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

   bun

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

組態

在 iOS 上，條碼掃描器插件需要 NSCameraUsageDescription 資訊屬性列表值，該值應描述您的應用程式為何需要使用相機。

在 src-tauri/Info.ios.plist 檔案中，新增以下程式碼片段

src-tauri/Info.ios.plist

<?xml version="1.0" encoding="UTF-8"?>
<!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>

用法

條碼掃描器插件可在 JavaScript 中使用。

import { scan, Format } from '@tauri-apps/plugin-barcode-scanner';
// when using `"withGlobalTauri": true`, you may use
// const { scan, Format } = window.__TAURI__.barcodeScanner;

// `windowed: true` actually sets the webview to transparent
// instead of opening a separate view for the camera
// make sure your user interface is ready to show what is underneath with a transparent element
scan({ windowed: true, formats: [Format.QRCode] });

權限

預設情況下，所有潛在危險的插件命令和範圍都會被封鎖且無法存取。您必須修改 capabilities 組態中的權限才能啟用這些。

請參閱功能概述以取得更多資訊，以及逐步指南以使用插件權限。

src-tauri/capabilities/mobile.json

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

預設權限

此權限集配置預設公開哪些條碼掃描功能。

已授權的權限

它允許所有條碼相關功能。

• allow-cancel
• allow-check-permissions
• allow-open-app-settings
• allow-request-permissions
• allow-scan
• allow-vibrate

權限表

識別碼	描述
barcode-scanner:allow-cancel	啟用 cancel 命令，而無需任何預先設定的範圍。
barcode-scanner:deny-cancel	拒絕 cancel 命令，而無需任何預先設定的範圍。
barcode-scanner:allow-check-permissions	啟用 check_permissions 命令，而無需任何預先設定的範圍。
barcode-scanner:deny-check-permissions	拒絕 check_permissions 命令，而無需任何預先設定的範圍。
barcode-scanner:allow-open-app-settings	啟用 open_app_settings 命令，而無需任何預先設定的範圍。
barcode-scanner:deny-open-app-settings	拒絕 open_app_settings 命令，而無需任何預先設定的範圍。
barcode-scanner:allow-request-permissions	啟用 request_permissions 命令，而無需任何預先設定的範圍。
barcode-scanner:deny-request-permissions	拒絕 request_permissions 命令，而無需任何預先設定的範圍。
barcode-scanner:allow-scan	啟用 scan 命令，而無需任何預先設定的範圍。
barcode-scanner:deny-scan	拒絕 scan 命令，而無需任何預先設定的範圍。
barcode-scanner:allow-vibrate	啟用 vibrate 命令，而無需任何預先設定的範圍。
barcode-scanner:deny-vibrate	拒絕 vibrate 命令，而無需任何預先設定的範圍。