DEV Community: lencx

【07】Tauri 应用篇 - 基本配置

lencx — Mon, 01 Aug 2022 09:42:24 +0000

仓库：lencx/OhMyBox
如果文章对你有所帮助，可以 star 此项目，或转发给更多有需要的人。大家的支持也会给我更大的写作动力，感恩。

应用名称

应用名称分为两种：

dev 模式
release 模式

dev 模式

编辑 src-tauri/Cargo.toml

[package]
name = "app"
default-run = "app"
edition = "2021"
rust-version = "1.57"

修改 name 与 default-run 两个字段，保持名称一致。名称只能使用字母数字字符或 - 或 _，并且不能为空。具体修改规则请参考 Cargo.toml name，避免无效名称。

注意：修改 dev 模式下的名称并无实际意义。最终的应用名称还是以 tauri.conf.json 中的名称为准。

release 模式

编辑 src-tauri/tauri.conf.json

{
  "package": {
    "productName": "tauri-app",
    "version": "0.1.0"
  }
}

productName 支持中英文数字以及 - 和 _ 等。不支持特殊字符及表情等。

应用版本号

编辑 src-tauri/tauri.conf.json

version 是 semver 版本号或包含 version 字段的 package.json 文件的路径。

semver 版本号

{
  "package": {
    "productName": "tauri-app",
    "version": "0.1.0"
  }
}

文件路径

{
  "package": {
    "productName": "tauri-app",
    "version": "../package.json"
  }
}

版本格式：主版本号.次版本号.修订号，版本号递增规则如下：

主版本号：当你做了不兼容的 API 修改
次版本号：当你做了向下兼容的功能性新增
修订号：当你做了向下兼容的问题修正

先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸（如 1.0.0-alpha、1.0.0-beta+exp.sha.5114f85 等）。

应用图标

Tauri 默认使用其 logo 作为应用程序图标，这可能不是你想要的。为了实现自定义图标，Tauri 提供了一个 tauricon 的命令。该命令可以输入图片路径（默认情况下为 ./app-icon.png，尺寸为 1240 x 1240 的 PNG 或正方形的 SVG）来创建各种平台所需的所有图标，推荐使用 SVG 格式。

npx @tauri-apps/tauricon --help

  Description
    Create all the icons you need for your Tauri app.

    "ICON-PATH" is the path to the source icon (default: 'app-icon.png').
    The icon needs to be either png (1240x1240 with transparency) or svg (square dimensions with transparency).

  Usage
    $ tauricon [ICON-PATH]

  Options
    --help, -h          Displays this message
    --log, l            Logging [boolean]
    --target, t         Target folder (default: 'src-tauri/icons')

生成好的图标默认放在 src-tauri/icons 目录下，在构建时包含在应用程序中。
如果需要从其他位置获取图标，则可以编辑 src-tauri/tauri.conf.json 的以下部分：

{
  "tauri": {
    "bundle": {
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    }
  }
}

图标文件类型说明：

icons.icns = macOS
icons.ico = MS Windows
*.png = Linux

【06】Tauri 应用篇 - tauri.conf.json 配置

lencx — Mon, 01 Aug 2022 09:41:24 +0000

仓库：lencx/OhMyBox
如果文章对你有所帮助，可以 star 此项目，或转发给更多有需要的人。大家的支持也会给我更大的写作动力，感恩。

tauri.conf.json 是由 tauri init 命令生成的文件，该文件位于 Tauri 应用程序源目录 src-tauri 中。可以通过修改它来自定义 Tauri 应用程序。此文仅列举部分常用字段，更多请查看 Tauri Configuration。

特定平台

除了 tauri.conf.json 外，Tauri 还可以从 tauri.linux.conf.json、tauri.windows.conf.json、tauri.macos.conf.json 中读取特定于平台的配置，并将其与 tauri.conf.json 主配置合并。

配置结构

示例配置：

{
  "build": {
    "beforeBuildCommand": "",
    "beforeDevCommand": "",
    "devPath": "../dist",
    "distDir": "../dist"
  },
  "package": {
    "productName": "tauri-app",
    "version": "0.1.0"
  },
  "tauri": {
    "allowlist": {
      "all": true
    },
    "bundle": {},
    "security": {
      "csp": null
    },
    "updater": {
      "active": false
    },
    "windows": [
      {
        "fullscreen": false,
        "height": 600,
        "resizable": true,
        "title": "Tauri App",
        "width": 800
      }
    ]
  }
}

tauri.conf.json 由以下部分组成：

package：Package 设置
tauri：Tauri 配置
build：构建配置
plugins：插件配置

package

名称	类型	默认值	描述
productName	string?	null	APP 名称
version	string?	null	版本号，它是 semver 版本号或包含 `version` 字段的 `package.json` 文件的路径

tauri

名称	类型	默认值	描述
pattern	PatternKind		要使用的模式
windows	[WindowConfig]	[]	窗口配置
cli	CliConfig?		命令行界面配置
bundle	BundleConfig		捆绑器配置
allowlist	AllowlistConfig		白名单配置，如系统文件，路径，剪贴板，脚本，进程等
security	SecurityConfig		安全配置
updater	UpdaterConfig		更新应用配置，如签名公钥，更新应用的窗口配置等
systemTray	SystemTrayConfig?		应用系统托盘的配置，如图标配置
macOSPrivateApi	boolean	false	MacOS 私有 API 配置。启用透明后台 API 并将首选项 `fullScreenEnabled` 设置为 `true`

PatternKind

tauri -> pattern

应用程序模式，可以是以下任何一种类型：

brownfield - 棕地模式，这是使用 Tauri 最简单直接的模式，因为它试图尽可能与现有的前端项目兼容。简而言之，它试图除了现有Web前端可能在浏览器中使用的内容之外，不需要任何其他内容。
isolation - 隔离模式是一种在前端发送到 Tauri Core 之前拦截和修改 Tauri API 消息的方法，所有这些都是使用 JavaScript 进行的。由隔离模式注入的安全 JavaScript 代码称为隔离应用程序。出于安全目的，建议使用此模式。

{
  "tauri": {
    "pattern": {
      "use": "brownfield"
    }
  }
}

{
  "tauri": {
    "pattern": {
      "use": "isolation",
      "options": {
        "dir": "../dist-isolation"
      }
    }
  }
}

WindowConfig

tauri -> windows[]

名称	类型	默认值	描述
label	string	null	窗口标识符，它必须是字母数字
url	WindowUrl		窗口 Web 视图 URL
fileDropEnabled	boolean	true	是否在 Web 视图上启用文件拖拽
center	boolean	false	窗口是否以居中方式启动
x	number?(format: double)	null	窗口左上角的水平位置
y	number?(format: double)	null	窗口左上角的垂直位置
width	number?(format: double)	null	窗口宽度
height	number?(format: double)	null	窗口高度
minWidth	number?(format: double)	null	窗口最小宽度
minHeight	number?(format: double)	null	窗口最小高度
maxWidth	number?(format: double)	null	窗口最大宽度
maxHeight	number?(format: double)	null	窗口最大高度
resizable	boolean	true	窗口是否可调整大小
title	string	null	窗口标题
fullscreen	boolean	false	窗口是否以全屏方式启动
focus	boolean	true	窗口是否聚焦
transparent	boolean	false	窗口是否透明，注意：mac 需要启用 `macOSPrivateApi`（警告：使用私有 API 会阻止应用程序被接受）
maximized	boolean	false	窗口是否最大化
visible	boolean	true	窗口是否可见
decorations	boolean	true	窗口是否具有边框和标题栏
alwaysOnTop	boolean	false	窗口是否应始终位于其他窗口上层
skipTaskbar	boolean	false	是否将窗口图标添加到任务栏
theme	Theme?		初始窗口主题，默认为系统主题。仅在 Windows 和 macOS 10.14+ 上实现

WindowUrl

tauri -> windows[] -> url

要在Tauri Web 视图窗口中打开的 URL，可以是以下任何一种类型：

格式 uri - 外部 URL
应用程序 URL 的路径部分 - 例如：tauri://localhost/users/lencx 的部分路径 users/lencx

Theme

tauri -> windows[] -> theme

系统主题，可以是以下任一值：

Light
Dark

【05】Tauri 入门篇 - 跨平台编译

lencx — Mon, 01 Aug 2022 09:39:35 +0000

仓库：lencx/OhMyBox
如果文章对你有所帮助，可以 star 此项目，或转发给更多有需要的人。大家的支持也会给我更大的写作动力，感恩。

背景

Tauri 严重依赖原生库和工具链，因此目前无法在某一平台实现交叉编译。最佳选择是使用托管在 GitHub Action、Azure Pipelines、GitLab 或其他选项上的 CI/CD 管道进行编译。管道可以同时为每个平台运行编译，使编译和发布过程更加容易。

为了便于设置，官方目前提供 Tauri Action。这是一个 GitHub Action，可在所有支持的平台上运行，编译软件，生成应用程序安装包，并将发布到 GitHub Releases。

GitHub Action

从构思到生产，自动化工作流程

利用 GitHub Actions，在你的仓库中自动化、定制和执行你的软件开发工作流程。你可以发现、创建和共享操作，以执行你想要的任何工作，包括 CI/CD，并在一个完全定制的工作流程中组合操作。

使用 Action

创建 release.yml

在项目根路径下创建 .github/workflows 目录，在 .github/workflows 下创建 release.yml（文件名自定义）文件。将以下内容复制到文件中：

# 可选，将显示在 GitHub 存储库的“操作”选项卡中的工作流名称
name: Release CI

# 指定此工作流的触发器
on:
  push:
    # 匹配特定标签 (refs/tags)
    tags:
      - 'v*' # 推送事件匹配 v*, 例如 v1.0，v20.15.10 等来触发工作流

