Saki's 研究记录

Wails

字数统计: 1k阅读时长: 4 min
2023/09/26

简介

github: wailsapp/wails
C/S模式,一个后端服务,一个前端页面作为UI。前端可以使用 Vue / React / Angular,可以说很适合偏前端的选手。

Go语言的桌面解决方案来了——Wails,一个能让你使用 Go语言创建漂亮桌面应用的项目。从其官网的描述来看,它提供的解决方案如 Tauri类似,只是后端语言换作了 Go语言,前端开发依旧采用 HTML/CSS/Javascript,采用 Web渲染引擎进行界面绘制。
桌面级别的应用开发依然是各个语言争相角逐的领域。 C#有微软推出的 MAUI,以及 WinFormWPF,依旧占据桌面应用开发的绝对主导地位。
Node.jsJavascript语言带入火热的后端应用开发领域,然而 Electron项目却让 Javascript语言在桌面应用开发中也占有了一席之地,依靠强大的前后端 Web生态,在桌面开发中也玩得风生水起。
多端跨平台解决方案也是层次不穷,最值得关注的就是 Google所推出的 Flutter项目,目前可以说是真正的多端(移动端/ Web端/桌面端),多平台( Windows/Linux/Android/iOS/macOS)的解决方案,其对桌面应用开发也已经正式发布。
目前势头发展很猛的 Rust语言最近也推出了桌面应用开发框架 Tauri 1.0版本,也标志着 Rust语言的桌面级应用开发也准备就绪了。

安装

安装(Installing Wails):

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

系统检查(System Check):

检查是否安装了正确的依赖项

1
wails doctor

安装 *upx

1
brew install --build-from-source upx

安装 *nsis
makensis System to create Windows installers.

1
brew install makensis

更新

自动更新:

1
2
3
4
# Wails update
Wails CLI v2.0.0-beta.39.2

Checking for updates...

创建项目

现在 CLI已安装,您可以使用该 wails init命令生成一个新项目。
为了快速启动和运行,您可以通过运行 wails init -n myproject生成一个默认项目。这将创建一个名为 myproject的目录,并使用默认模板填充它。

1
wails init -d . -n 项目名称 -t vue # 其中-d .代表当前文件夹下创建,不加的话会创建一个-n名称的文件夹

其他可用的项目模板可以使用 wails init -l 列出。这里也有提供不同功能和框架的社区模板。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#wails init -l
Wails CLI v2.0.0-beta.39.2

TEMPLATE SHORT NAME DESCRIPTION
Lit + Vite lit Lit + Vite development server
Lit + Vite (Typescript) lit-ts Lit + TS + Vite development server
Plain HTML/JS/CSS plain A simple template using only HTML/CSS/JS
Preact + Vite preact Preact + Vite development server
Preact + Vite (Typescript) preact-ts Preact + Vite development server
React + Vite react React + Vite development server
React + Vite (Typescript) react-ts React + Vite development server
Svelte + Vite svelte Svelte + Vite development server
Svelte + Vite (Typescript) svelte-ts Svelte + TS + Vite development server
Vanilla + Vite vanilla Vanilla + Vite development server
Vanilla + Vite (Typescript) vanilla-ts Vanilla + Vite development server
Vue + Vite vue Vue + Vite development server
Vue + Vite (Typescript) vue-ts Vue + Vite development server

Wails项目具有以下布局:

1
2
3
4
5
6
7
8
9
10
.
├── build/
│ ├── appicon.png
│ ├── darwin/
│ └── windows/
├── frontend/
├── go.mod
├── go.sum
├── main.go
└── wails.json

项目结构概要

  • /main.go - 主应用
  • /frontend/ - 前端项目文件
  • /build/ - 项目构建目录
    • /build/appicon.png - 应用程序图标
    • /build/darwin/ - Mac 特定的项目文件
    • /build/windows/ - Windows 特定的项目文件
  • /wails.json - 项目配置
  • /go.mod - Go mod 文件
  • /go.sum - Go mod 校验文件

frontend目录没有特定于 Wails 的内容,可以是您选择的任何前端项目。
build目录在构建过程中使用。这些文件可以修改以自定义您的构建。如果文件从构建目录中删除,将重新生成默认版本。
go.mod中的默认模块名称是 changeme。您应该将其更改为更合适的内容。

热更新

在当前目录下用命令行开启开发者热加载工具查看效果:

1
wails dev

编译/运行

从项目目录,运行 wails build。 这将编译您的项目并将构建的可用于生产的二进制文件保存在 build/bin 目录中。

1
wails build

开发

接下来看看事件是如何交互的。
有中文文档,却完全没有一个示例……

参考

https://learnku.com/go/t/36913

以上。

CATALOG
  1. 1. 简介
  2. 2. 安装
  3. 3. 更新
  4. 4. 创建项目
  5. 5. 热更新
  6. 6. 编译/运行
  7. 7. 开发
  8. 8. 参考