tauri2.0 beta学习记录
由于tauri 2.0 beta 文档不全,新手前端学习难度相当大,全靠一点点摸索试错。有帮助就点个赞吧。
一、前端js使用插件
示例 使用Process退出应用
pnpm tauri add process
import { exit, relaunch } from '@tauri-apps/plugin-process'; await exit(0);
文档仅提供如上示例,但是由于版本迭代,需要进行如下操作
正常通过pnpm
后,在package.json
中会自动添加如下代码
以及,会在src-tauri/Cargo.toml
文件中出现以下代码
但是注意,此处有可能不会自动出现,需要手动添加
重点来了,如果直接使用官网代码将会出现如下报错
这是因为官网把这些插件提出来的同时(相比1.0),需要给他们增加权限,才能继续使用
那么,权限怎么增加呢?
看了github
上众多用户提的issues
,以及官网的回答,终于摸索出来了
如下:
- 首先,在
src-tauri
添加文件夹capabilities
,在此文件夹内添加json
文件,文件名任意
例如:run-app.json
- 然后添加权限
特别注意:
也需要在src-tauri/src/lib.rs
文件中添加如下代码
至此,tauri文件代码已经设置完成
使用:
main.ts
import { exit } from "@tauri-apps/plugin-process";
import { eol, platform, family, version, type, arch, locale, exeExtension, hostname } from '@tauri-apps/plugin-os';
window.addEventListener("DOMContentLoaded", () => {
document.querySelector("#layout")?.addEventListener("click", () => {
// e.preventDefault();
exit(0)
});
document.querySelector("#startEnter")?.addEventListener("click", () => {
// e.preventDefault();
startEnter()
});
});
async function startEnter(){
const currentPlatform = await platform();
const currentVersion = await version();
const currentEol = eol();
const currentFamily = await family();
const currentType = await type();
const currentArch = await arch();
const currentLocale = await locale();
const currentExeExtension = await exeExtension();
const currentHostname = await hostname();
console.log('platform', currentPlatform);
console.log('version', currentVersion);
console.log('eol', currentEol);
console.log('family', currentFamily);
console.log('type', currentType);
console.log('arch', currentArch);
console.log('locale', currentLocale);
console.log('exeExtension', currentExeExtension);
console.log('hostname', currentHostname);
window.location.href = "./home/tabHome.html";
}
index.html
<script type="module" src="./src/main.ts" defer></script>
注意:以上示例版本仅为 2024.5.11 @tauri-apps/cli 2.0.0-beta.16 版本使用,以后如果有变化,再做更改;
本次内容记录于2024.5.11。