# 需要运行的作业组合
jobs:
  # 任务：创建 release 版本
  create-release:
    runs-on: ubuntu-latest
    outputs:
      RELEASE_UPLOAD_ID: ${{ steps.create_release.outputs.id }}

    steps:
      - uses: actions/checkout@v2
      # 查询版本号（tag）
      - name: Query version number
        id: get_version
        shell: bash
        run: |
          echo "using version tag ${GITHUB_REF:10}"
          echo ::set-output name=version::"${GITHUB_REF:10}"

      # 根据查询到的版本号创建 release
      - name: Create Release
        id: create_release
        uses: actions/create-release@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tag_name: '${{ steps.get_version.outputs.VERSION }}'
          release_name: 'app ${{ steps.get_version.outputs.VERSION }}'
          body: 'See the assets to download this version and install.'

  # 编译 Tauri
  build-tauri:
    needs: create-release
    strategy:
      fail-fast: false
      matrix:
        platform: [macos-latest, ubuntu-latest, windows-latest]

    runs-on: ${{ matrix.platform }}
    steps:
      - uses: actions/checkout@v2

     # 安装 Node.js
      - name: Setup node
        uses: actions/setup-node@v1
        with:
          node-version: 16

      # 安装 Rust
      - name: Install Rust stable
        uses: actions-rs/toolchain@v1
        with:
          toolchain: stable

      # 使用 Rust 缓存，加快安装速度
      - uses: Swatinem/rust-cache@v1

      - name: install dependencies (ubuntu only)
        if: matrix.platform == 'ubuntu-latest'
        run: |
          sudo apt-get update
          sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf

      # 可选，如果需要将 Rust 编译为 wasm，则安装 wasm-pack
      - uses: jetli/wasm-pack-action@v0.3.0
        with:
          # Optional version of wasm-pack to install(eg. 'v0.9.1', 'latest')
          version: v0.9.1

      # 可选，如果需要使用 rsw 构建 wasm，则安装 rsw
      - name: Install rsw
        run: cargo install rsw

      # 获取 yarn 缓存路径
      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"

      # 使用 yarn 缓存
      - name: Yarn cache
        uses: actions/cache@v2
        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      # 安装依赖执行构建，以及推送 github release
      - name: Install app dependencies and build it
        run: yarn && yarn build
      - uses: tauri-apps/tauri-action@v0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          releaseId: ${{ needs.create-release.outputs.RELEASE_UPLOAD_ID }}

具体可以参考 OhMyBox/.github/workflows/release.yml

触发 Action

使用 GitHub Tag 来触发 Action

# 创建 tag
git tag v0.1.0

# 推送 tag
git push --tag

常见问题

Error: Resource not accessible by integration

release.yml 中的 GitHub 环境令牌 GITHUB_TOKEN 由 GitHub 为每个运行的工作流自动颁发，无需进一步配置，这意味着没有秘密泄露的风险。但是，此令牌在默认情况下仅具有读取权限，在运行工作流时可能会收到 Resource not accessible by integration（资源无法通过集成访问）错误。如果发生这种情况，需要为此令牌添加写入权限。为此，请前往 GitHub 仓库 Settings，然后选择 Actions，向下滚动到 Workflow permissions（工作流权限）并选中 Read and write permissions（读取和写入权限）。

Settings -> Actions -> General -> Workflow permissions -> Read and write permissions

Action 意外终止

如果 Action 因某些原因（如缓存错误，依赖下载失败等）终止工作流，不需要重新创建 tag 来触发工作流，可以通过 Re-run all jobs 按钮来重新触发。

【04】Tauri 入门篇 - 集成 WebAssembly

lencx — Mon, 01 Aug 2022 09:37:20 +0000

仓库：lencx/OhMyBox
如果文章对你有所帮助，可以 star 此项目，或转发给更多有需要的人。大家的支持也会给我更大的写作动力，感恩。

安装依赖

vite-plugin-rsw - 基于 vite 实现的 webAssembly 插件，支持热更新，友好的报错提示

yarn add -D vite-plugin-rsw

rsw-rs - 一个 CLI 工具，用于增强 wasm-pack 的功能，如支持 watch 模式，多 crate 同时 build，watch，自动执行 npm link 等

cargo install rsw

使用说明

1. 编辑 vite.config.js

import { defineConfig } from 'vite'
import ViteRsw from 'vite-plugin-rsw'; // ✅ 新增

export default defineConfig({
  plugins: [
    ViteRsw(), // ✅ 新增
  ],
})

2. 编辑 package.json

{
  "scripts": {
    "dev": "vite",
    "build": "rsw build && tsc && vite build",
    "preview": "vite preview",
    "tauri": "tauri",
    "rsw": "rsw"
  }
}

3. 运行 rsw

1). 初始化 rsw 配置

生成 rsw.toml，了解更多 rsw.toml 配置信息

yarn rsw init

2). 新建 wasm 项目

内置三种模式，可以通过编辑 rsw.toml > [new] > using 来切换

yarn rsw new @mywasm/foo

在 rsw.toml > [[crates]] 中新增 @mywasm/foo

#! link 类型: `npm` | `yarn` | `pnpm`, 默认是 `npm`
cli = "npm"

[new]
#! 使用: `wasm-pack` | `rsw` | `user`, 默认 `wasm-pack`
#! 1. wasm-pack: `rsw new <name> --template <template> --mode <normal|noinstall|force>`
#! 2. rsw: `rsw new <name>`, 内置模板
#! 3. user: `rsw new <name>`，如果 `dir`未配置, 则使用 `wasm-pack new <name>`初始化 wasm 项目
using = "rsw"
#! 当 `using = "user"` 时，`dir` 才会生效
#! 如果 `using = "wasm-pack"` 或 `using = "rsw"`，则忽略
#! 复制此目录下的所有文件到初始化的 wasm 项目中
dir = "my-template"

