首页 > 其他分享 >Tauri 快速上手

Tauri 快速上手

时间：2024-12-20 20:19:53浏览次数：6  
标签：npm tauri src app greet Tauri 快速

0x01 概述

（1）简介

  • 官网链接：https://tauri.app/

  • Tauri 是一个构建适用于所有主流桌面和移动平台的轻快二进制文件的框架

  • 特点：

    • 安全：基于 Rust 构建，具有内存、线程和类型安全方面的优势
    • 兼容：基于 Web 技术架构，能兼容几乎所有的前端框架
    • 小体积：基于 WebView 渲染，打包后的体积足够小

  • 与 Electron 对比：

    Electron Tauri
    前端引擎 Chromium WebView
    后端集成 通过 NodeJS 的原生模块与第三方库 通过 Rust 语言的系统编程特性
    打包体积 大（主要因为包含了完整的 Chromium 浏览器） 小
    资源占用 高 低

（2）环境配置

以 Windows 11 系统为例

  1. 下载Microsoft C++ 构建工具并安装其中的 “使用 C++ 进行桌面开发”

    • 如果已安装过 Visual Studio 可以通过 Visual Studio Installer 安装

  2. 在 WebView2 Runtime 下载区安装 WebView2

    • WebView 2 已默认安装在 Windows 10（从版本 1803 开始）和更高版本的 Windows 上

  3. 在 Rust 工具下载区根据系统下载 32 位或 64 位的 rustup-init.exe，之后根据官网提示安装并配置 Rust

  4. 参考《NodeJS 与 Express | 博客园-SRIGT》安装 NodeJS 或使用 NVM 安装

（3）创建项目

a. create-tauri-app（推荐）

  1. 在 PowerShell 中，使用命令 irm https://create.tauri.app/ps | iex 获取 create-tauri-app 脚本并执行

  2. 依次填写或选择以下内容：

    1. 项目名称：tauri-app
    2. 项目 ID：com.tauri-app.app
    3. 前端语言：TypeScript / JavaScript
    4. 包管理器：npm
    5. UI 模板：Vanilla
    6. UI 风格：JavaScript

  3. 依次使用如下命令：

    cd tauri-app # 进入项目目录
npm install # 安装依赖
npm run tauri dev # 启动项目

  4. 启动成功后会弹出一个应用程序

b. Tauri CLI

  1. 使用命令 npm create vite@latest 创建以一个基于 Vite 的应用程序
  2. 依次填写或选择以下内容：
    1. 项目名称：tauri-app
    2. 框架：Vanilla
    3. 变体：JavaScript
  3. 使用命令 cd tauri-app 进入项目目录
  4. 使用命令 npm install --save-dev @tauri-apps/cli@latest 安装 Tauri 脚手架
  5. 使用命令 npx tauri init 运行脚手架工具执行初始化
  6. 依次填写或选择以下内容：
    1. 应用名称：tauri-app
    2. 窗口标题：tauri-app
    3. Web 资源目录：.
    4. 调试服务 URL：http://localhost:5173
    5. 前端调试命令：npm run dev
    6. 前端构建命令：npm run build
  7. 使用命令 npx tauri dev 启动项目

（4）目录说明

  • src：前端源码目录
    • assets：资源目录
  • src-tauri：后端源码目录
    • capabilities：应用的功能和权限目录
    • gen：代码生成目录
      • schemas：数据结构和验证目录
    • icons：图标资源目录
    • src：源码目录
    • target：构建输出目录

0x02 前后端交互

在应用中，按 F12 键可以开启调试工具

（1）前端调用后端

  1. 修改 src-tauri\src\lib.rs

    // 后端提供事件
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![greet]) // 注册事件
        .run(tauri::generate_context!())
        .expect("error while running tauri application");

    其中，#[tauri::command] 表示其标记的代码可以被前端调用

  2. 修改 src\main.js

    const { invoke } = window.__TAURI__.core; // 作为 Tauri 核心库的一个方法，能够调用后端提供的代码

let greetInputEl;
let greetMsgEl;

