tauri是什么

tauri 是一个用于开发桌面应用程序的框架。它对前端开发者非常友好，可以使用流行的前端技术来开发应用，如next.js，qwik等。

这里才是重点，本人使用tauri开发了一个仅2M大小的微信读书app，欢迎大家试用 📚微信读书app📚

tauri vs electron

功能	tauri	Electron
技术	WebAssembly、HTML、CSS 和 JavaScript	Chromium 和 Node.js
大小	更小	更大
速度	更快	更慢
安全性	更安全	更容易受到攻击
可移植性	更可移植	更不可移植
功能	功能较少	功能丰富
兼容性	与 Web 开发工具兼容	与 Web 开发工具不兼容

安装

pnpm create tauri-app

js调用原生api功能

js读取配置文件

import { readTextFile, BaseDirectory } from '@tauri-apps/api/fs';  
const contents = await readTextFile('app.conf', { dir: BaseDirectory.AppConfig });

js打开确认弹框

import { confirm } from '@tauri-apps/api/dialog';
const confirmed = await confirm('Are you sure?', 'Tauri');

rust进行菜单配置

// Prevents additional console window on Windows in release, DO NOT REMOVE!!
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
use tauri::{api, CustomMenuItem, LogicalSize, Manager, Menu, MenuItem, Size, Submenu};

// 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() {
    let home = CustomMenuItem::new("home".to_string(), "首页");
    let bookshelf = CustomMenuItem::new("bookshelf".to_string(), "我的书架");
    let refresh = CustomMenuItem::new("refresh".to_string(), "刷新");
    let upload = CustomMenuItem::new("upload".to_string(), "上传");
    // 大小调整菜单
    let smallsize = CustomMenuItem::new("smallsize".to_string(), "较小");
    let normalsize = CustomMenuItem::new("normalsize".to_string(), "正常");
    let resizemenu = Submenu::new(
        "调整窗口",
        Menu::new().add_item(smallsize).add_item(normalsize),
    );
    let _optmenu = Submenu::new(
        "操作",
        Menu::new()
            .add_item(refresh)
            .add_submenu(resizemenu)
            .add_native_item(MenuItem::Separator)
            .add_item(home)
            .add_item(bookshelf)
            .add_item(upload),
    );
    let about = CustomMenuItem::new("about".to_string(), "关于");
    let restmenu = Submenu::new("其他", Menu::new().add_item(about));
    let menu = Menu::new()
        .add_native_item(MenuItem::Copy)
        .add_submenu(_optmenu)
        .add_submenu(restmenu);

    tauri::Builder::default()
        .menu(menu)
        .on_menu_event(|event| match event.menu_item_id() {
            "refresh" => {
                let _ = event.window().eval("window.location.reload()");
            }
            "smallsize" => event
                .window()
                .set_size(Size::Logical(LogicalSize {
                    width: 450.0,
                    height: 700.0,
                }))
                .unwrap(),
            "normalsize" => event
                .window()
                .set_size(Size::Logical(LogicalSize {
                    width: 800.0,
                    height: 800.0,
                }))
                .unwrap(),
            "home" => {
                let _ = event
                    .window()
                    .eval("window.location.href='https://weread.qq.com'");
            }
            "bookshelf" => {
                let _ = event
                    .window()
                    .eval("window.location.href='https://weread.qq.com/web/shelf'");
            }

            "upload" => {
                let _ = event
                    .window()
                    .eval("window.location.href='https://weread.qq.com/web/upload'");
            }

            "about" => {
                api::shell::open(
                    &event.window().shell_scope(),
                    "https://github.com/jiangfei5945/weread-app".to_string(),
                    None,
                )
                .unwrap();
            }
            _ => {}
        })
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

总结

tauri还是一个比较新的技术，很多东西还有待完善，尤其是文档和示例，但他的优势还是很明显的，相信随着应用的越来越广泛，tarui会更加完善，未来可期。

参考

tauri官网