Go 實戰｜使用 Wails 構建輕量級的桌面應用：仿微信登入介面 Demo

后除發表於2024-04-06

GoAI

概述

本文探討 Wails 框架的使用，從搭建環境到開發，再到最終的構建打包，本專案原始碼 GitHub 地址：https://github.com/mazeyqian/go-run-wechat-demo

前言

Wails 是一個跨平臺桌面應用開發框架，他允許開發者利用 Go 的效能優勢，並結合任何前端技術棧，如 React、Vue 或 Svelte，來建立桌面應用。

對於桌面應用，Electron 長久以來一直是主流選擇，他使用 Web 前端技術構建跨平臺的桌面應用。然而，Electron 有著較大的記憶體佔用和應用體積，這讓 Wails 成為了輕量級的替代方案。

Wails 的顯著優勢：

更小的應用體積：Wails 編譯的應用程式通常比 Electron 更小，這意味著更快的下載速度和啟動時間，以及更低的執行時資源消耗。
原生效能：Go 提供了接近 C 語言的效能，這使得 Wails 應用能夠更高效地執行，尤其是在處理併發任務和系統級操作時。
簡化的構建過程：Wails 簡化了構建過程，只需一條命令就可以將應用打包為可執行檔案，無需額外的配置或依賴。
優秀的開發體驗：和開發 Web 前端應用一樣的實時改動反饋，並且可以在瀏覽器中開發桌面應用。
原生使用者介面元素：Wails 支援使用系統原生的使用者介面元素，提供一致的使用者體驗。
靈活的前端選擇：可以選擇開發者熟悉的任何前端框架來開發桌面應用。

Components of a Wails App

建立一個 Wails 專案

在開始建立 Wails 專案之前，需要確保系統中已經安裝了 Go 和 Node.js，因為 Wails 依賴這兩者來構建桌面應用。以下是安裝 Wails 框架和建立新專案的步驟。

安裝 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!

我的本地開發版本：

#	Version
Wails	v2.6.0
Go	v1.19.1
Node.js	v16.19.0
npm	v8.19.3

建立新專案

使用 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：用於存放構建後的應用程式和相關資源。

專案開發：仿微信登入介面

進入開發模式

進入專案根目錄，輸入並執行 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

修改程式碼

視窗樣式和佈局

為了模仿微信登入介面，在 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;
}

此時介面如圖：