async function greet() {
  greetMsgEl.textContent = await invoke(
    "greet", // 后端提供的方法名称（大小写完全一致）
    { name: greetInputEl.value } // 向后端方法传递参数（通过对象传递，键值与函数参数一一对应）
  );
}

window.addEventListener("DOMContentLoaded", () => {
  greetInputEl = document.querySelector("#greet-input");
  greetMsgEl = document.querySelector("#greet-msg");
  document.querySelector("#greet-form").addEventListener("submit", (e) => {
    e.preventDefault();
    greet();
  });
});

（2）后端调用前端

  1. 修改 src\main.js

    // 添加依赖
use tauri::{AppHandle, Emitter};

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! You've been greeted from Rust!", name)
}

// 新增事件
#[tauri::command]
fn reply(app: AppHandle, name: &str) {
    app // 代表前端的一个指针，不必在前端显式传递这个参数
        .emit( // 用于向前端推送事件
            "my_event", // 事件名称
            format!("hello from rust, {}!", name), // 推送数据内容
        )
        .unwrap() // 用于直接 panic
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![greet, reply]) // 注册事件
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

  2. 修改 src\main.js

    const { invoke } = window.__TAURI__.core;
const { listen } = window.__TAURI__.event; // 作为 Tauri 事件库的一个方法，能够监听后端推送的事件

let greetInputEl;
let greetMsgEl;

listen( // 监听事件
  "my_event", // 事件名称
  (response) => { // 回调函数
    greetMsgEl.textContent = response.payload;
  }
);

async function reply() {
  await invoke("reply", { name: greetInputEl.value });
}

window.addEventListener("DOMContentLoaded", () => {
  greetInputEl = document.querySelector("#greet-input");
  greetMsgEl = document.querySelector("#greet-msg");
  document.querySelector("#greet-form").addEventListener("submit", (e) => {
    e.preventDefault();
    reply();
  });
});

详细调用方法参考官方文档：https://tauri.app/zh-cn/plugin/commands/

0x03 插件

  • 一般使用命令 npm run tauri add [插件名称] 安装指定插件

  • 默认情况下，所有插件命令都被阻止，无法访问

    • 如需访问，则必须在 src-tauri\capabilities\default.json 配置中定义一个权限列表

  • 举例：使用文件系统插件

    1. 使用命令 npm run tauri add fs 安装相关插件

    2. 修改 src\main.js，添加文件写入操作

      const { writeFile, BaseDirectory } = window.__TAURI__.fs;

let greetInputEl;
let greetMsgEl;

async function write() {
  const msg = greetInputEl.value; // 获取输入框的值
  const encoder = new TextEncoder(); // 实例化编码器
  const data = encoder.encode(msg); // 将字符串编码
  await writeFile(
    "file.txt", // 文件名
    data, // 文件内容
    { baseDir: BaseDirectory.Desktop } // 文件保存位置（桌面）
  );
}

window.addEventListener("DOMContentLoaded", () => {
  greetInputEl = document.querySelector("#greet-input");
  greetMsgEl = document.querySelector("#greet-msg");
  document.querySelector("#greet-form").addEventListener("submit", (e) => {
    e.preventDefault();
    write();
  });
});

    3. 修改 src-tauri\capabilities\default.json，添加权限

      {
  // ...
  "permissions": [
    "core:default",
    "opener:default",
    "fs:default",
    "fs:scope-desktop",
    "fs:write-all"
  ]
}

      其中：

      • "fs:default"：安装插件后默认添加
      • "fs:scope-desktop"：添加对桌面操作的权限
      • "fs:write-all"：添加所有文件写入权限

0x04 打包

  1. 使用命令 npm run tauri build 对 Tauri 应用打包
  2. 打包完成后，在 src-tauri\target\release 目录查看打包好的内容

-End-

标签：npm,tauri,src,app,greet,Tauri,快速
From： https://www.cnblogs.com/SRIGT/p/18619926

