Go Wails 教程：从零到一创建你的第一个桌面App – wiki词典

作者： /

“`markdown

Go Wails 教程：从零到一创建你的第一个桌面App

Wails 是一个创新的框架，它允许你使用 Go 语言作为后端，并结合 Web 技术（HTML, CSS, JavaScript）来构建跨平台的桌面应用程序。与 Electron 等框架相比，Wails 通过利用原生渲染引擎而非嵌入一个完整的浏览器，提供了一个轻量级的替代方案。

本教程将引导你完成从环境搭建到成功构建一个简单应用的全过程。

1. 环境准备 (Prerequisites)

在开始之前，请确保你的系统已经安装了以下软件：

  • Go: 推荐使用 1.21 或更高版本。你可以从 Go 官方网站 下载。请确保将 Go 的 bin 目录（通常是 ~/go/bin）添加到你的系统 PATH 环境变量中。
  • npm (Node Package Manager): Wails 需要 Node.js 环境来管理前端依赖。你可以从 Node.js 官方网站 下载并安装，npm 会随之一起安装。
  • 平台特定依赖:
    • Windows: 需要安装 WebView2 runtime。你可以通过 wails doctor 命令来检查系统是否已安装。
    • macOS: 需要安装 Xcode Command Line Tools。在终端运行 xcode-select --install 即可。
    • Linux: 需要 gcc、libgtk3 和 libwebkit2gtk-4.0-dev。你可以先尝试安装 Wails，然后运行 wails doctor，它会提供针对你的发行版的具体安装命令。

2. 安装 Wails CLI

打开你的终端或命令提示符，运行以下命令来安装 Wails 命令行工具（CLI）:

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

安装完成后，可以运行 wails doctor 来检查你的开发环境是否配置正确。

3. 创建你的第一个 Wails 项目

使用 wails init 命令来初始化一个新的项目。你可以指定项目名称和前端模板。Wails 支持多种流行的前端框架，如 React, Vue, Svelte, Preact 等。

例如，创建一个名为 my-first-app 并且使用 React 模板的项目：

bash
wails init -n my-first-app -t react

Wails 会自动为你创建一个包含所有必要文件的项目结构。

4. 理解项目结构

进入新创建的项目目录 my-first-app，你会看到以下核心文件和目录：

my-first-app/
├── main.go # Go 后端入口文件
├── go.mod # Go 模块依赖文件
├── go.sum
├── build/ # 构建输出目录
└── frontend/ # 所有前端代码
├── src/
├── package.json
└── ... (前端框架相关文件)

  • main.go: 这是你 Go 后端应用的起点。你可以在这里定义应用窗口的配置（如标题、尺寸）以及需要暴露给前端的 Go 方法。
  • frontend/: 这个目录包含了所有的前端资源，包括 HTML, CSS, JavaScript 以及你选择的前端框架的源文件。

5. 编写后端逻辑 (Go)

打开 main.go 文件。Wails 已经为我们生成了一些模板代码。

默认代码中会有一个 App 结构体和一个 Greet 方法。这个 Greet 方法就是一个可以从前端调用的例子。所有在 App 结构体上以大写字母开头的公共方法，都可以被绑定并暴露给前端。

让我们来修改一下 Greet 方法，让它更有趣一点：

“`go
package main

import (
“context”
“fmt”
)

// App struct
type App struct {
ctx context.Context
}

// NewApp creates a new App application struct
func NewApp() *App {
return &App{}
}

// startup is called when the app starts. The context is saved
// so we can call the runtime methods
func (a *App) startup(ctx context.Context) {
a.ctx = ctx
}

// Greet returns a greeting for the given name
func (a *App) Greet(name string) string {
if name == “” {
return “你好, 陌生人!”
}
return fmt.Sprintf(“你好, %s! 欢迎使用 Wails!”, name)
}
“`

6. 编写前端界面 (Frontend)

现在，我们来修改前端代码，以便调用我们刚才在 Go 后端定义的 Greet 方法。

进入 frontend/src 目录，找到主要的 React 组件文件（通常是 App.jsx 或类似的文件）。

Wails 会自动在 frontend/wailsjs/go 目录下生成与你的 Go 代码对应的 TypeScript 声明。你可以在前端代码中直接导入并使用它们。

修改 App.jsx 文件如下：

“`jsx
import {useState} from ‘react’;
import ‘./App.css’;
// 从 wailsjs 中导入我们后端暴露的方法
import {Greet} from ‘../wailsjs/go/main/App’;

function App() {
const [resultText, setResultText] = useState(“点击按钮, 与 Go 后端交互!”);
const [name, setName] = useState(”);

const updateName = (e) => setName(e.target.value);

// 定义一个函数来调用 Go 方法
const doGreet = () => {
    // 调用我们从 Go 导入的 Greet 方法
    Greet(name).then(result => setResultText(result));
};

return (
    <div id="App">
        <div id="input" className="input-box">
            <input id="name" className="input" onChange={updateName} autoComplete="off" name="input" type="text"/>
            <button className="btn" onClick={doGreet}>Greet</button>
        </div>
        <div className="result">{resultText}</div>
    </div>
)

}

export default App
“`

7. 运行和调试

在项目根目录下运行 wails dev 命令，启动开发模式：

bash
cd my-first-app
wails dev

Wails 会自动编译 Go 代码，启动应用，并开启一个热重载服务器。任何对 Go 或前端文件的修改都会触发自动重新加载，极大地提升了开发效率。你可以像开发普通网页一样，使用浏览器开发者工具来调试前端界面。

8. 构建和打包

当你对应用感到满意后，就可以将其打包成一个独立的可执行文件了。运行 wails build 命令：

bash
wails build

Wails 会将 Go 后端和前端资源编译并打包在一起，在 build/bin 目录下生成一个与你的操作系统对应的可执行文件（例如，在 Windows 上是 .exe 文件，在 macOS 上是 .app 文件）。

这个文件是完全独立的，不依赖任何外部的 Node.js 或 Go 环境，你可以直接分发给用户。

总结

恭喜你！你已经成功创建了自己的第一个使用 Go 和 Wails 构建的桌面应用程序。本教程仅仅是一个开始，Wails 还提供了更多强大的功能，例如：

  • 事件系统: 在 Go 和 JavaScript 之间双向发送和监听事件。
  • 原生对话框: 调用操作系统的文件选择、消息提示等对话框。
  • 自定义菜单和托盘: 创建原生应用菜单和系统托盘图标。

要了解更多信息，请务必查阅 Wails 官方文档。
“`

滚动至顶部