前言
前端开发桌面端应用领域,Electron一直稳坐头把交易。Electron之外,新秀Tauri 正在崛起。Tauri可能并不是Electron的终结者,但热门框架(近12月日均约70star)的背后一定有它独有的优势。下面我们就从实战角度去接近Tauri。
Tauri简介
Tauri与Electron类似,都是前端的桌面端应用开发库,其官网slogan是Build smaller, faster, and more secure
,也就是核心卖点在于编译速度更快、产物体积更小、安全性能更佳。除此之外,其与Electron之间的区别还在于:
- 框架后端基于rust而不是nodejs;
- 支持桌面端和移动端跨平台(不过移动端支持尚在开发中🙄);
- Chromium无关,所用web引擎来自于平台底层(windows上会是WebView2,macos上会是WKWebView)。 凡事都应两面看待,这些区别带来的也有可能是潜在的缺陷或隐患。
接下来就让我们进入正题,上手开发!
示例开发:桌面应用
准备开发环境
使用Tauri开发前一定要安装Rust和系统依赖项,因为操作系统不同,要执行的操作自然也不同。
MacOS
如果是使用macOS开发,你通常需要执行以下命令:
- 安装CLang和macOS开发依赖项:
xcode-select --install
- 安装Rust
curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh
Windows及其他
其他的平台可以参看官方文档,虽然是英文但介绍很详细,不太认识英文的同学,有道翻译你懂得。
不得不说,Tauri需要自行安装很多依赖的这点行为确实有点影响体验,特别是在国内安装很多东西经常会报一大堆错的情况下。不过好在只需要安装一次,忍忍也就过去了。
初始化项目
创建一个新的Tauri应用可以使用yarn create tauri-app
或者npx create-tauri-app
,在一系列下载及输入完成后来到脚手架选择界面,可以看到官方提供的脚手架模板还是非常丰富的:
这里我们选择了
vite
+react
+ts
的组合。
静静等待任务完成后,便可切换至通过yarn tauri dev
来启动项目。
失败请注意 如果到这一步,你的项目启动失败了。那很可能是某一项依赖或环境出了问题,这时可以执行yarn tauri info
命令来对当前项进行检查,一份正常的检查清单应该是下面这样的:
结构简介
浅浅了解一下目录结构:
.
├── 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编译命令。
- 切换至github的actions标签页,点击
set up a workflow youself —>
来创建yml脚本。
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
- 点击
Run workflow
按钮以开始构建。
构建中可以点击任务查看构建进展。
下图所示是完成时的情况。
- 在Release界面查看、下载应用包(可以看到,包体积是比较小的)。
应用效果
这里简单生成了一个动态大表情的Demo,大家可以看看效果。
ps. 这个大表情未来是打算做成一个类似小助手的应用的,大家如果有任何想法欢迎来提。这里是仓库地址。
结语🎆🎆🎆🎆
至此,我们对Tauri开发的流程就简要介绍完毕了。如果你在此过程中碰到了任何问题,大多数都能通过查阅官方文档找到解决方案。当然也欢迎评论区提问(只是我也不一定会罢了哈哈)。