Go跨平台Wails框架入门教程

前言

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

一、Wails简介

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

二、开发环境准备

1. 安装Go：确保你的系统上安装了Go语言环境。可以从Go官网下载并安装。
2. 安装Wails CLI：通过运行go install github.com/wailsapp/wails/v2/cmd/wails@latest命令来安装Wails的命令行工具。
3. 安装Node.js和npm：Wails项目通常包含前端代码，因此需要Node.js和npm来管理前端依赖。
4. 安装其他依赖：根据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 文件夹：用于存放构建后的应用程序和相关资源。

五、开发流程

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

六、示例

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

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

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

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

3. 编写前端代码：在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版本和配置。

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

其他示例

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

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

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

package main

import (
	"fmt"
	"sync"
)

// Task 表示一个待办事项
type Task struct {
	ID    int
	Title string
	Done  bool
}

// App 结构体包含待办事项列表和同步锁
type App struct {
	Tasks []Task
	mu    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.Done
			break
		}
	}
}

// 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 main

import (
	"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框架。