前言

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.安装插件

安装要求

该插件安装分为两部分:

  1. Rust后端插件
  2. 前端插件

在安装之前,需要明确,检查你的环境是否正确,如果不正确,就会出现插件安装失败,或者插件安装不上。

  1. 需要Rust至少1.64版本,直接用最新的1.70+版本,如果你的不够请更新。
  2. 需要明确你使用的前端包管理工具,支持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}`);
	    })

如果你想要更加详细的了解,那么主要注意的有

  1. resp是Scanned类型的,他的定义为

export interface Scanned {
    content: string;
    format: Format;
    bounds: unknown;
}
  1. 扫码的类型是可以定义的,也就是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"
}
  1. 摄像头也是可以指定的,相关代码为
export interface ScanOptions {
    cameraDirection?: "back" | "front";
    formats?: Format[];
    windowed?: boolean;
}

总结

以上就是使用tauri2.0实现App扫码功能的使用,如果看完本文还是解决不了你的问题,建议与我取得联系,看个人主页。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