codecamp

Tauri HTML、CSS 和 JavaScript

此教程将手把手教您如何使用 HTML、CSS 和 JavaScript 构建您的第一款 Tauri 应用。 如果您是网页开发初学者的话,这或许是您最需要的教程。

信息
在我们继续之前,请确保您已经完成了必要的前提条件,以获得一个可用的开发环境。

Tauri 由一个可搭配任何前端来构建桌面应用的框架和 Rust 核心构成。 每个应用均由两个部分组成:

  1. 创建窗口并向其提供原生功能支持的 Rust 二进制文件
  2. 由您选择的前端框架,用于编写窗口内的用户界面

接下来,我们会先搭建好前端框架,然后设置一个Rust工程,最后向你展示这两者之间如何通信。

create-tauri-app
创建一个新项目的最简单方式是使用create-tauri-app实用工具。它为普通的HTML/CSS/JavaScript以及许多前端框架(如React、Svelte和Yew)提供了有见地的模板。
  • Bash
sh <(curl https://create.tauri.app/sh)
  • PowerShell
irm https://create.tauri.app/ps | iex
  • Cargo
cargo install create-tauri-app --locked
cargo create-tauri-app
  • npm
npm create tauri-app@latest
  • Yarn
yarn create tauri-app
  • pnpm
pnpm create tauri-app
请注意,如果您使用create-tauri-app,您无需按照本指南的其余部分操作,但我们仍建议阅读它以了解设置过程。

这是我们将要构建的内容的预览:




Tauri 预先准备
Tauri 创建前端
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Tauri 指南

Tauri 特性

Tauri 插件

Tauri 应用程序接口

Tauri JavaScript/TypeScript

Tauri 命令行界面

Tauri 进程

Tauri 参考

Tauri WebView 版本

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }