3. Tauri 框架常用 API 详解与实用模块介绍

一、前言

使用开源项目,阅读官方文档是一个必不可少的步骤。

其中又尤其是比较新的开源项目,这意味着网上关于它的教程是非常少的,很多问题除了官方文档外,你基本找不到相关的资料。

比如本文将要继续介绍的tauri框架便是如此,虽然它有官方文档,但却非常的简略,甚至有时候你不看其源码都不理解它说的是什么。

而网上与之相关的教程又非常稀少,所以本文带大家速览一下tauri的官方常用API文档。

二、API

虽然大部分时候你完全可以不使用官方提供的js api,而使用自己用rust写的代码,但有现成的自然建议还是能用则用。

而且有些功能除了使用官方提供的api外,你自己也很难实现一个类似功能的函数。

tauri中所有api都是分模块存储的,其中提供了相当多的模块:

image.png

在tauri 2.0版本中,这里的api模块是搭建好tauri开发环境之后就自带、可以直接使用的内置模块。

而下面的其它模块都被抽离出来作为了一个插件,如果你想要使用它们,你都必须通过下面这条命令将模块添加进你的项目中:

npm run tauri add fs

比如这条命令添加的fs模块就是文件系统模块,里面包含了很多现成的文件处理api,无需我们自己去写rust代码,直接将其集成进我们的项目中就可以直接在js代码中调用了。

这些模块的作用我会在后面的文章中对其进行更加详细的介绍,这里主要介绍一下其内置的API组成。

1.app

首先是app子模块,其提供了一系列的软件相关的api,可以直接看右侧的函数名:

image.png

根据这些函数名其实我们就能大致看出它们的作用了:

  • defaultWindowIcon:获取默认窗口图标
  • getName:获取软件名字
  • getTauriVersion:获取tauri版本
  • getVersion:获取软件版本,指的是项目中tauri.conf.json配置文件中的软件版本。
  • hide:mac电脑隐藏程序
  • show:mac电脑显示程序
  • setTheme:设置程序主题

2.core

这个模块是tauri中核心的功能模块,里面的函数都是非常重要的,比如我们用的最多的invoke函数就在这个模块中。

image.png

但并不是所有函数都对我们有用,至少大多数时候,我们只用得到其中的两个函数。

首先是invoke,它被用来调用后端rust函数,这个前面我们已经见识过了。

其次就是这个convertFileSrc函数,如果你想要在你的程序中显示一些本地图片。那么你就需要用到这个函数了。

因为tauri是一个web框架,对于本地路径它是无法直接解析的,除非你事先将所有需要的图片、文件都放在public、src/assets目录下,那么你就可以直接在js代码中引入:

'/img.png' //public目录下,可以用绝对路径引入
'./assets/img.png' //同目录下的app.vue代码文件中以相对路径引入

而如果需要用户动态输入图片进行显示,那么我们就需要用这个函数将本地图片路径转换一下才能使用:

image.png

但这还不够,可能是目前tauri框架还存在一些bug,即使添加了相应的权限实际上也依旧无法导入本地图片。

想要实现导入图片功能,我们就需要自定义assets访问协议(实际上也就是这里convertFileSrc函数的第二个默认参数所使用值):

        .register_uri_scheme_protocol("asset", |_ctx, request| {
            let cleaned_path = percent_encoding::percent_decode_str(&request.uri().path())
                .decode_utf8()
                .unwrap()
                .as_bytes()[1..]
                .to_vec();

            let path_string = String::from_utf8(cleaned_path).unwrap_or_default();
            println!("{}", path_string);
            let path = std::path::Path::new(&path_string);
            match std::fs::read(path) {
                Ok(data) => {
                    let content_type = if let Some(ext) = path.extension() {
                        if let Some(ext) = ext.to_str() {
                            match ext.to_lowercase().as_str() {
                                "jpg" | "jpeg" => "image/jpeg",
                                "png" => "image/png",
                                "gif" => "image/gif",
                                "webp" => "image/webp",
                                "bmp" => "image/bmp",
                                "ico" => "image/x-icon",
                                "svg" => "image/svg+xml",
                                _ => "image/*",
                            }
                        } else {
作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux