Wails实现桌面番茄钟应用

0.项目背景

最近在优化自己的工作流，在工作方法上开始使用番茄钟来实现时间控制，一直觉得番茄钟的方式有点silly，直到自己用过之后才发现，番茄钟是真的好用，它不止是工作的方法，更是休息的艺术，让我们在完成工作的过程中不至于那么累，保证一直有充足的经历完成工作。有点扯远了，价值观的输出就到这里吧。

使用番茄钟首先要有个计时工具，在搜索了实体商品之后，感觉都差点意思，重要的是怕这东西成为桌面的累赘，本着如无必要，勿增实体的原则，决定还是使用应用程序来实现。

搜索了一圈网上的番茄钟，虽然有好多，但是有些感觉太重了，有些跟其他软件集成，用起来并没有那么方便。本着开源拿来即用的原则，我开始在github上找想要的东西，发现一个叫tomodoro的软件挺适合的，这个软件是用网页端的方式实现的，可以直接使用链接来使用，唯一不方便的就是这个东西没有办法脱离浏览器使用。

1.初探Wails

为了解决程序无法脱离浏览器使用的问题，我开始寻找怎么将网页应用打包成桌面端应用程序的方法，参照这篇文章，我最终选择了Wails来实现这个想法。

Wails自己的简介：

Wails 是一个可让您使用 Go 和 Web 技术编写桌面应用的项目。

将它看作为 Go 的快并且轻量的 Electron 替代品。您可以使用 Go 的灵活性和强大功能，结合丰富的现代前端，轻松的构建应用程序。

Wails依赖Node环境和Go环境，我们依照文档来进行安装。

1.1安装Wails

在安装完Go环境和Node环境之后，我们可以通过下面的命令来确认有没有安装完成，打开cmd

bash 复制代码

go version
node -v

如果都能运行，恭喜你，可以进行安装了，不过在安装之前，最好给Go添加一下国内镜像源，防止因为网络问题导致的安装失败，镜像源我这边选择七牛云的地址，为什么不用阿里云的镜像，是因为阿里云镜像上的Wails版本比较老，导致项目编译时报错，这个问题折腾了我大半天，特此说明一下。

Go设置国内镜像源

bash 复制代码

go env -w GOPROXY=https://goproxy.cn,direct

然后就可以执行安装命令了

bash 复制代码

go install github.com/wailsapp/wails/v2/cmd/wails@latest

当前最新版本是2.9.1，可以参考下

1.2检测Wails运行环境

Windows版使用的是WebView2的方式来进行网页的处理，所以要检测当前环境有没有符合Wails运行条件，主要就是检查Go、WebViews2、Node环境，Wails提供wails doctor命令来实现检查

bash 复制代码

wails doctor

可以看到前三个是正常的，就可以进行下面的开发了

1.3初始化Wails项目

wails自己的文档已经写得很详细了，我不再狗尾续貂了，我这边只记录下自己实现的过程。
wails init命令用来初始化项目，因为我们用的项目是原生js项目，所以选择下面的模板

bash 复制代码

wails init -n myproject -t vanilla

执行完毕会生成如下项目结构，frontend就是存放前端的文件夹

2.集成tomodoro项目

因为这个项目是原生js项目，没有应用前端框架，我们可以直接将项目文件放到frontend目录下的dist目录，让Wails在打包的时候直接将该项目打包进去。

Wails项目默认使用Vite进行打包，如果将前端代码放在src目录，后续打包还要修改js文件等引入方式，这个就比较麻烦了，对于我一个后端开发来说，成本比较高，我这边就采用了这种处理方式，如果其他项目有类似情况，也可以直接将项目打包后的dist文件丢进来，在Wails编译的时候选择跳过前端编译就可以，具体的命令就是wails build -s,这里的"-s"就是跳过前端打包的参数。

然后就可以愉快的进行打包应用了，打包之后的运行程序在项目build/bin目录下。

3.一些小改动

tomodoro项目支持pip的形式用来独立展现在桌面上，打包之后我们不需要这部分了，可以将相应的按钮隐藏掉，同时，我们希望程序能够始终展示在最前端，这个可以用修改main.go中的配置来进行操作。

go 复制代码

package main

import (
	"embed"

	"github.com/wailsapp/wails/v2"
	"github.com/wailsapp/wails/v2/pkg/options"
	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
)

//go:embed all:frontend/dist
var assets embed.FS

func main() {
	// Create an instance of the app structure
	app := NewApp()

	// Create application with options
	err := wails.Run(&options.App{
		Title:  "TomatoClock",
		Width:  512,
		Height: 384,
		AssetServer: &assetserver.Options{
			Assets: assets,
		},
		BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
		OnStartup:        app.startup,
		Bind: []interface{}{
			app,
		},
		//Frameless: true, //无边框
		AlwaysOnTop: true, //最上层

	})

	if err != nil {
		println("Error:", err.Error())
	}
}

这里的AlwaysOnTop 配置就可以实现我们的需求。其他需求可以通过参数选项文档来进行配置

本文代码及应用文件（去掉链接中中文）

链接：https://pan.b分aidu.com/s/1G享AsrqfmVWTLizU链LawIHBtg?pwd=zq1j 接

参考：

tomodoro项目地址：https://github.com/lazy-guy/tomodoro

wails文档：https://wails.io/zh-Hans/docs/next/introduction