Перейти к содержимому
Wails Blog

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

Мы создадим простое приветственное приложение, которое демонстрирует основные концепции Wails:

  • Бэкенд на Go, управляющий логикой
  • Фронтенд, вызывающий функции Go
  • Типобезопасные привязки (bindings)
  • Горячая перезагрузка (hot reload) во время разработки

Время на выполнение: 10 минут

Создание вашего проекта

Заголовок раздела «Создание вашего проекта»

  1. Сгенерируйте проект

    Окно терминала
    wails3 init -n myapp
    cd myapp

    Это создаст новый проект с шаблоном по умолчанию Vanilla + Vite (чистый HTML/CSS/JS с сборщиком Vite).

  2. Поймите структуру проекта

    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         # Задачи сборки

  3. Запустите приложение

    Окно терминала
    wails3 dev

    Приложение откроется, показывая интерфейс приветствия. Введите свое имя и нажмите “Greet” — бэкенд на Go обработает ваш ввод и вернет приветствие.

Как это работает

Заголовок раздела «Как это работает»

Давайте разберем код, который обеспечивает эту работу.

Бэкенд на Go

Заголовок раздела «Бэкенд на Go»

Откройте greetservice.go:

greetservice.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. Сервис (Service) — структура Go с экспортируемыми методами
  2. Экспортируемый метод — Greet написан с заглавной буквы, что делает его доступным для фронтенда
  3. Простая логика — принимает имя и возвращает приветствие
  4. Типобезопасность — типы входных и выходных данных определены

Регистрация сервиса

Заголовок раздела «Регистрация сервиса»

Откройте main.go и найдите регистрацию сервиса:

main.go
err := application.New(application.Options{
    Name: "myapp",
    Services: []application.Service{
        application.NewService(&GreetService{}),
    },
    // ... другие опции
})

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

Фронтенд

Заголовок раздела «Фронтенд»

Откройте frontend/src/main.js:

frontend/src/main.js
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 возвращают Promises
  4. Обработка ошибок — ошибки из Go перехватываются в try/catch

Настройка вашего приложения

Заголовок раздела «Настройка вашего приложения»

Давайте добавим новую функцию, чтобы понять рабочий процесс.

Добавьте функцию “Приветствовать многих”

Заголовок раздела «Добавьте функцию “Приветствовать многих”»

  1. Добавьте метод в GreetService

    Добавьте это в greetservice.go:

    greetservice.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
    window.greetMany = async () => {
        const names = ['Alice', 'Bob', 'Charlie'];
        const greetings = await GreetService.GreetMany(names);
        console.log(greetings);
    };

    Откройте консоль браузера и вызовите greetMany() — вы увидите массив приветствий.

Сборка для продакшена

Заголовок раздела «Сборка для продакшена»

Когда вы будете готовы распространять ваше приложение:

Окно терминала
wails3 build

Что это делает:

  • Компилирует код Go с оптимизациями
  • Собирает фронтенд для продакшена (минифицированный)
  • Создает нативный исполняемый файл в build/bin/

Результат: build/bin/myapp.exe

Дважды щелкните, чтобы запустить. Зависимости не требуются (WebView2 является частью Windows).

Что мы узнали

Заголовок раздела «Что мы узнали»

Структура проекта

  • main.go для бэкенда Go
  • frontend/ для кода интерфейса
  • Taskfile.yml для задач сборки

Сервисы

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

Привязки

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

Рабочий процесс разработки

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

Вопросы? Присоединяйтесь к Discord и спрашивайте сообщество.