相关文章

  • 最优雅的算法——快速排序
    快速排序：探索两种流行的方法快速排序，这个听起来有点技术性的术语，实际上是一个既高效又优雅的算法，它能够将一堆混乱的数据快速整理得井井有条。今天，我们将通过一种轻松愉快的方式，一起揭开快速排序的神秘面纱，并探索两种流行的实现方法。话不多说，开始战斗快速排序的魔法：基......
  • 【Unity实用技巧】Transform组件位置快速对齐（编辑器扩展）
    前言在Unity项目开发中，经常需要调整物体的位置。特别是在处理3D模型时，我们可能需要将一个父物体移动到其所有子物体的中心位置或底部中心位置。本文将介绍如何通过Unity编辑器扩展来实现这个功能，让美术同学在摆放模型时更加方便。一、效果演示二、完整代码这里直接上......
  • 快速幂笔记
    快速幂笔记快速幂，可以优化指数计算，将朴素的\(O(n^2)\)的时间复杂度优化到\(O(n\logn)\)原理是，将幂通过二进制拆分，只需要计算拆分后的值，就能组合出完全幂的答案举例如下：有\(a^{14}=a^{1110_{(2)}}=a^{1*2^3}*a^{1*2^2}*a^{1*2^1}*a^{0*2^0}\)又有\(a^{2^i}=a^{2^{i......
  • CopilotKit详解：用GPT-4快速集成AI，实现精准参数归纳与程序执行
    言简意赅的讲解CopilotKit解决的痛点使用AI提升项目体验：深入了解CopilotKit在现代软件开发中，融入AI的能力已经成为许多项目的亮点。然而，如何快速且优雅地实现这种能力，仍然困扰着许多开发者。让AI可以分析并帮助用户操作。今天，我要向大家推荐一个强大的工具：CopilotKit......
  • spacy快速入门
    01.spacy是什么SpaCy是一个基于Python编写的开源自然语言处理库，专为生产环境设计，提供了先进的NLP功能。它基于自然语言处理领域的最新研究，提供了一系列高效且易用的工具，用于文本预处理、文本解析、命名实体识别、词性标注、句法分析和文本分类等任务。SpaCy的设计目标是......
  • 一键生成图片绘制过程 | 大模型发展竟这般快速！
    大家好，这里是白泽，详细演示一个今年7月份由StableDiffusion的ControlNet插件的作者张博士所推出的最新模型——Paints_UNDO。地址https://github.com/lllyasviel/Paints-UNDO简介Paints_UNDO旨在提供人类绘画行为的基础模型，希望未来的人工智能模型可以更好地与人类艺术家......
  • java 快速排序，原理、算法分析、实现细节、优缺点以及一些实际应用场景
    更多资源推荐：http://sj.ysok.net/jydoraemon提取码：JYAM实用优质资源/教程公众号【纪元A梦】 ###快速排序的详细解析探讨快速排序，包括其工作原理、算法分析、实现细节、优缺点以及一些实际应用场景。####1.基本概念快速排序是一种基于分治法的高效排序算法。其基本思想是选......
  • 快速排序与归并排序
    算法竞赛中，往往更注重时间复杂度上的优化，因此在这里介绍两种快速的排序算法。无论是快速排序还是归并排序，他们的思想都是分治归并排序我们给一组数据：95271243111 最终期望输出结果：12345791112现在开始酣畅淋漓的画图分析：当然现在从理论分析到实操还是......
  • 【Unity 低多边形3D 资源包】POLYGON Prototype - Low Poly 3D Art by Synty 专为游戏
    POLYGONPrototype-LowPoly3DArtbySynty是一款由知名工作室SyntyStudios提供的高质量低多边形（LowPoly）3D资源包，专为游戏开发者打造，适用于快速创建原型、概念演示和低多边形风格的游戏项目。它提供了一个全面的低模资产集合，既能满足开发需求，又具有出色的美术表现力......
  • 云开发 AI 实战—基于腾讯云开发 Copilot快速开发陕西家乡小程序实战
    云开发AI实战—基于腾讯云开发Copilot快速开发陕西家乡小程序实战一、背景随着云计算技术的快速发展，云开发平台逐渐成为开发者实现快速应用构建和部署的重要工具。云开发平台不仅降低了开发门槛，还通过提供丰富的API和服务支持，使得开发者可以更加专注于业务逻辑的实现......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99