[[crates]]
#! npm 包，@mywasm 为 npm 组织，foo 是该组织下的包名
name = "@mywasm/foo"
#! 是否执行 link， link 类型通过 `cli` 配置
link = true

[[crates]]
#! npm 包，@mywasm 为 npm 组织，bar 是该组织下的包名
name = "@mywasm/bar"
#! 是否执行 link， link 类型通过 `cli` 配置
link = true

开发模式

监听 rust 文件变更，自动执行构建，并通知到浏览器（热更新）

执行以下命令，不要退出：
```
yarn rsw watch
```

新开一个命令行窗口，执行 a 或 b：

# a. 在浏览器环境
yarn dev

# b. 在 tauri 环境
yarn tauri dev

使用

在项目中使用 wasm

// App.jsx
import { useEffect } from 'react'
import init, { greet } from '@mywasm/foo'

function App() {
  useEffect(() => {
    // ✅  初始化，加载 wasm 文件
    init();
  }, [])

  return (
    <div className="App">
        {/* ✅ 调用 greet 方法，必须保证 init 方法执行完成之后，才可以调用，否则会报错 */}
        <button onClick={() => greet()}>click me</button>
    </div>
  )
}

export default App

构建

编译生产环境下的 wasm 文件（代码优化）

构建 wasm
```
yarn rsw build
```
构建项目
```
yarn build
```

项目结构

rsw 对项目结构并无特别要求，但是为了保持统一及维护性，推荐以下结构。

@mywasm: wasm 包的组织名称（推荐使用，但非必需），rust 编译为 wasm，会以 npm 包的形式提供给前端使用。使用组织的好处就是方便管理，防止包名冲突
.rsw - rsw 运行时生成的临时文件夹
rsw.toml - rsw 配置文件
.watchignore - rsw watch 监听文件变更时需要忽略的文件，忽略规则与 .gitignore 类似

[tauri-app] # 项目名称
│ # 新增结构
├─ [@mywasm] # ✅ 组织名称（npm org）
│    ├─ [foo] # ✅ @mywasm/foo - wasm 包名
│    └─ [bar] # ✅ @mywasm/bar - wasm 包名
├─ [.rsw] # ✅ rsw 临时文件夹
├─ rsw.toml # ✅ rsw 配置文件
├─ .watchignore # ✅ rsw watch 忽略文件
│┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈
│ # 原结构
├─ [node_modules] # 前端依赖
├─ [src] # 前端程序源
├─ [src-tauri] # Tauri 程序源
│    ├─ [icons] # 应用程序图标
│    ├─ [src] # Tauri App 程序源，例如系统菜单，托盘，插件配置等
│    ├─ [target] # 构建的产物会被放入此文件夹中，target 目录的结构取决于是否使用 --target 标志为特定的平台构建
│    ├─ build.rs # Tauri 构建应用
│    ├─ Cargo.lock # 包含了依赖的精确描述信息，类似于 yarn.lock 或 package-lock.json
│    ├─ Cargo.toml # Tauri (Rust) 项目清单
│    └─ tauri.conf.json # 自定义 Tauri 应用程序的配置文件，例如应用程序窗口尺寸，应用名称，权限等
├─ index.html # 项目主界面
├─ package.json # 前端项目清单
├─ tsconfig.json # typescript 配置文件
├─ vite.config.ts # vite 配置文件
├─ yarn.lock # 前端依赖的精确描述信息
└─ ... # 其他

【03】Tauri 入门篇 - 创建项目

lencx — Mon, 01 Aug 2022 09:33:45 +0000

仓库：lencx/OhMyBox
如果文章对你有所帮助，可以 star 此项目，或转发给更多有需要的人。大家的支持也会给我更大的写作动力，感恩。

本教程以 macOS 为例，其他平台类似，想了解更多请查看官方文档

初始化

# 使用 yarn
yarn create tauri-app

# 或使用 npx
npx create-tauri-app

此项目以 vite + react-ts 为例（使用 vite 是为了配合 vite-plugin-rsw 插件，可以无缝集成 webAssembly）。如需在老项目中添加 tauri 支持，请参考文档 Add Tauri to Existing Project

项目结构

[tauri-app] # 项目名称
├─ [node_modules] # 前端依赖
├─ [src] # 前端程序源
├─ [src-tauri] # Tauri 程序源
│    ├─ [icons] # 应用程序图标
│    ├─ [src] # Tauri App 程序源，例如系统菜单，托盘，插件配置等
│    ├─ [target] # 构建的产物会被放入此文件夹中，target 目录的结构取决于是否使用 --target 标志为特定的平台构建
│    ├─ build.rs # Tauri 构建应用
│    ├─ Cargo.lock # 包含了依赖的精确描述信息，类似于 yarn.lock 或 package-lock.json
│    ├─ Cargo.toml # Tauri (Rust) 项目清单
│    └─ tauri.conf.json # 自定义 Tauri 应用程序的配置文件，例如应用程序窗口尺寸，应用名称，权限等
├─ index.html # 项目主界面
├─ package.json # 前端项目清单
├─ tsconfig.json # typescript 配置文件
├─ vite.config.ts # vite 配置文件
├─ yarn.lock # 前端依赖的精确描述信息
└─ ... # 其他

