文章目录
前言一、Barcode Scanner插件二、使用步骤1.安装插件安装要求解决方案
安装Rust后端插件安装前端插件
2.使用注册插件调用扫码功能
总结
前言
Tauri在Rust圈内成名已久，凭借Rust的可靠性，使用系统原生的Webview构建更小的App 以及开发人员可以灵活的使用各种前端框架而一战成名。
然而，这款年轻的框架却有着大量的问题待解决，在这种情况下，他竟然还出了2.0，想要支持安卓和苹果端，在我看来步子还是跨的挺大的，有一个相当棘手的问题就是文档资料严重跟不上，大量内容需要用户主动去探索，并且出了问题也只能是自己解决。
不论如何，既然选择了Tauri，那就要解决这些麻烦。
首先，本节内容是假设你已经会使用Tauri2.0搭建移动端项目，并且你的App需要添加一个扫码功能，如果你正对此出现的各种离谱问题，比如Rust插件依赖装不上，好不容易装上依赖但是又出现App闪退等问题，那么看这篇文章就对了，哪怕你第一次接触Tauri，学习一下也是好的。
关于Tauri系列的其他内容在后面几天将陆续更新，本节首先发布是因为这个问题比较紧急。后面会从Tauri2.0移动端框架的搭建，调试等方面做点介绍，旨在大家能真实的用上Tauri，它不是个花架子。
一、Barcode Scanner插件
Tauri2.0当前还处于Alpha测试阶段，一些内容尚未发布，且不稳定。但是一些功能已经可以使用了，比如扫码。（还有个Deep Linking后续聊）它的文档是严重落后与开发的，而且开发也极其缓慢，半年就更新出个扫码功能，而且还一堆破Bug，我这里只是将就写写，内容供大家参考。
二、使用步骤
1.安装插件
安装要求
该插件安装分为两部分：
Rust后端插件前端插件
在安装之前，需要明确，检查你的环境是否正确，如果不正确，就会出现插件安装失败，或者插件安装不上。
需要Rust至少1.64版本，直接用最新的1.70+版本，如果你的不够请更新。需要明确你使用的前端包管理工具，支持pnpm，npm和yarn，我使用的是pnpm。
最后一个必须检查的问题，就是你项目使用的tauri版本，不能使用最新的alpha.18版本，会有依赖冲突，表现为shell这个库爆红。
解决方案
将你的Tauri版本改为alpha.13
如果你按照这个方式修改了但是仍然出现闪退问题，就将Cargo.lock改回去，直到能运行不闪退，然后将你的Tauri版本改为alpha.13，重新构建，就可以解决问题了。解决插件装不上和闪退问题。
安装Rust后端插件
github提供的写法是
[dependencies]
tauri-plugin-barcode-scanner = "2.0.0-alpha"
# 使用git源:
tauri-plugin-barcode-scanner = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
如果你真的这么写，那么你必然踩坑。我怀疑这段文字是使用机器生成的，因为所有插件都是这么写的，但是看他的example里却不是这么用的，推荐使用以下写法
[target."cfg(any(target_os = \"android\", target_os = \"ios\"))".dependencies]
tauri-plugin-barcode-scanner = "2.0.0-alpha.2"
注意 不要使用cargo来更新依赖，使用cargo clean以后，使用tauri的命令让他自己跑，就不会报错了。
安装前端插件
此部分内容，只要按照你的包管理工具安装即可，选任意一个
pnpm add @tauri-apps/plugin-barcode-scanner
# or
npm add @tauri-apps/plugin-barcode-scanner
# or
yarn add @tauri-apps/plugin-barcode-scanner
# alternatively with Git:
pnpm add https://github.com/tauri-apps/tauri-plugin-barcode-scanner#v2
# or
npm add https://github.com/tauri-apps/tauri-plugin-barcode-scanner#v2
# or
yarn add https://github.com/tauri-apps/tauri-plugin-barcode-scanner#v2
2.使用
使用如果没有出现问题会相当简单，如果你是按照我给的流程来安装的话。
注册插件
在main.rs中注册插件就行，如果爆红，就看上面
fn main() {
tauri::Builder::default()
.plugin(tauri_plugin_barcode_scanner::init())// 添加这行
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
调用扫码功能
导入包
import { scan } from "@tauri-apps/plugin-barcode-scanner";
然后直接调用即可
scan({
windowed: false,
formats: [Format.QRCode]
}).then(resp => {
console.log(`响应内容: ${resp.content}`);
})
如果你想要更加详细的了解，那么主要注意的有
resp是Scanned类型的，他的定义为
export interface Scanned {
content: string;
format: Format;
bounds: unknown;
}
扫码的类型是可以定义的，也就是Format
export declare enum Format {
QRCode = "QR_CODE",
UPC_A = "UPC_A",
UPC_E = "UPC_E",
EAN8 = "EAN_8",
EAN13 = "EAN_13",
Code39 = "CODE_39",
Code93 = "CODE_93",
Code128 = "CODE_128",
Codabar = "CODABAR",
ITF = "ITF",
Aztec = "AZTEC",
DataMatrix = "DATA_MATRIX",
PDF417 = "PDF_417"
}
摄像头也是可以指定的，相关代码为
export interface ScanOptions {
cameraDirection?: "back" | "front";
formats?: Format[];
windowed?: boolean;
}
总结
以上就是使用tauri2.0实现App扫码功能的使用，如果看完本文还是解决不了你的问题，建议与我取得联系，看个人主页。
精彩文章
发表评论