Перейти к практике применения настольных приложений

Обзор: В этой статье рассматривается Wails Использование фреймворка, от настройки среды до разработки, а затем до окончательного построения и упаковки, исходного кода этого проекта. GitHub адрес：https://github.com/mazeyqian/go-run-wechat-demo

Предисловие

Wails Это кроссплатформенная среда разработки настольных приложений, которая позволяет разработчикам использовать Go преимущества производительности и в сочетании с любым стеком интерфейсных технологий, например React、Vue или Svelte,Зайдите в создатель настольного приложения.

Для настольных приложений,Electron Долгое время это был основной выбор, и он использует Web Фронтальная технология позволяет создавать кроссплатформенные настольные приложения. Однако Электрон Он имеет большой объем памяти и размер приложения, что делает Wails Становится легкой альтернативой.

Важные преимущества Wails:

1. Меньший размер приложения：Wails Скомпилированные приложения обычно меньше Electron меньше,Это означает более высокую скорость загрузки и время запуска.,и более низкое потребление ресурсов во время выполнения.
2. Нативная производительность：Go обеспечивает близость C языковая деятельность, что делает Wails Приложения могут работать более эффективно, особенно при выполнении параллельных задач и операций системного уровня.
3. Упрощенный процесс сборки：Wails Упрощен процесс сборки,Всего одна команда для применения исполняемого файла Пакета.,Никакой дополнительной настройки и зависимостей не требуется.
4. Отличный опыт разработки：иразвивать Web В браузере можно разрабатывать ту же обратную связь об изменениях в режиме реального времени, что и в интерфейсных приложениях и настольных приложениях.
5. Нативные элементы пользовательского интерфейса：Wails поддерживатьиспользоватьСистемные элементы пользовательского интерфейса,Обеспечьте единообразный пользовательский опыт.
6. Гибкие возможности внешнего интерфейса：Вы можете выбрать те, с которыми знакомы разработчики.любой интерфейсный фреймворкразрабатывать десктопные приложения。

Components of a Wails App

Создать проект Wails

Начните создавать Wails Перед проектом необходимо убедиться, что система установлена. Go и Node.js,потому чтодля Wails Положитесь на эти два компонента при создании настольных приложений. Ниже приводится установка Вейлс Рамка и Создать новый Этапы проекта.

Установить Вейлс

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

Проверьте результаты установки:

wails version

Вы также можете пройти wails doctor чтобы проверить, правильно ли установлены все необходимые зависимости.

# Wails
# ...
# System
# ...
# Dependencies
# ...
# Diagnosis
# ...
SUCCESS  Your system is ready for Wails development!

Моя локальная версия разработки:

Создать новый проект

использовать Wails CLI Создайте файл с именем go-run-wechat-demo новые проекты:

wails init -n go-run-wechat-demo -t react-ts

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

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

• main.go и app.go：Go Приложение обрабатывает бизнес-логику, управление данными и связь с внешним интерфейсом.
• frontend：Содержит весь код для внешнего интерфейса.,используйте React, Vue или любой другой фреймворк по вашему выбору.,Отвечает за пользовательский интерфейс и взаимодействие с пользователем.
• go.mod и go.sum：Go файлы зависимостей модуля.
• wails.json：Wails Конфигурационный файл проекта, определяющий способ сборки и Пакетного. приложение。
• build：использовать В存放构建后的应использовать程序и Связанные ресурсы。

Разработка проекта: имитация интерфейса входа в WeChat

Войдите в режим разработки

Войдите в корневой каталог проекта, введите и выполните wails dev При первом выполнении команды будут установлены внешние и внутренние зависимости. После успешного выполнения вы увидите страницу приложения по умолчанию.

Страница приложения по умолчанию

И вы можете отладить страницу в браузере:

To develop in the browser and call your bound Go methods from Javascript, navigate to: http://localhost:34115

Любые модификации кода также могут быть обновлены в горячем режиме:

1:42:21 PM [vite] hmr update /src/App.tsx

Изменить код

Стили и макеты окон

