【调试笔记-2024062-Windows-Tauri-plugin-dialog功能调试】

调试笔记-系列文章目录

调试笔记-20240621-Windows-Tauri-plugin-dialog功能调试

---

---

前言

本文记录在 Windows 环境下调试 Tauri 程序，实现选择文件目录的功能。

实验使用的电脑如下：

CPU：

Intel Core i5 8265U

操作系统：

Microsoft Windows 10  Professional (x64), Version 22H2, Build 19045.4412

---

一、调试环境

---

操作系统：Windows 10 专业版

操作系统详细信息如下：

Microsoft Windows 10  Professional (x64), Version 22H2, Build 19045.4412

---

调试环境

• Windows 系统按照 Tauri 快速指南设置好开发环境。

参考【Tauri 快速上手】

---

调试目标

实现原生界面的文件夹选择的效果。

---

二、调试步骤

搜索相似问题

1、Tauri 的官网有相关接口的示例
https://v2.tauri.app/plugin/dialog/#open-a-file-selector-dialog

操作步骤

安装插件

1、执行以下命令，完成自动安装：

pnpm tauri add dialog

2、手动安装，执行以下命令：

添加 rust crate

cargo add tauri-plugin-dialog

初始化 tauri lib，在 lib.rs 中添加

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {tauri::Builder::default()// Initialize the plugin.plugin(tauri_plugin_dialog::init()).run(tauri::generate_context!()).expect("error while running tauri application");
}

添加 JS/TS 支持

pnpm add @tauri-apps/plugin-dialog

3、设置权限

修改 src-tauri\capabilities\default.json ，添加以下内容：

    "dialog:allow-open"

添加测试页面

Test.vue 文件内容：

<script setup lang="ts">
import { ref } from 'vue';
import { open } from '@tauri-apps/plugin-dialog';
import { appLocalDataDir } from '@tauri-apps/api/path';import { Button } from '@/components/ui/button'const folderPath = ref('');async function getAppLocalDataDir() {await appLocalDataDir().then((res: string) => {folderPath.value = res;})
}async function getOpen() {await open({directory: true,multiple: true,defaultPath: folderPath.value,});
}function handleTestFileChange() {getAppLocalDataDir()getOpen()
}
</script><template><Button type="button" @click="handleTestFileChange">TestFileChange</Button><p>选择的文件夹路径: {{ folderPath }}</p>
</template>

构建并执行

执行命令：

pnpm tauri dev

出现程序界面，测试对话插件。

---

三、应用场景

快速开发原生的桌面工具

---

四、参考资料

1、Tauri 参考手册

2、@tauri-apps/plugin-dialog

3、8 Tips for Creating a Native Look and Feel in Tauri Applications

---

总结

本文记录在 Windows 环境下调试 Tauri 程序，实现选择文件目录的功能。