Write the Code. Change the World.

11月 25

将 web 项目打包成桌面应用程序是一种常见的方式。用到的工具有 electron 和 tauri 等。这里使用 tauri。

准备工作

  1. 安装配置 tarui 环境。 https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites
  2. 准备一个 web 项目。

tauri 是可以从零开始创建项目,然后去完善项目的。但是,有的时候,项目已经完成了,这个时候,就需要在项目中加入 tauri。然后再构建打包了。

开始

https://tauri.app/zh-cn/v1/guides/getting-started/setup/integrate

先去 github 上下一个曾经的 web 项目,并运行起来。如下图所示。

git clone https://github.com/vinistudy/autoImglist.git

cd autoImglist

pnpm install 

pnpm dev

接着以此项目,为基础,构建 tauri 项目。

# 既然是第二次,这里我新建一个分支来搞
git checkout -b tauri

# 安装 tauri cli
pnpm add -D @tauri-apps/cli

# 生成配置 tauri 项目
pnpm tauri init

它会问你一些问题,依次敲入即可。 像下边这样。

❯ pnpm tauri init
✔ What is your app name? · imglist
✔ What should the window title be? · imglist
? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../dist
✔ What is the url of your dev server? · http://localhost:5173
✔ What is your frontend dev command? · pnpm run dev
✔ What is your frontend build command? · pnpm run build

这些,https://tauri.app/zh-cn/v1/guides/getting-started/setup/integrate 有说明。

好了,开始运行。

pnpm tauri dev

先是把 web 项目构建好,再去构建 tauri 项目。构建 tauri 项目需要等待一些时间。

外观上看,就像是页面被放在一个盒子里。只是不是刚才的 chrome。 里边东西还是 web。应用程序窗口该有的功能也有,拖动,resize 都是可以。最大化,最小化都是可以。

仅仅就上边 3 个命令,就可以将 web 构建成桌面应用程序。不要太简单快捷了。虽然是这样,体验缺陷还是有的,比如默认窗口大小,托盘,菜单等都没细节化。对应桌面应用程序的能力也还没用上。现在仅仅是把 web 装在一个壳里。

终究是一个好的开始。

让 web 和 tauri 沟通起来

tauri 这端是 rust 写的。web 这边是 js 写的。 tauri 提供了函数可以供 web 这端来调用。

懒了,懒了,上边链接有介绍。懒得弄了。

打包发布

刚才 dev 的时候,已经看过效果了。窗口默认 800 * 600,太小了不好看。改改窗口大小。

tauri 的一些配置文件在 src-tauri/tauri.conf.json 里。在其 windows 节点中,我们可以修改 titile 和 默认窗口的宽高。

我喜欢 1280 * 720 ,这里就改成这样子的。

不喜欢出现标题,将 title 值设置成空字符串。就改这么多。

    "windows": [
      {
        "fullscreen": false,
        "resizable": true,
        "title": "",
        "width": 1280,
        "height": 720,
        "center": true
      }
    ]

下边开始打包。在打包前,先修改下 identifier。 这个也是在 tauri.conf.json 中,我改的值是。各位可以根据自己的域名和项目来定义。

  "identifier": "com.vini123.autoimgs",

打包吧。

pnpm tauri build

tauri 很智能,在 mac 下会打包成 app 和 dmg。在 win 下会打包成 exe 和那个啥。还有如果想更换图标。也可以去里边更换。

打包成功。

运行打包后的包的效果图。

最后

个人第一次使用 tauri。就这么容易打出一个桌面应用程序来。的确是方便。最直接的体验就是。

  • web 页面和 tauri 程序可以完全分离。web 负责页面效果,tauri 负责构建成应用程序。当然,想做成体验好的,有特色的,他们之间的交互是要的。这个是后话,反正是能做到完全独立。这样不怕污染,省心。
  • 打的包体积小。
  • 看官方教程步骤一步一步来。竟然不会出错误。很顺利的就完成了上边几个方面的尝试。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注