Поиск
Внести изменения

Редактировать эту документацию

Переведите документацию или откройте весь проект на своём компьютере.

Ничего не будет опубликовано, пока вы не решите отправить свою работу.

Ваше первое приложение

Создайте работающее приложение Wails за 10 минут

Мы создадим простое приложение с приветствием, демонстрирующее основные концепции 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
})

Так вы зарегистрируете GreetService в Wails, сделав все его экспортируемые методы доступными фронтенду.

Фронтенд

Откройте 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/ для кода пользовательского интерфейса
  • Taskfile.yml для задач сборки

Сервисы

  • Создавайте структуры Go с экспортируемыми методами
  • Регистрируйте с помощью application.NewService()
  • Методы автоматически становятся доступны во фронтенде

Привязки

  • Автоматически создаваемые определения TypeScript
  • Типобезопасные вызовы функций
  • Асинхронность по умолчанию (Promise)

Процесс разработки

  • wails3 dev для горячей перезагрузки
  • При изменениях в коде Go приложение автоматически пересобирается и перезапускается
  • Изменения во фронтенде мгновенно применяются с помощью горячей перезагрузки

Есть вопросы? Присоединяйтесь к Discord и задайте их сообществу.

Редактировать страницу

Последнее обновление: