除了Electron还能用什么？Tauri开发初探。

星始流年
5,694 阅读4分钟

前言

前端开发桌面端应用领域，Electron一直稳坐头把交易。Electron之外，新秀Tauri 正在崛起。Tauri可能并不是Electron的终结者，但热门框架(近12月日均约70star)的背后一定有它独有的优势。下面我们就从实战角度去接近Tauri。

Tauri简介

Tauri与Electron类似，都是前端的桌面端应用开发库，其官网slogan是Build smaller, faster, and more secure，也就是核心卖点在于编译速度更快、产物体积更小、安全性能更佳。除此之外，其与Electron之间的区别还在于：

  1. 框架后端基于rust而不是nodejs；
  2. 支持桌面端和移动端跨平台（不过移动端支持尚在开发中🙄）；
  3. Chromium无关，所用web引擎来自于平台底层（windows上会是WebView2，macos上会是WKWebView）。 凡事都应两面看待，这些区别带来的也有可能是潜在的缺陷或隐患。

接下来就让我们进入正题，上手开发！

示例开发：桌面应用

准备开发环境

使用Tauri开发前一定要安装Rust和系统依赖项，因为操作系统不同，要执行的操作自然也不同。

MacOS

如果是使用macOS开发，你通常需要执行以下命令：

  1. 安装CLang和macOS开发依赖项:
xcode-select --install
  1. 安装Rust
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh

Windows及其他

其他的平台可以参看官方文档，虽然是英文但介绍很详细，不太认识英文的同学，有道翻译你懂得。

不得不说，Tauri需要自行安装很多依赖的这点行为确实有点影响体验，特别是在国内安装很多东西经常会报一大堆错的情况下。不过好在只需要安装一次，忍忍也就过去了。

初始化项目

创建一个新的Tauri应用可以使用yarn create tauri-app或者npx create-tauri-app，在一系列下载及输入完成后来到脚手架选择界面，可以看到官方提供的脚手架模板还是非常丰富的： image.png 这里我们选择了vite+react+ts的组合。 静静等待任务完成后，便可切换至通过yarn tauri dev来启动项目。

失败请注意 如果到这一步，你的项目启动失败了。那很可能是某一项依赖或环境出了问题，这时可以执行yarn tauri info命令来对当前项进行检查，一份正常的检查清单应该是下面这样的：

image.png

结构简介

浅浅了解一下目录结构：

.
├── index.html             //入口Html
├── node_modules
├── package.json           
├── src                    //写前端代码的地方，与普通前端项目并无二异
│   ├── App.css
│   ├── App.tsx
│   ├── favicon.svg
│   ├── index.css
│   ├── logo.svg
│   ├── main.tsx
│   └── vite-env.d.ts
├── src-tauri             
│   ├── Cargo.toml
│   ├── build.rs
│   ├── icons
│   ├── src               //写后端代码的地方
│   └── tauri.conf.json   //应用配置都在这里
├── tree.txt
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock

以上结构除了src-tauri文件夹，其余的都和我们平时的前端项目没有太大差别。这也是其容易上手的表现所在。

编译打包

Tauri的打包命令是yarn tauri build，与Electron不同，Tauri只能生成当前操作系统对应的程序包。这点可以说是Tauri最令人不满意的地方。但所幸也有多平台打包的解决方案，这里向大家介绍下通过github actions来完成跨平台打包的实现方法。

github actions 其实就是一种前端CI/CD的实现途径，与我另外一篇文章中谈到的思路基本上是一样的。感兴趣的可以移步# 🛫 前端自动化部署：借助Gitlab CI/CD实现

Step1

既然是要利用github actions，那么首先你得在github上创建你的代码仓库。具体步骤就不多说了。

Step2

其次是最关键的，要在仓库根目录下的.github/workflows文件夹中添加actions编译命令。

  1. 切换至github的actions标签页，点击set up a workflow youself —>来创建yml脚本。

image.png

2.接下来需要填充脚本内容，请复制以下内容后commit：

name: Release
on:
  push:
    tags:
      - 'v*'
  workflow_dispatch:

jobs:
  release:
    strategy:
      fail-fast: false
      matrix:
        platform: [macos-latest, ubuntu-latest, windows-latest]
    runs-on: ${{ matrix.platform }}
    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

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

      - name: Rust setup
        uses: actions-rs/toolchain@v1
        with:
          toolchain: stable

      - 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
      - name: Install app dependencies and build web
        run: yarn && yarn build

      - name: Build the app
        uses: tauri-apps/tauri-action@v0

        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tagName: v__VERSION__ # tauri-action replaces \_\_VERSION\_\_ with the app version
          releaseName: 'v__VERSION__'
          releaseBody: 'See the assets to download this version and install.'
          releaseDraft: true
          prerelease: false
  1. 点击Run workflow按钮以开始构建。

image.png

构建中可以点击任务查看构建进展。

image.png

下图所示是完成时的情况。

image.png

  1. 在Release界面查看、下载应用包（可以看到，包体积是比较小的）。

image.png

应用效果

这里简单生成了一个动态大表情的Demo，大家可以看看效果。

Kapture 2022-06-15 at 19.55.27.gif

ps. 这个大表情未来是打算做成一个类似小助手的应用的，大家如果有任何想法欢迎来提。这里是仓库地址。

结语🎆🎆🎆🎆

至此，我们对Tauri开发的流程就简要介绍完毕了。如果你在此过程中碰到了任何问题，大多数都能通过查阅官方文档找到解决方案。当然也欢迎评论区提问（只是我也不一定会罢了哈哈）。

avatar
文章
阅读
粉丝