Go跨平台Wails框架入门教程

前言

Go跨平台Wails UI应用框架是一个强大的工具，它允许开发者利用Go语言的性能优势和Web技术的灵活性来构建跨平台的桌面应用程序。以下是一个详细的Wails应用框架应用教程及相关示例的概述。

一、Wails简介

Wails是一个开源项目，旨在让开发者能够使用Go和Web技术（如React、Vue等）来构建桌面应用。它提供了一种轻量级且高效的解决方案，相比传统的Electron框架，Wails构建的应用具有更小的体积和更快的启动速度。
在这里插入图片描述

二、开发环境准备

安装Go：确保你的系统上安装了Go语言环境。可以从Go官网下载并安装。
安装Wails CLI：通过运行go install github.com/wailsapp/wails/v2/cmd/wails@latest命令来安装Wails的命令行工具。
安装Node.js和npm：Wails项目通常包含前端代码，因此需要Node.js和npm来管理前端依赖。
安装其他依赖：根据Wails的官方文档，你可能还需要安装一些系统级的依赖，如libwebkit2gtk-4.0-dev（Linux）或webview2（Windows）。

三、创建新项目

使用Wails CLI创建一个新项目非常简单。只需在命令行中运行类似以下命令（以Vue为例）：

wails init -n my-wails-project -t vue

这个命令会创建一个名为my-wails-project的新项目，并配置Vue作为前端框架。

四、项目结构

Wails项目的典型结构包括：

main.go 和 app.go：包含Go代码，处理业务逻辑、数据管理和与前端的通信。
frontend 文件夹：包含前端的所有代码，如Vue或React组件。
go.mod 和 go.sum：Go的模块依赖文件。
wails.json：Wails项目的配置文件，定义了如何构建和打包应用。
build 文件夹：用于存放构建后的应用程序和相关资源。

五、开发流程

编写Go代码：在main.go和app.go等Go文件中编写后端逻辑，如API接口、数据库操作等。
编写前端代码：在frontend文件夹中，使用Vue或React等框架编写前端页面和组件。
绑定Go和前端：通过Wails的绑定机制，可以在前端JavaScript中直接调用Go函数，实现前后端的无缝通信。
运行和调试：使用wails dev命令启动开发服务器，并在浏览器中打开前端页面进行调试。
构建和打包：使用wails build命令构建并打包应用，生成可在不同平台上运行的可执行文件。

六、示例

以下是一个简单的示例，展示如何使用Wails构建一个简单的桌面应用：

创建项目：按照前面的步骤创建一个新项目。

编写Go代码：在app.go中添加一个简单的Go函数，例如一个返回问候语的函数。

package mainimport ("fmt"
)// App 结构体
type App struct{}// Greet 方法
func (a *App) Greet(name string) string {return fmt.Sprintf("Hello, %s!", name)
}

编写前端代码：在Vue组件中，调用这个Go函数并显示结果。

<template><div><h1>{{ greeting }}</h1><button @click="greet">Greet</button></div>
</template><script>
import { ref } from 'vue';
import { Greet } from '../wailsjs/main/App'; // 假设Wails已自动生成TypeScript定义export default {setup() {const greeting = ref('');const greet = async () => {const response = await Greet('World');greeting.value = response;};return { greeting, greet };},
};
</script>

请注意，上述Vue代码中的Greet函数是从Wails自动生成的TypeScript定义中导入的，这取决于你的Wails版本和配置。

运行和测试：使用wails dev命令启动开发服务器，并在浏览器中查看应用。

其他示例

当然，我可以继续给出更多关于Wails框架的示例，以帮助您更好地理解其用法和功能。以下是一些额外的示例，涵盖了不同的应用场景和功能：

示例一：构建一个简单的待办事项应用

1. 后端Go代码（app.go）

