Tauri快速入门如何初始化一个基于react的tauri项目。本文主要内容为tauri的安装、项目初始化和文件结构的简

简介

tauri是个跨平台GUI框架，与electron类似，都属于跨平台解决方案。对比electron，安装包更小，启动速度跟快；但由于tauri是基于rust开发的，相比基于nodejs的electron,学习难度更大，且目前tauri生态方面也远不及electron，大家选型时可按照需求仔细斟酌。

本文主要讲解如何初始化一个基于react的tauri项目。

准备工作

在使用tauri前，必须先安装rust及其他系统依赖。以下我们以Windows系统为例，讲解下安装步骤，其他系统请自行查阅资料.

安装Microsoft Visual Studio C++生成工具

下载Visual Studio 2022 生成工具，安装时勾选C++生成工具和Windows 10 sdk.
安装WebView2

截止目前[2023-08-20]，最新版的Windows 10和Windows11系统已集成WebView2，无需额外安装。

其他版本的系统，请从微软官网下载并运行引导程序进行安装。
安装Rust

最后，在Rust官网下载地址，选择合适的版本[32bit/64bit]安装。安装完成后在终端运行rustc -V命令，如果终端输出rustc 1.x.x...，表示安装成功。

安装完成后，为了使更改生效，必须重启终端；如果还未生效，请尝试重启系统。

项目初始化

初始化tauri项目有多种方式：PowerShell|Cargo|npm...，这里我们以npm为例。

使用npm和初始react均需要nodejs环境，nodejs安装方法在此不再赘述。

运行安装脚本npm create tauri-app@latest,按照提示依次输入或选择:
- Project name：输入项目名称your-project-name
- language：选择TypeScript/JavaScript;
- package manage：选择npm;
- UI template：选择React;
- UI flavor:选择TypeScript;
首次运行该脚本需要下载对应资源，速度可能较慢，请耐心等待或者使用代理下载。

运行项目

# 进入项目目录
`cd your-project-name`
# 安装依赖
`npm install`
# 运行项目
`npm run tauri dev`

最终运行界面如下所示：

构建安装包

构建安装包前，请打开/src-tauri/tauri-conf.json文件，并修改tauri.bundle.identifier属性

的默认值，否则打包会报错。
```
# 构建安装包命令，首次运行需要下载安装资源。
npm run tauri build
```
tauri默认会构建msi和nsis两种方式的安装包。安装包路径为：/src-tauri/target/release/bundle下的msi和nsis目录下。到此成功构建安装包，我们可以很方便地分发我们的程序了。

项目结构说明

初始化后项目结构大致如下：

- dist # 构建打包目标文件夹
- public # 公共&静态资源
- src # 前端源码文件夹(此处为React代码文件夹)
- src-tauri # tauri源码源文件夹
- index.html # html入口文件

src目录

src为前端源码文件夹，此处因为我们使用的是React，所以其结构就是React的项目结构，大致如下：
```
- assets
- App.css
- App.tsx
- style.css
- vite-evn.d.ts
```

src-tauri目录

src-tauri为tauri相关文件目录，其结构如下：

- icons
- src
 - main.rs
- target
...
- tauri.conf.json

再次简要讲解两个文件：main.rs和tauri.conf.json

main.rs

main.rs是Rust程序的入口，文件主要分为二部分，内容如下

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

// Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

第一部分#![cfg_attr]...代码的目的是关闭构建好的应用在 Windows 上运行时一般会出现的控制台窗口。

第二部分fn greet...，定义了两个函数：main和greet，main函数是整个tauri的入口，而greet函数则是rust定义的一个指令。

指令给前端开发提供了其他系统的原生功能，让我们可以在前端项目代码中(如React)调用由Rust编写的函数，常用于处理繁重的任务或系统调用。指令不仅需要定义，还需要在main入口函数中使用 .invoke_handler() 函数及 Generate_handler![] 宏来注册。

此处定义的greet函数，在src/App.tsx中进行了调用，代码如下：

function App(){
    async function greet(){
    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
    setGreetMsg(await invoke("greet", { name }));
    }
}

tauri.conf.json

tauri.conf.json是tauri项目的配置文件，包含应用的各种自定义配置，如应用名称、构建命令、允许的api列表等。具体参见配置页面

这里着重讲解下tauri.allowlist属性配置。当我们刚初始化项目后，tauri属性配置如下所示：

{
    ...
   	"tauri":{
        "allowlist":{
            "all":false,
        	"shell":{
            	"all":false,
            	"Open":true
			}
            ...
        }
    }
}

此时我们是无法发起任何http请求的，且shell也只能执行open操作。以http为例，我们可以做如下更改，让我们可以访问以https://myapi.service.com/users/开头的请求

{
    ...
   	"tauri":{
        "allowlist":{
            "all":false,
        	"shell":{
            	"all":false,
            	"Open":true
			},
            "http":{
                "all":false,
                "request":true,
                "scope":["https://myapi.service.com/users/*"] 
			}
            ...
        }
    }
}

其他http规则请参考HttpAllowListConfig

以上就是本次的全部内容，其他进阶使用，请大家自行查阅官网