启动项目

有两种启动方式：

1. 启动 web 项目

纯前端项目，不和操作系统产生任何交互

yarn dev

2. 启动 tauri 项目

需要和操作系统产生交互，如系统文件读写操作

第一次启动项目时，tauri 会根据src-tauri/Cargo.toml 去下载相关依赖（导致第一次启动比较慢），第二次启动会快很多。

yarn tauri dev

构建应用

Tauri Bundler 是一个 Rust 工具，用于编译二进制文件、打包资产并准备最终捆绑包。它会检测你当前的操作系统并相应地构建一个包。目前支持：

Windows: .msi
macOS: .app, .dmg
Linux: .deb, .appimage

yarn tauri build

如果未修改 src-tauri/tauri.conf.json 中的 identifier 直接 build 会报以下错误。想要正确构建，只需修改为自己特有的标识符即可，如 com.myapp.dev。构建完成后，在 src-tauri/target/release/bundle/{platform}/{app} 下就可以找到应用程序安装包。

了解更多不同平台打包注意事项：Tauri Building

检查信息

检查 Tauri 信息以确保一切设置正确，在对问题进行分类时，此信息可能很有用。

yarn tauri info

【02】Tauri 入门篇 - 开发环境

lencx — Mon, 01 Aug 2022 09:31:00 +0000

仓库：lencx/OhMyBox
如果文章对你有所帮助，可以 star 此项目，或转发给更多有需要的人。大家的支持也会给我更大的写作动力，感恩。

注意：仅在开发 Tauri 应用程序时才需要此设置。最终使用应用程序的用户不需要执行任何操作。

第一步是安装 Rust 和系统依赖项。以 Windows 和 macOS 为例，如果想了解更多平台开发环境，请查看 Tauri 官网指南。

Windows

1. Microsoft Visual Studio C++ Build Tools

安装 Build Tools for Visual Studio 2022 ，确保已勾选 C++ 构建工具 和 Windows 10 SDK。

2. WebView2

注意：Windows 11 中已内置 WebView2

Tauri 严重依赖 WebView2 在 Windows 上呈现 Web 内容，因此必须安装 WebView2。最简单的方法是从 Microsoft Edge Developer 下载并运行 Evergreen Bootstrapper。引导程序将尝试为你的系统确定正确的程序包及版本。注意：如果遇到问题（尤其是 ARM 上的 Windows），可以手动选择正确的安装程序。

3. Rust

前往 rust-lang.org/tools/install 安装 rustup（Rust 安装程序）

macOS

1. CLang 和 macOS 开发依赖项

在终端（Terminal）执行以下命令：

xcode-select --install

2. Rust

在终端（Terminal）执行以下命令：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

上面的命令会下载脚本并开始安装 rustup 工具，该工具会安装最新的稳定版 Rust。系统可能会提示输入密码。如果安装成功，将出现以下内容：

Rust is installed now. Great!

更新及卸载

Tauri 及其组件可以通过编辑 Cargo.toml 文件或运行 cargo-edit 工具提供的 cargo upgrade 命令来手动更新：

cargo upgrade

通过 rustup 来更新 Rust 版本，在终端执行以下命令：

rustup update

通过 rustup 来完全卸载机器上的 Rust：

rustup self uninstall

故障排除

检查安装的 Rust 版本是否正确，输入以下命令：

rustc --version

会看到以下信息（已发布的最新稳定版的版本号、提交哈希和提交日期）：

# rustc x.y.z (abcabcabc yyyy-mm-dd)
rustc 1.59.0 (9d1b2106e 2022-02-23)

如果未看到此信息，则 Rust 已损坏。可以通过 Rust 的疑难解答部分以了解如何解决此问题。如果问题仍然存在，也可以从官方 Tauri Discord 和 GitHub Discussions 中获得帮助。

【01】Tauri 入门篇 - 是什么

lencx — Mon, 01 Aug 2022 09:27:03 +0000

仓库：lencx/OhMyBox
如果文章对你有所帮助，可以 star 此项目，或转发给更多有需要的人。大家的支持也会给我更大的写作动力，感恩。

Tauri 使用 Web 前端构建更小、更快、更安全的桌面应用程序。

Tauri 是什么？

Tauri 是一个工具包，可以帮助开发者为主要桌面平台制作应用程序（如 mac，windows，linux 等）。几乎支持现有的任何前端框架（如 react, vue, vite 等），其核心是使用 Rust 编写的。Rust 负责系统通信，应用构建，上层应用开发只需要专注于 webview 中的网页编写（可以使用自己喜欢的任何前端语言）。

安全第一

Tauri 允许您选择要发布的 API 端点，是否希望在你的应用程序中内置一个本地主机（localhost）服务器，甚至可以在运行时随机化功能句柄
默认情况下 Tauri 只提供二进制文件，而非 Asar 文件

