第一个应用

wails cli 提供了初始化项目的功能，只需要输入命令即可快速生成一个的项目！

创建项目

使用以下命令，这将创建一个新项目。

wails3 init -n myapp # 不指定模版，默认为vanilla版本
wails3 init -n myapp init -t vanilla # Vanilla + Vite 模板（纯 HTML/CSS/JS 和 Vite 打包器）
wails3 init -n myapp init -t vanilla-ts # Vanilla 模板的ts版本
wails3 init -n myapp init -t react # Vanilla + react 模板
wails3 init -n myapp init -t vue # Vanilla + vue 模板

wails3 init -l 可查看所有可用项目模板，不过对于初学者建议使用纯Html的Vanilla即可！

运行项目

执行以下命令即可运行项目

wails3 dev

提示

首次运行可能比预期时间长，因为它需要安装前端依赖项、生成绑定等。后续运行速度会快得多。

前端项目默认使用 npm，如果想要改为 pnpm ：则启动的时候 PACKAGE_MANAGER=pnpm wails3 dev 或者修改默认配置 Taskfile.yml

项目结构

myapp/
├── main.go              # 应用入口
├── greetservice.go      # 问候服务
├── frontend/            # 前端界面代码
│   ├── index.html       # HTML 入口
│   ├── src/
│   │   └── main.js      # 前端 JavaScript
│   ├── public/
│   │   └── style.css    # 样式文件
│   ├── package.json     # 前端依赖
│   └── vite.config.js   # Vite 打包配置
├── build/               # 构建配置
└── Taskfile.yml         # 构建任务

让我们来了解一下实现这一功能的代码,理解其工作原理

后端

导出了一个带有具体方法实现的结构体（可以看作是Go语言的Class）

greetservice.go

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

提示

在 Wails 中，服务可以理解为提供给前端调用的后端 API。它本质上就是普通的 Go 结构体，只要把带有导出方法的结构体注册到应用配置的 Services 中，Wails 就能把这些方法暴露给前端。

绑定则是 Wails 自动生成的 TypeScript/JavaScript 调用层。执行 wails3 dev 或 wails3 build 时，Wails 会分析已注册的服务，并在 frontend/bindings/ 下生成对应的前端 SDK，让前端可以像调用普通异步函数一样调用 Go 方法。

简单来说：服务负责提供能力，绑定负责把这些能力接到前端。

注册服务

这会将您的GreetService 注册到 Wails，使其所有导出的方法都可供前端使用

main.go

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

前端

当你运行或构建程序的时候， frontend/bindings 绑定程序会自动生成，你无须关心！

rontend/src/main.js

import {GreetService} from "../bindings/changeme";

window.greet = async () => {
    const nameElement = document.getElementById('name');
    const resultElement = document.getElementById('result');
    try {
        const result = await GreetService.Greet(nameElement.value);
        resultElement.innerText = result;
    } catch (err) {
        console.error(err);
    }
};

特性介绍

自动生成绑定：自动生成绑定程序，并提供Ts的类型安全（Go 代码匹配）
默认异步：所有 Go 调用都返回 Promise
错误处理：Go 中的错误通过 try/catch 语句捕获。
自动构建：Go 和前端代码的更改会触发自动重新构建和重启。

构建打包

准备好发布您的应用时，执行以下命令即可

wails3 build

它会编译 Go 代码并进行优化，构建用于生产环境的前端（已压缩），创建一个本地可执行文件bin。

#第一个应用

#创建项目

#运行项目

#项目结构

#后端

#注册服务

#前端

#构建打包