Tauri 跨端的另一选择

前言

机缘巧合下，最近在github上参与了一个chatgpt的开源项目，欢迎各位大佬点个star，接触到了tauri，重新刷新了我的认知，Tauri 是一个跨平台 GUI 框架，与 Electron 的思想基本类似，刚好由于现在进行的项目需要一个展台模式，展台模式下在退出浏览器时会清除所有缓存、indexDB数据，而鉴于浏览器不能直接读写文件至本地，头脑一热，就想通过tauri直接读写文件至本地，利用该方案替代展台模式

什么是Tauri

Tauri是一个框架，用于为所有主要的桌面平台构建微小的、快得惊人的二进制文件。开发者可以整合任何可以编译成HTML、JS和CSS的前端框架来构建他们的用户界面。应用程序的后端是一个rust来源的二进制文件，有一个前端可以交互的API。- Tauri GitHub

Tauri 与 Electron 对比

优点：

• 打包出来的安装包小
• 启动时间快
• 性能更强
• 更加安全

缺点：

• App后端由rust写（就我这种前端菜鸟而言，写rust代码真的很困难，若项目前后端分离，那也无所谓了）
• 兼容性不如 Electron

开发前准备

Microsoft Visual Studio C++ 生成工具

使用 Visual Studio 生成工具 2022 安装程序，并勾选 “C++ 构建工具” 和 “Windows 10 SDK”。

安装rust

前往 www.rust-lang.org/zh-CN/tools… 来安装 rustup (Rust 安装程序)

引入tauri至已有项目

安装依赖

pnpm add -D @tauri-apps/cli // 脚手架工具
pnpm add @tauri-apps/api // 内置api 可在web项目中使用（若无需要可不添加） 详情见 https://tauri.app/zh-cn/v1/api/js/

初始化

• 执行下述命令会自动生成 src-tauri 目录

yarn tauri init

修改 tauri.conf.json

• identifier 必须修改才能正常运行，不能用生成的

"identifier": "com.xx.xxx",

修改 Cargo.toml

开启控制台等功能

• 开发依赖 [dependencies]

tauri = { version = "1.3.0", features = ["custom-protocol", "devtools", "reqwest-client"] }

解决接口不能使用 http(github issue)

cd .\src-tauri\
cargo install tauri-plugin-localhost portpicker

or

• 开发依赖 [dependencies]

tauri-plugin-localhost = "0.1.0"
portpicker = "0.1"

• main.rs 代码改造

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

// use tauri::Manager;
use tauri::{
    utils::config::AppUrl,
    window::{self, WindowBuilder},
    WindowUrl,
};

fn main() {
    let mut context = tauri::generate_context!();
    let mut builder = tauri::Builder::default();
    let port = portpicker::pick_unused_port().expect("Failed to pick unused port");
    let url = format!("http://localhost:{}", port).parse().unwrap();
    let window_url = WindowUrl::External(url);

    #[cfg(not(dev))]
    {
        // rewrite the config so the IPC is enabled on this URL
        context.config_mut().build.dist_dir = AppUrl::Url(window_url.clone());
        context.config_mut().build.dev_path = AppUrl::Url(window_url.clone());

        builder = builder.plugin(tauri_plugin_localhost::Builder::new(port).build());
    }

    builder
        .setup(|app| {
            #[cfg(debug_assertions)] // only include this code on debug builds
            WindowBuilder::new(app, "main".to_string(), window_url)
                .title("xxx")
                .build()?;
            Ok(())
        })
        .run(context)
        .expect("error while running tauri application");
}

tauri 常用指令

// tauri 设置打包图标
yarn tauri icon 图标位置
// 运行
yarn tauri dev
// 打包
yarn tauri build

利用 tauri 进行文件读写

配置src-tauri 的 tauri.conf.json

• scope 需配置读写路径权限 主要有以下选项

$APPCONFIG, $APPDATA, $APPLOCALDATA, $APPCACHE, $APPLOG,
$AUDIO, $CACHE, $CONFIG, $DATA, $LOCALDATA, $DESKTOP, $DOCUMENT,
$DOWNLOAD, $EXE, $FONT, $HOME, $PICTURE, $PUBLIC, $RUNTIME, $TEMPLATE, 
$VIDEO, $RESOURCE, $APP, $LOG, $TEMP.

  "tauri": {
    "allowlist": {
      "fs": {
        "all": true,
        "readFile": true,
        "writeFile": true,
        "readDir": true,
        "copyFile": true,
        "createDir": true,
        "removeDir": true,
        "removeFile": true,
        "renameFile": true,
        "exists": true,
        "scope": ["$HOME/*"]
      }
    },

前端代码进行文件读写

• 更多api可见官网

import { BaseDirectory, readTextFile, writeTextFile } from '@tauri-apps/api/fs';

try {
  let res = await readTextFile('cns-user.json', {
    dir: BaseDirectory.Home
  });
  let json = JSON.parse(res);
  account = json.account;
  account.remenber = false;
  await writeTextFile(
    'cns-user.json',
    JSON.stringify({ account, list: json.list }),
    { dir: BaseDirectory.Home }
  );
} catch (error) {
  console.log(error);
}