搜索
参与贡献

编辑此文档

翻译文档，或在您的计算机上打开完整项目。

在您选择提交工作成果之前，不会发布任何内容。

你的第一个应用

在 10 分钟内构建一个可运行的 Wails 应用

我们将构建一个简单的问候应用，以演示 Wails 的核心概念：

  • 由 Go 后端管理逻辑
  • 前端调用 Go 函数
  • 类型安全的绑定
  • 开发期间热重载

完成所需时间：10 分钟

创建项目

1

生成项目

bash
wails3 init -n myapp
cd myapp

这将使用默认的 Vanilla + Vite 模板（HTML/CSS/TypeScript，使用 Vite 打包器）创建一个新项目。

2

了解项目结构

text
myapp/
├── main.go              # Application entry point
├── greetservice.go      # Greet service
├── frontend/            # Your UI code
│   ├── index.html       # HTML entry point
│   ├── src/
│   │   └── main.ts      # Frontend TypeScript
│   ├── public/
│   │   └── style.css    # Styles
│   ├── package.json     # Frontend dependencies
│   ├── tsconfig.json    # TypeScript configuration
│   └── vite.config.ts   # Vite bundler config
├── build/               # Build configuration
└── Taskfile.yml         # Build tasks
3

运行应用

bash
wails3 dev

应用打开后会显示问候界面。输入你的姓名并单击“问候”——Go 后端会处理输入并返回问候语。

工作原理

下面来了解实现这一功能的代码。

Go 后端

打开 greetservice.go：

greetservice.go
go
package main

import (
	"fmt"
)

type GreetService struct{}

func (g *GreetService) Greet(name string) string {
	return fmt.Sprintf("Hello %s, It's show time!", name)
}

核心概念：

  1. 服务——包含导出方法的 Go 结构体
  2. 导出方法——Greet以大写字母开头，因此前端可以调用它
  3. 简单逻辑——接收姓名并返回问候语
  4. 类型安全——输入和输出类型均有明确定义

注册服务

打开 main.go，找到服务注册代码：

main.go
go
err := application.New(application.Options{
    Name: "myapp",
    Services: []application.Service{
        application.NewService(&GreetService{}),
    },
    // ... other options
})

这会向 Wails 注册 GreetService，使其所有导出方法都可供前端调用。

前端

打开 frontend/src/main.js：

frontend/src/main.js
javascript
import {GreetService} from "../bindings/changeme";

window.greet = async () => {
    const nameElement = document.getElementById('name');
    const resultElement = document.getElementById('result');

    const name = nameElement.value;
    if (!name) {
        return;
    }

    try {
        const result = await GreetService.Greet(name);
        resultElement.innerText = result;
    } catch (err) {
        console.error(err);
    }
};

核心概念：

  1. 自动生成的绑定——GreetService从生成的代码中导入
  2. 类型安全调用——方法名称和签名与 Go 代码一致
  3. 默认异步——所有 Go 调用都会返回 Promise
  4. 错误处理——来自 Go 的错误会在 try/catch 中被捕获

自定义应用

下面添加一项新功能，以了解整个工作流程。

添加“批量问候”功能

1

向 GreetService 添加方法

将以下内容添加到 greetservice.go：

greetservice.go
go
func (g *GreetService) GreetMany(names []string) []string {
    greetings := make([]string, len(names))
    for i, name := range names {
        greetings[i] = fmt.Sprintf("Hello %s!", name)
    }
    return greetings
}
2

应用将自动重新构建

保存文件后，wails3 dev会自动重新构建 Go 代码并重启应用。

3

在前端中使用该功能

将以下内容添加到 frontend/src/main.js：

frontend/src/main.js
javascript
window.greetMany = async () => {
    const names = ['Alice', 'Bob', 'Charlie'];
    const greetings = await GreetService.GreetMany(names);
    console.log(greetings);
};

打开浏览器控制台并调用 greetMany()——你将看到问候语数组。

构建生产版本

准备分发应用时：

bash
wails3 build

此操作会：

  • 启用优化编译 Go 代码
  • 为生产环境构建前端（压缩代码）
  • 在 bin/ 中创建原生可执行文件

输出：bin/myapp.exe

双击即可运行。无需安装依赖项（WebView2 是 Windows 的一部分）。

我们学到了什么

项目结构

  • main.go用于 Go 后端
  • frontend/用于 UI 代码
  • Taskfile.yml用于构建任务

服务

  • 创建包含导出方法的 Go 结构体
  • 使用application.NewService()注册
  • 方法自动可供前端使用

绑定

  • 自动生成 TypeScript 定义
  • 类型安全的函数调用
  • 默认异步（Promise）

开发工作流

  • wails3 dev用于热重载
  • Go 代码发生更改时自动重新构建并重启
  • 前端代码发生更改时立即热重载

有问题？加入Discord并向社区提问。

编辑页面

最后更新：