tauri2.0 beta学习记录

tauri2.0 beta学习记录

由于tauri 2.0 beta 文档不全，新手前端学习难度相当大，全靠一点点摸索试错。有帮助就点个赞吧。

一、前端js使用插件

示例 使用Process退出应用

1. pnpm tauri add process
2. import { exit, relaunch } from '@tauri-apps/plugin-process'; await exit(0);

文档仅提供如上示例，但是由于版本迭代，需要进行如下操作

正常通过pnpm后，在package.json中会自动添加如下代码

以及，会在src-tauri/Cargo.toml文件中出现以下代码

但是注意，此处有可能不会自动出现，需要手动添加

重点来了，如果直接使用官网代码将会出现如下报错

这是因为官网把这些插件提出来的同时（相比1.0），需要给他们增加权限，才能继续使用

那么，权限怎么增加呢？
看了github上众多用户提的issues，以及官网的回答，终于摸索出来了

如下：

1. 首先，在src-tauri添加文件夹capabilities，在此文件夹内添加json文件，文件名任意
   例如：run-app.json
   
2. 然后添加权限

特别注意：
也需要在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。

二、通过npm命令一键生成icon图标

1、项目根目录中放置一个app-icon.png (图片)文件

2、npm run tauri icon