Чтобы имитировать интерфейс входа в WeChat, в main.go файл, через Wails Параметры конфигурации фрейма изменяют размер окна приложения. Width&Height、цвет фона BackgroundColour и титул Title。

main.go

func main() {
	// Create an instance of the app structure
	app := NewApp()

	// Create application with options
	err := wails.Run(&options.App{
		Title:  "WeChat",
		Width:  280,
		Height: 400,
		AssetServer: &assetserver.Options{
			Assets: assets,
		},
		BackgroundColour: &options.RGBA{R: 255, G: 255, B: 255, A: 1},
		OnStartup:        app.startup,
		Bind: []interface{}{
			app,
		},
	})

	if err != nil {
		println("Error:", err.Error())
	}
}

Бэкэнд-реализация

На этот раз Demo В основном он реализует две функции: авторизовать переключение учетных записей. Эти два метода можно использовать через внешний интерфейс; JavaScript вызов. Возвращенную строку можно использовать в UI Отображение соответствующего сообщения о состоянии пользователю. в файле app.go Добавьте эти два метода.

// Log In Success
func (a *App) LogInSuccess(name string) string {
	return fmt.Sprintf("Welcome %s, You are logged in!", name)
}

// Switch Account Success
func (a *App) SwitchAccountSuccess() string {
	return "You have switched accounts!"
}

существовать Wails В режиме разработки он автоматически Go Структура преобразуется в TypeScript модуль.

// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT

export function LogInSuccess(arg1:string):Promise<string>;

export function SwitchAccountSuccess():Promise<string>;

Фронтальная реализация

Исправлять frontend/src/App.tsx Файл, добавьте соответствующую логику:

import {useState} from "react";
import logo from "./assets/images/logo-universal-w256.jpg";
import "./App.css";
import {LogInSuccess, SwitchAccountSuccess} from "../wailsjs/go/main/App";

function App() {
    const [resultText, setResultText] = useState("");
    const name = "удалять";
    const updateResultText = (result: string) => setResultText(result);

    function logIn() {
        LogInSuccess(name).then(updateResultText);
    }

    function switchAccount() {
        SwitchAccountSuccess().then(updateResultText);
    }

    return (
        <div id="App">
            <img src={logo} id="logo" alt="logo"/>
            <div id="result" className="result name">{resultText || name}</div>
            <button className="btn log-in" onClick={logIn}>Log In</button>
            <button className="btn switch-account" onClick={switchAccount}>Switch Account</button>
        </div>
    )
}

export default App

И исправлять CSS файл стиля frontend/src/App.css Чтобы адаптировать интерфейс:

.btn {
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    border: none;
    font-size: 14px;
}

.log-in {
    width: 200px;
    height: 36px;
    line-height: 36px;
    color: #ffffff;
    background-color: hsla(148, 61%, 46%, 1);
    border-radius: 4px;
    margin-top: 70px;
}

.switch-account {
    background-color: #ffffff;
    color: rgb(89, 107, 144);
    margin-top: 22px;
}

Интерфейс такой, как показано ниже:

интерфейс

Попробуйте выполнить операцию «Войти»:

Log In

Попробуйте использовать сменную учетную запись:

Switch Account

Нижний значок:

нижний значок

Пакетное приложение

корневой каталог существующего проекта, запустите wails build Вы можете пакетировать приложение в текущей среде. Но в режиме разработки уже есть некоторые файлы кэша, которые можно использовать с -clean очистить build/bin Оглавление:

wails build -clean

Упаковка приложения macOS:

wails build -platform=darwin/amd64

Чтобы упаковать программу Windows:

wails build -platform=windows/amd64

Пакет

использовать create-dmg для macOS создавать .dmg документ:

create-dmg WeChat.dmg WeChat.app

macOS

Вышеуказанные файлы можно просмотреть на странице Релизы:

https://github.com/mazeyqian/go-run-wechat-demo/releases/tag/v1.0.0

Releases

Подвести итог

Wails Фреймворк предоставляет разработчикам краткий и мощный способ воспользоваться преимуществами Go Преимущества производительности и Web Гибкость внешнего интерфейса обеспечивает более эффективный и легкий способ создания настольных приложений для платформенного типа.