Asar

提高在 Windows 等平台上读取文件的性能，而不是通过复制其所有源文件来发布您的应用程序。

Asar 用于将 Electron 应用程序文件连接到一个大文件。为了缓解 Windows 上长路径名问题，稍微加快 require 并隐藏源代码不被粗略检查（Cursory Inspection），可以选择将应用程序打包成 asar 归档文件，而对源代码几乎没有改动。

多语言支持

目前，Tauri 使用 Rust 作为后端 —— 但在不远的将来，其他后端如 Go、Nim、Python、Csharp 等也将成为可能。目前官方维护的是 Rust 与 webview 组织的绑定，因为 API 可以用任何带有 C 语言互操作的语言来实现，所以选择自己喜欢的语言作为后端只是一个 PR 的问题。

开放源代码

如果没有一个社区，这一切都没有任何意义。今天的软件社区是令人惊奇的地方，人们在那里互相帮助，创造出令人敬畏的东西。

Tauri vs Electron

Electron 的一个主要好处是可以针对单个浏览器和运行时版本进行开发，而不必处理所有小而耗时的兼容性问题。Tauri 相比于 Electron 放弃了一些兼容性，换来了内存以及应用体积的更小化，在安全方面也做了一些事情。从 Tauri 的架构图来看它实现的是 Webview2 和系统之间的一个胶水层，目前后端是 Rust 实现，将来也可以替换成别的语言。前端现在就可以使用自己喜欢的框架来编写（vue，react 等）。而且从 README platforms 可以看到，Tauri 始于桌面，但并不止步于此。后期可以跨平台到 iOS/iPadOS，Android 等。称其为下一代跨端框架似乎也不过分。

Tauri 架构

Tauri 是一个多语言通用工具包，其超强的组合性允许工程师制作各种应用程序。它使用 Rust 工具和 Webview 中呈现的 HTML 的组合来构建桌面应用程序。后端使用 Rust 和系统进行交互（如系统信息，系统通知，系统文件等），包装成 Tauri 插件后会暴露出 JS API 供前端使用，通过 Webview 进行消息传递来控制系统。所以不支持的功能，开发人员可以通过编写 Rust 来扩展默认 API。

Tauri 应用程序可以有自定义菜单和托盘类型的界面。它们可以按预期由用户的操作系统进行更新和管理。它们非常小，因为它们使用操作系统的 webview。它们不提供运行时，因为最终的二进制文件是从 Rust 编译的。这使得 Tauri 应用程序的逆向不是一项简单的任务。

核心（Core）
- tauri - 主条板箱（major crate）把所有东西（运行时、宏、实用程序和 API ）都集中在一起构成最终产品。在编译时读取 tauri.conf.json 文件，以引入功能并进行应用程序的实际配置（包括项目中的 Cargo.toml 文件）。在运行时处理脚本注入（用于 polyfills/原型修改），托管系统交互的 API 及管理更新。
- tauri-runtime - Tauri 本身和较低级别的 webview 库之间的粘合层。
- tauri-macros - 通过利用 tauri-codegen crate 为上下文、处理程序和命令创建宏。
- tauri-utils - 在许多地方重用的通用代码，并提供有用的实用程序，例如解析配置文件、检测平台三元组（CPU 系列/型号的名称、供应商和操作系统名称）、注入 CSP 和管理资产。
- tauri-build - 在构建时应用宏，为 cargo 装配所需的一些特殊功能。
- tauri-codegen - 嵌入、散列和压缩资产，包括应用程序和系统托盘的图标。在编译时解析 tauri.conf.json 并生成配置结构。
- tauri-runtime-wry - 专门为 WRY 开辟了直接的系统级交互，如打印、显示器检测和其他与窗口相关的任务。
上游条板箱（Upstream Crates） - Tauri-Apps 组织维护 Tauri 的两个“上游”板条箱，即用于创建和管理应用程序窗口的 TAO，以及用于与窗口内的 Webview 交互的 WRY。
- TAO - Rust 中的跨平台应用程序窗口创建库，支持 Windows、macOS、Linux、iOS 和 Android 等所有主要平台。它是用 Rust 编写的，是一个 winit 的分支，根据需要进行了扩展，例如菜单栏和系统托盘。
- WRY - WRY 是 Rust 中的跨平台 WebView 渲染库，支持 Windows、macOS 和 Linux 等所有主要桌面平台。 Tauri 使用 WRY 作为抽象层，负责确定使用哪个 webview（以及如何进行交互）。

Tauri 不是什么?

Tauri 不是一个轻量级的内核包装器。相反，它直接使用 WRY 和 TAO 来完成对操作系统进行系统调用的繁重工作。
Tauri 不是虚拟机或虚拟化环境。相反，它是一个允许制作 Webview OS 应用程序的应用程序工具包。

Rust + Vite = 🚀

lencx — Mon, 28 Feb 2022 06:32:10 +0000

🥳 vite-plugin-rsw released v2.0 version!

Completely refactored the vite-plugin-rsw plug-in, and now open two processes without affecting each other. One process is responsible for watching the rust code build into wasm, and the other process is to start the front-end service.

reop：https://github.com/lencx/vite-plugin-rsw - 🦀 wasm-pack plugin for Vite
rsw cli：https://github.com/lencx/rsw-rs - 🦞 wasm-pack based build tool
wasm demo：https://github.com/lencx/learn-wasm - 🎲 Learning WebAssembly
wasm scaffold：https://github.com/lencx/create-mpl - ⚡️ Create a project in seconds!

rsw - wasm-pack based build tool

lencx — Thu, 10 Feb 2022 04:37:49 +0000

Feature

rsw init
rsw watch
rsw build
rsw new
- wasm-pack
- rsw
- user
debug info

TODO

local sub-dependency file changes trigger hot updates
integrate front-end scaffolding, such as vite, webpack, etc.

Usage

cargo install rsw

# help
rsw -h

# dev
rsw watch

# release
rsw build

Logger

# @see: https://github.com/env-logger-rs/env_logger
# RUST_LOG=rsw=<info|trace|debug|error|warn> rsw <watch|build|new>
# 1. info
RUST_LOG=rsw=info rsw <SUBCOMMAND>

# 2. all: info, trace, debug, error, warn
RUST_LOG=rsw rsw <SUBCOMMAND>

rsw.toml

configuration file

Options

Create rsw.toml in the project root path, configure the rust crate parameter, and run the rsw watch or rsw build command.

name - Profile name (optional)
version - Profile version (optional)
interval - Development mode rsw watch, time interval for file changes to trigger wasm-pack build, default 50 milliseconds
[new] - Quickly generate a crate with wasm-pack new, or set a custom template in rsw.toml -> [new] -> using
- using - wasm-pack | rsw | user, default is wasm-pack
- wasm-pack - rsw new <name> --template <template> --mode <normal|noinstall|force> wasm-pack new doc
- rsw - rsw new <name>, built-in templates
- user - rsw new <name>, if dir is not configured, use wasm-pack new <name> to initialize the project.
- dir - Copy all files in this directory. This field needs to be configured when using = "user". using = "wasm-pack" or using = "rsw", this field will be ignored
[[crates]] - Is an array that supports multiple rust crate configurations
- name - npm package name, supporting organization, e.g. @rsw/foo
- root - Relative to the project root path, default is .
- target - bundler | nodejs | web | no-modules, default is web
- out-dir - npm package output path, default pkg
- [crates.watch] - Development mode
- run - Whether this crate needs to be watching, default is true
- profile - dev | profiling, default is dev
- [crates.build] - Production mode
- run - Whether this crate needs to be build, default is true
- profile - release | profiling, default is release

Note: name in [[crates]] is required, other fields are optional.

Example

# rsw.toml

name = "rsw"
version = "0.1.0"
#! default is `50` ms
interval = 50

#! ---------------------------

#! rsw new <name>
[new]
#! @see https://rustwasm.github.io/docs/wasm-pack/commands/new.html
#! using: `wasm-pack` | `rsw` | `user`, default is `wasm-pack`
#! 1. wasm-pack: `rsw new <name> --template <template> --mode <normal|noinstall|force>`
#! 2. rsw: `rsw new <name>`, built-in templates
#! 3. user: `rsw new <name>`, if `dir` is not configured, use `wasm-pack new <name>` to initialize the project
using = "wasm-pack"
#! this field needs to be configured when `using = "user"`
#! `using = "wasm-pack"` or `using = "rsw"`, this field will be ignored
#! copy all files in this directory
dir = "my-template"

#! ################# NPM Package #################

#! When there is only `name`, other fields will use the default configuration
#! -------- package: rsw-hello --------
[[crates]]
name = "rsw-hello"

#! =======================================================

#! -------- package: @rsw/hello --------
# [[crates]]
# #! npm package name
# name = "@rsw/hello"
# #! default is `.`
# root = "."
# #! default is `pkg`
# out-dir = "pkg"
# #! target: bundler | nodejs | web | no-modules, default is `web`
# target = "web"
# #! rsw watch
# [crates.watch]
# #! default is `true`
# run = false
# #! profile: `dev` | `profiling`, default is `dev`
# profile = "dev"
# #! rsw build
# [crates.build]
# run = false
# #! profile: `release` | `profiling`, default is `release`
# profile = "release"

How to implement the scroll progress bar

lencx — Wed, 22 Sep 2021 07:11:49 +0000

Demo - Code Snippets

Creates a progress bar indicating the scroll percentage of the page.

Use position: fixed and a large z-index value to place the element at the top of the page and above any content.
Use EventTarget.addEventListener() along with Element.scrollTop to determine the scroll percentage of the document and apply it to the width of the element.

💠 Core

<div id="scroll_progress_bar"></div>

#scroll_progress_bar {
  position: fixed;
  top: 0;
  width: 0%;
  height: 4px;
  background: #7983ff;
  z-index: 10000;
}

const scrollProgress = document.getElementById('scroll_progress_bar');
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;

window.addEventListener('scroll', () => {
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  scrollProgress.style.width = `${(scrollTop / height) * 100}%`;
});

✍️ Implement - Vue3

