Go 桌面開(kāi)發(fā) Wails 入門(mén)與開(kāi)發(fā)環(huán)境搭建
作者：馬嘍編程
Wails是一個(gè)使用 Go 編寫(xiě)后端邏輯、前端使用現(xiàn)代前端框架（如Vue、React、Svelte）開(kāi)發(fā)界面的跨平臺(tái)桌面應(yīng)用開(kāi)發(fā)框架。
1. 什么是 Wails？
Wails是一個(gè)使用 Go 編寫(xiě)后端邏輯、前端使用現(xiàn)代前端框架（如Vue、React、Svelte）開(kāi)發(fā)界面的跨平臺(tái)桌面應(yīng)用開(kāi)發(fā)框架。
- 后端語(yǔ)言：Go
- 前端支持：Vue3、React、Svelte
- 跨平臺(tái)：Windows / macOS / Linux
- 打包簡(jiǎn)單，構(gòu)建原生應(yīng)用 .exe / .app / .AppImage
- 類(lèi)似于Tauri和 Electron，但Wails在調(diào)用Go邏輯方面更加直接簡(jiǎn)單高效。
2. 為什么要選擇Wails
為什么要選擇Wails？因?yàn)槲沂莻€(gè)愛(ài)學(xué)習(xí)的孩子，而且wails官網(wǎng)的教程簡(jiǎn)直無(wú)眼看，所以我要將學(xué)習(xí)的過(guò)程記錄下來(lái)，供有緣人參考吧。
3. 開(kāi)發(fā)環(huán)境準(zhǔn)備
(1) 安裝依賴(lài)項(xiàng)
請(qǐng)確保自己的電腦上已經(jīng)安裝了go語(yǔ)言，如果沒(méi)有就自個(gè)安裝，這里就不演示了。
(2) Node.js + 包管理器（npm/yarn/pnpm）
- 安裝 Node.js（我本機(jī)使用的版本是Node v18）
- Node附帶npm，也可以選用yarn或 pnpm（我使用是yarn）
(3) 安裝 Wails CLI
安裝wails cli工具比較簡(jiǎn)單，具體命令如下所示:
go install github.com/wailsapp/wails/v2/cmd/wails@latest(4) 安裝驗(yàn)證，輸出如下信息說(shuō)明安裝成功
? ~ wails version
v2.10.1
? If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony??注意：
- windows環(huán)境下Wails要求安裝WebView2運(yùn)行時(shí)。 一些 Windows 安裝已經(jīng)安裝了這個(gè)。 我們可以使用wails doctor命令檢查依賴(lài)是否缺失，如果缺失根據(jù)提示將缺失的依賴(lài)補(bǔ)全安裝即可。
- Linux環(huán)境下需要安裝gcc構(gòu)建工具以及l(fā)ibgtk3和libwebkit開(kāi)發(fā)庫(kù)。
4. 創(chuàng)建第一個(gè) Wails 項(xiàng)目（以React為例）
(1) 初始化項(xiàng)目，具體命令如下所示
? wails init -n burpsuite-go -t preact-ts
Wails CLI v2.10.1
# Initialising Project 'burpsuite-go'
go: downloading github.com/matryer/is v1.4.1
go: downloading github.com/leaanthony/u v1.1.1
go: downloading github.com/leaanthony/go-ansi-parser v1.6.1
go: downloading github.com/wailsapp/mimetype v1.4.1
go: downloading github.com/wailsapp/go-webview2 v1.0.19
go: downloading github.com/labstack/echo/v4 v4.13.3
go: downloading github.com/tkrajina/go-reflector v0.5.8
go: downloading github.com/bep/debounce v1.2.1
go: downloading github.com/valyala/fasttemplate v1.2.2
go: downloading github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e
go: downloading github.com/valyala/bytebufferpool v1.0.0
Project Name | burpsuite-go
Project Directory | /Users/xxxx/Go/src/github.com/xxxx/burpsuite-go
Template | Preact + Vite (Typescript)
Template Source | https://wails.io
Initialised project 'burpsuite-go' in 2m30.92s.
? If Wails is useful to you or your company, please consider sponsoring the project:
https://github.com/sponsors/leaanthony(2) 運(yùn)行開(kāi)發(fā)模式，具體命令如下所示:
wails dev
如出現(xiàn)上述圖片，說(shuō)明你成功的運(yùn)行了一個(gè)wails項(xiàng)目。
5. 代碼結(jié)構(gòu)解釋
.
├── build/ # 項(xiàng)目打包構(gòu)建目錄
│ ├── appicon.png
│ ├── darwin/
│ └── windows/
├── frontend/ # 一個(gè)標(biāo)準(zhǔn)的前端項(xiàng)目目錄
├── go.mod
├── go.sum
├── main.go # 程序入口
└── wails.json # wails項(xiàng)目配置main.go文件內(nèi)容：
package main
import (
"embed"
"github.com/wailsapp/wails/v2"
"github.com/wailsapp/wails/v2/pkg/options"
"github.com/wailsapp/wails/v2/pkg/options/assetserver"
)
//go:embed all:frontend/dist
var assets embed.FS
func main() {
// Create an instance of the app structure
app := NewApp()
// Create application with options
err := wails.Run(&options.App{
Title: "burpsuite-go",
Width: 1024,
Height: 768,
AssetServer: &assetserver.Options{
Assets: assets,
},
BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
OnStartup: app.startup,
Bind: []interface{}{
app,
},
})
if err != nil {
println("Error:", err.Error())
}
}(1) 嵌入指令
- 使用 //go:embed`指令將前端構(gòu)建產(chǎn)物（`frontend/dist`）打包進(jìn) Go 的二進(jìn)制文件中
- embed.FS類(lèi)型表示一個(gè)虛擬的只讀文件系統(tǒng)
- all:表示遞歸包含整個(gè)目錄
(2) app := NewApp()
- 創(chuàng)建一個(gè)后端邏輯對(duì)象，NewApp() 是自定義的函數(shù)，通常返回一個(gè) *App 類(lèi)型結(jié)構(gòu)體實(shí)例。
- 這個(gè)結(jié)構(gòu)體中包含你要暴露給前端的Go方法（如攔截器控制、請(qǐng)求記錄等）
(3) wails.Run方法
- 設(shè)置窗口標(biāo)題為burpsuite-go
- 初始窗口大小為 1024 x 768 像素
- AssetServer: &assetserver.Options{ Assets: assets }告訴 Wails 使用assets作為靜態(tài)資源服務(wù)源assets包含了frontend/dist中構(gòu)建好的 HTML + JS + CSS 文件
- BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1}設(shè)置窗口背景顏色（RGBA），對(duì)應(yīng)深色藍(lán)灰風(fēng)格
- OnStartup: app.startup注冊(cè)一個(gè)啟動(dòng)鉤子函數(shù)，當(dāng)應(yīng)用啟動(dòng)后執(zhí)行app.startup(ctx)可用于初始化、預(yù)加載數(shù)據(jù)等操作
- Bind: []interface{}{ app }
app.tsx內(nèi)容如下所示:
import './App.css'
import logo from "./assets/images/logo-universal.png"
import {Greet} from "../wailsjs/go/main/App";
import {useState} from "preact/hooks";
import {h} from 'preact';
export function App(props: any) {
const [resultText, setResultText] = useState("Please enter your name below ??");
const [name, setName] = useState('');
const updateName = (e: any) => setName(e.target.value);
const updateResultText = (result: string) => setResultText(result);
function greet() {
Greet(name).then(updateResultText);
}
return (
<>
<div id="App">
<img src={logo} id="logo" alt="logo"/>
<div id="result" className="result">{resultText}</div>
<div id="input" className="input-box">
<input id="name" className="input" onChange={updateName} autoComplete="off" name="input"
type="text"/>
<button className="btn" onClick={greet}>Greet</button>
</div>
</div>
</>
)
}- import {Greet} from "../wailsjs/go/main/App";
- <button className="btn" notallow={greet}>Greet</button>
Greet是由Wails自動(dòng)生成的TypeScript綁定，代表 Go 后端的Greet(name string) 方法。當(dāng)點(diǎn)擊按鈕時(shí)：
- 調(diào)用 自動(dòng)綁定的 Greet(name) 函數(shù)
- 它會(huì)發(fā)起與Go后端的通信請(qǐng)求
- 后端返回字符串，前端通過(guò) then(updateResultText) 更新結(jié)果
6. 小結(jié)
在本章中你學(xué)會(huì)了：
- 安裝Wails所需工具（Go、Node、Wails CLI）
- 創(chuàng)建并運(yùn)行第一個(gè)React + Go的桌面應(yīng)用
- 簡(jiǎn)單的了解了前后端交互機(jī)制（Go 方法 → JS 調(diào)用）
責(zé)任編輯：趙寧寧
來(lái)源：
馬嘍編程筆記