package mainimport ("fmt""sync"
)// Task 表示一个待办事项
type Task struct {ID    intTitle stringDone  bool
}// App 结构体包含待办事项列表和同步锁
type App struct {Tasks []Taskmu    sync.Mutex
}// AddTask 方法添加新的待办事项
func (a *App) AddTask(title string) {a.mu.Lock()defer a.mu.Unlock()a.Tasks = append(a.Tasks, Task{ID: len(a.Tasks) + 1, Title: title, Done: false})
}// ToggleTask 方法切换待办事项的完成状态
func (a *App) ToggleTask(id int) {a.mu.Lock()defer a.mu.Unlock()for _, task := range a.Tasks {if task.ID == id {task.Done = !task.Donebreak}}
}// GetTasks 方法返回所有待办事项
func (a *App) GetTasks() []Task {a.mu.Lock()defer a.mu.Unlock()tasksCopy := make([]Task, len(a.Tasks))copy(tasksCopy, a.Tasks)return tasksCopy
}

2. 前端Vue代码（示例组件）

在Vue组件中，您可以调用上述Go方法，并展示待办事项列表。这里只给出Vue组件的模板部分，具体实现需要根据您的项目结构进行调整。

<template><div><input v-model="newTaskTitle" @keyup.enter="addTask" placeholder="Add new task" /><button @click="addTask">Add</button><ul><li v-for="(task, index) in tasks" :key="task.ID"><input type="checkbox" :checked="task.Done" @change="toggleTask(index)" />{{ task.Title }}</li></ul></div>
</template><script>
import { ref } from 'vue';
import { AddTask, ToggleTask, GetTasks } from '../wailsjs/main/App'; // 假设Wails已自动生成TypeScript定义export default {setup() {const newTaskTitle = ref('');const tasks = ref([]);const fetchTasks = async () => {tasks.value = await GetTasks();};const addTask = async () => {if (newTaskTitle.value.trim() !== '') {await AddTask(newTaskTitle.value);newTaskTitle.value = '';await fetchTasks();}};const toggleTask = async (index) => {const taskID = tasks.value[index].ID;await ToggleTask(taskID);await fetchTasks();};onMounted(() => {fetchTasks();});return { newTaskTitle, tasks, addTask, toggleTask };},
};
</script>

注意：上面的Vue代码示例使用了Vue 3的Composition API，并且假设AddTask、ToggleTask和GetTasks方法已经被Wails自动生成的TypeScript定义所导出。在实际项目中，您需要根据Wails的实际输出进行调整。

示例二：使用Wails构建带有原生菜单的应用

Wails支持创建带有原生菜单的桌面应用。这可以通过在main.go中配置菜单项并在运行时显示它们来实现。

1. 配置菜单（main.go）

package mainimport ("github.com/wailsapp/wails""github.com/wailsapp/wails/lib/menu"
)func buildMenu() *menu.Menu {menuItems := []*menu.MenuItem{{Label:     "File",SubMenu: []*menu.MenuItem{{Label: "Quit", Action: func() { /* 实现退出逻辑 */ }},},},{Label:     "Edit",SubMenu: []*menu.MenuItem{{Label: "Preferences", Action: func() { /* 实现首选项窗口 */ }},},},}return menu.NewMenu("MyApp", menuItems)
}func main() {// ... 初始化Wails应用 ...app := wails.CreateApp()menu := buildMenu()app.Menus.Main = menu// ... 其余的应用初始化代码 ...
}

注意：上面的代码示例是一个简化的版本，用于说明如何在Wails中配置菜单。在实际应用中，您需要根据您的应用需求来定义菜单项和它们的动作。

七、总结

Wails框架为Go开发者提供了一个强大且灵活的平台，用于构建跨平台的桌面应用。通过结合Go的性能和Web技术的易用性，开发者可以轻松地创建出功能丰富、用户体验优秀的桌面应用。上述示例展示了Wails在不同场景下的应用，包括待办事项管理和原生菜单的创建。希望这些示例能够帮助您更好地理解和使用Wails框架。