一、前言
使用开源项目,阅读官方文档是一个必不可少的步骤。
其中又尤其是比较新的开源项目,这意味着网上关于它的教程是非常少的,很多问题除了官方文档外,你基本找不到相关的资料。
比如本文将要继续介绍的tauri框架便是如此,虽然它有官方文档,但却非常的简略,甚至有时候你不看其源码都不理解它说的是什么。
而网上与之相关的教程又非常稀少,所以本文带大家速览一下tauri的官方常用API文档。
二、API
虽然大部分时候你完全可以不使用官方提供的js api,而使用自己用rust写的代码,但有现成的自然建议还是能用则用。
而且有些功能除了使用官方提供的api外,你自己也很难实现一个类似功能的函数。
tauri中所有api都是分模块存储的,其中提供了相当多的模块:
在tauri 2.0版本中,这里的api模块是搭建好tauri开发环境之后就自带、可以直接使用的内置模块。
而下面的其它模块都被抽离出来作为了一个插件,如果你想要使用它们,你都必须通过下面这条命令将模块添加进你的项目中:
npm run tauri add fs
比如这条命令添加的fs模块就是文件系统模块,里面包含了很多现成的文件处理api,无需我们自己去写rust代码,直接将其集成进我们的项目中就可以直接在js代码中调用了。
这些模块的作用我会在后面的文章中对其进行更加详细的介绍,这里主要介绍一下其内置的API组成。
1.app
首先是app子模块,其提供了一系列的软件相关的api,可以直接看右侧的函数名:
根据这些函数名其实我们就能大致看出它们的作用了:
- defaultWindowIcon:获取默认窗口图标
- getName:获取软件名字
- getTauriVersion:获取tauri版本
- getVersion:获取软件版本,指的是项目中
tauri.conf.json
配置文件中的软件版本。 - hide:mac电脑隐藏程序
- show:mac电脑显示程序
- setTheme:设置程序主题
2.core
这个模块是tauri中核心的功能模块,里面的函数都是非常重要的,比如我们用的最多的invoke函数就在这个模块中。
但并不是所有函数都对我们有用,至少大多数时候,我们只用得到其中的两个函数。
首先是invoke,它被用来调用后端rust函数,这个前面我们已经见识过了。
其次就是这个convertFileSrc
函数,如果你想要在你的程序中显示一些本地图片。那么你就需要用到这个函数了。
因为tauri是一个web框架,对于本地路径它是无法直接解析的,除非你事先将所有需要的图片、文件都放在public、src/assets目录下,那么你就可以直接在js代码中引入:
'/img.png' //public目录下,可以用绝对路径引入
'./assets/img.png' //同目录下的app.vue代码文件中以相对路径引入
而如果需要用户动态输入图片进行显示,那么我们就需要用这个函数将本地图片路径转换一下才能使用:
但这还不够,可能是目前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 {