<!-- ScrollProgress.vue -->

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  root: {
    type: String,
    default: '#app',
    required: false,
  },
  height: {
    type: String,
    default: '4px',
    required: false,
  },
  theme: {
    type: String,
    default: '#3eaf7c',
    required: false,
    validator: (v: string) => {
      document.head.style.color = v
      const q = document.head.style.color
      document.head.style.color = ''
      return !!q
    },
  },
  placement: {
    type: String,
    default: 'top',
    required: false,
    validator: (v: string) => {
      if (!['top', 'bottom'].includes(v)) {
        console.error(`[ScrollProgress(placement)] The value must match one of these strings: 'top' | 'bottom'`)
        return false
      }
      return true
    },
  },
  zIndex: {
    type: [Number, String],
    default: 10000,
    required: false,
    validator: (v: string) => /^-?[\d]+$/.test(v),
  },
})

const el = ref(null)
const appHeight = ref(0)

onMounted(() => {
  const targetNode = document.querySelector(props.root)
  if (!targetNode) return console.error(`[ScrollProgress(root)] '${props.root}' is invalid`)
  const config = { attributes: true, childList: false, subtree: true }
  const observer = new MutationObserver((mutationsList: MutationRecord[]) => {
    // Use traditional 'for loops' for IE 11
    for(let mutation of mutationsList) {
      if (mutation.type === 'attributes') {
        appHeight.value = document.documentElement.scrollHeight
      }
    }
  })
  observer.observe(targetNode, config)
})


const listener = () => {
  const scrollProgress = el.value
  const height = appHeight.value - document.documentElement.clientHeight
  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
  scrollProgress.style.width = `${(scrollTop / height) * 100}%`
}

onMounted(() => window.addEventListener('scroll', listener))
onUnmounted(() => window.removeEventListener('scroll', listener))

const style: any = {
  background: props.theme,
  zIndex: props.zIndex,
  height: props.height,
}

if (props.placement === 'top') style.top = 0
if (props.placement === 'bottom') style.bottom = 0

defineExpose({ style })
</script>

<template>
  <div id="scroll_progress" ref="el" :style="style" />
</template>

<style scoped>
#scroll_progress {
  position: fixed;
  width: 0%;
  transition: width 300ms ease-out;
}
</style>

🎥 Demo

🔗 Reference

[MDN] Document: scroll event - The scroll event fires when the document view has been scrolled.
[MDN] MutationObserver - The MutationObserver interface provides the ability to watch for changes being made to the DOM tree.
Vue3 API

Top Coding Resources and Tools for Beginners (+ Beyond) in 2021

lencx — Wed, 21 Jul 2021 09:16:35 +0000

More ...

Show GitHub Discussions on your GitHub profile/project readme

lencx — Fri, 02 Jul 2021 05:19:14 +0000

Show your latest blog posts from GitHub Discussions on your GitHub profile/project readme automatically using the RSS feed

GitHub Discussions RSS：https://github.com/lencx/rgd

Getting Started

Run workflow automatically:

Generate RSS:
https://github.com/lencx/z/blob/main/.github/workflows/deploy.yml#L21

# step1
npm install -g rgd

# step2
rgd --owner=lencx --repo=z --limit=10 --outdir=dist --token=${{ secrets.GH_TOKEN }} --site-title=浮之静 --site-link=https://z.nofwl.com --site-desc="浮之静 技术社区"

Blog Post Workflow:
https://github.com/lencx/lencx/blob/main/.github/workflows/blog-post-workflow.yml

Demo

https://github.com/lencx/lencx

DEV Community: lencx

【07】Tauri 应用篇 - 基本配置

应用名称

dev 模式

release 模式

应用版本号

semver 版本号

文件路径

应用图标

【06】Tauri 应用篇 - tauri.conf.json 配置

特定平台

配置结构

package

tauri

PatternKind

WindowConfig

WindowUrl

Theme

【05】Tauri 入门篇 - 跨平台编译

背景

GitHub Action

使用 Action

创建 release.yml

触发 Action

常见问题

Error: Resource not accessible by integration

Action 意外终止

【04】Tauri 入门篇 - 集成 WebAssembly

安装依赖

使用说明

1. 编辑 vite.config.js

2. 编辑 package.json

3. 运行 rsw

1). 初始化 rsw 配置

2). 新建 wasm 项目

开发模式

使用

构建

项目结构

【03】Tauri 入门篇 - 创建项目

初始化

项目结构

启动项目

1. 启动 web 项目

2. 启动 tauri 项目

构建应用

检查信息

【02】Tauri 入门篇 - 开发环境

Windows

1. Microsoft Visual Studio C++ Build Tools

2. WebView2

3. Rust

macOS

1. CLang 和 macOS 开发依赖项

2. Rust

更新及卸载

故障排除

【01】Tauri 入门篇 - 是什么

Tauri 是什么？

安全第一

Asar

多语言支持

开放源代码

Tauri vs Electron

Tauri 架构

Tauri 不是什么?

相关阅读

Rust + Vite = 🚀

rsw - wasm-pack based build tool

Feature

TODO

Usage

Logger

rsw.toml

Options

Example

How to implement the scroll progress bar

💠 Core

✍️ Implement - Vue3

🎥 Demo