搜尋
參與貢獻

編輯此文件

翻譯文件，或在您的電腦上開啟完整專案。

在您選擇提交成果之前，不會發布任何內容。

你的第一個應用程式

在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. 錯誤處理：使用 try/catch 擷取來自 Go 的錯誤

自訂應用程式

接下來新增一項功能，以瞭解整個工作流程。

新增「多人問候」功能

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並向社群提問。

編輯頁面

上次更新：