Wails 深度调研 使用 Go 和 Web 技术构建轻量级桌面应用
✨步子哥 (steper) •
2026年02月12日 15:10
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wails 框架深度调研</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
:root {
--primary-color: #00ADD8; /* Go Blue */
--secondary-color: #5DC9E2; /* Lighter Blue */
--accent-color: #E95420; /* A pop of color for contrast, e.g., Ubuntu orange or just stick to blues */
--text-dark: #333333;
--text-light: #F5F5F5;
--bg-color: #F0F2F5;
--card-bg: #FFFFFF;
--go-blue: #00ADD8;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text-dark);
line-height: 1.5;
width: 720px;
margin: 0 auto;
min-height: 960px;
display: flex;
flex-direction: column;
}
.poster-container {
width: 100%;
background: #ffffff;
padding: 40px;
display: flex;
flex-direction: column;
gap: 24px;
min-height: 100vh;
}
/* Header Section */
.header {
display: flex;
flex-direction: column;
align-items: flex-start;
border-left: 8px solid var(--primary-color);
padding-left: 20px;
margin-bottom: 10px;
}
.header h1 {
font-size: 48px;
font-weight: 700;
color: var(--text-dark);
line-height: 1.1;
margin-bottom: 8px;
}
.header h1 span {
color: var(--primary-color);
}
.header p {
font-size: 20px;
color: #666;
font-weight: 400;
}
/* Intro Card */
.intro-card {
background: linear-gradient(135deg, var(--primary-color), #007D9C);
color: white;
padding: 25px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 173, 216, 0.2);
}
.intro-card h2 {
font-size: 24px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.intro-card p {
font-size: 16px;
line-height: 1.6;
opacity: 0.95;
}
/* Features Grid */
.features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.feature-item {
background: var(--card-bg);
padding: 20px;
border-radius: 12px;
border: 1px solid #E0E0E0;
display: flex;
flex-direction: column;
gap: 10px;
transition: transform 0.2s;
}
.feature-icon {
font-size: 32px;
color: var(--primary-color);
}
.feature-item h3 {
font-size: 18px;
font-weight: 600;
color: #333;
}
.feature-item p {
font-size: 14px;
color: #666;
}
/* Comparison Section */
.section-title {
font-size: 24px;
font-weight: 700;
color: #333;
border-bottom: 3px solid #E0E0E0;
padding-bottom: 8px;
margin-bottom: 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.comparison-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.comparison-row {
display: flex;
align-items: center;
background: #fff;
border-radius: 8px;
padding: 12px 16px;
border: 1px solid #eee;
}
.comp-label {
width: 100px;
font-weight: bold;
font-size: 14px;
color: #555;
}
.bar-container {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
height: 24px;
}
.bar {
height: 12px;
border-radius: 6px;
background: #ddd;
position: relative;
}
.bar-fill {
height: 100%;
border-radius: 6px;
}
.wails-bar { background: var(--primary-color); }
.electron-bar { background: #47848F; }
.comp-value {
width: 60px;
text-align: right;
font-size: 12px;
font-weight: 600;
color: #666;
}
/* V3 Roadmap */
.v3-section {
background: #FFF8E1;
border: 1px solid #FFE082;
border-radius: 12px;
padding: 20px;
}
.v3-list {
list-style: none;
}
.v3-list li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
font-size: 15px;
}
.v3-list i {
color: #FFA000;
font-size: 18px;
margin-top: 2px;
}
/* Code Example */
.code-block {
background: #2D2D2D;
color: #F8F8F2;
padding: 20px;
border-radius: 12px;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 13px;
line-height: 1.6;
position: relative;
overflow: hidden;
}
.code-lang {
position: absolute;
top: 10px;
right: 10px;
background: #444;
padding: 2px 8px;
border-radius: 4px;
font-size: 10px;
text-transform: uppercase;
}
.keyword { color: #66D9EF; font-weight: bold; }
.func { color: #A6E22E; }
.string { color: #E6DB74; }
.comment { color: #75715E; font-style: italic; }
/* Footer */
.footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
border-top: 1px solid #eee;
color: #888;
font-size: 12px;
}
.footer-links {
display: flex;
gap: 15px;
}
.tag {
background: #eee;
padding: 2px 8px;
border-radius: 4px;
font-weight: 500;
}
</style>
</head>
<body>
<div class="poster-container">
<!-- Header -->
<div class="header">
<h1>Wails <span>深度调研</span></h1>
<p>使用 Go 和 Web 技术构建轻量级桌面应用</p>
</div>
<!-- Intro -->
<div class="intro-card">
<h2><i class="material-icons">info</i> 项目概述</h2>
<p>Wails 是一个现代化的桌面应用开发框架，允许开发者使用 Go 语言编写后端逻辑，结合 React/Vue/Svelte 等前端技术构建界面。它不嵌入浏览器，而是使用操作系统的原生 WebView，从而实现了极小的打包体积和更低的资源占用。</p>
</div>
<!-- Core Features -->
<div>
<div class="section-title">
核心特性
<i class="material-icons" style="color:var(--primary-color)">stars</i>
</div>
<div class="features-grid">
<div class="feature-item">
<i class="material-icons feature-icon">speed</i>
<h3>原生性能</h3>
<p>使用操作系统原生 WebView（WebView2/WebKit），无嵌入式浏览器负担，启动快，体积小。</p>
</div>
<div class="feature-item">
<i class="material-icons feature-icon">sync_alt</i>
<h3>Go & JS 互通</h3>
<p>自动生成 TypeScript 绑定，前端可直接调用 Go 方法，无需手动处理序列化。</p>
</div>
<div class="feature-item">
<i class="material-icons feature-icon">desktop_windows</i>
<h3>跨平台支持</h3>
<p>支持 Windows、macOS 和 Linux，一套代码多端运行，构建简单。</p>
</div>
<div class="feature-item">
<i class="material-icons feature-icon">build</i>
<h3>原生 UI 元素</h3>
<p>支持原生对话框、菜单、系统托盘以及现代半透明磨砂窗口效果。</p>
</div>
</div>
</div>
<!-- Comparison -->
<div>
<div class="section-title">性能对比 (Vs Electron)</div>
<div class="comparison-container">
<div class="comparison-row">
<div class="comp-label">内存占用</div>
<div class="bar-container">
<div class="bar" style="width: 100%;">
<div class="bar-fill electron-bar" style="width: 80%;"></div>
</div>
</div>
<div class="comp-value" style="color: #47848F">~150MB</div>
</div>
<div class="comparison-row">
<div class="comp-label">Wails</div>
<div class="bar-container">
<div class="bar" style="width: 100%;">
<div class="bar-fill wails-bar" style="width: 25%;"></div>
</div>
</div>
<div class="comp-value" style="color: var(--primary-color)">~50MB</div>
</div>
<div class="comparison-row">
<div class="comp-label">启动时间</div>
<div class="bar-container">
<div class="bar" style="width: 100%;">
<div class="bar-fill electron-bar" style="width: 60%;"></div>
</div>
</div>
<div class="comp-value" style="color: #47848F">~3s</div>
</div>
<div class="comparison-row">
<div class="comp-label">Wails</div>
<div class="bar-container">
<div class="bar" style="width: 100%;">
<div class="bar-fill wails-bar" style="width: 15%;"></div>
</div>
</div>
<div class="comp-value" style="color: var(--primary-color)">< 1s</div>
</div>
</div>
</div>
<!-- Wails v3 -->
<div class="v3-section">
<div class="section-title" style="border:none; margin-bottom: 12px; font-size: 20px;">
<span style="color:#FFA000">v3 Alpha 新特性</span>
<i class="material-icons">auto_awesome</i>
</div>
<ul class="v3-list">
<li>
<i class="material-icons">tab</i>
<span><b>多窗口支持：</b>支持在同一应用中创建和管理多个独立窗口。</span>
</li>
<li>
<i class="material-icons">power</i>
<span><b>系统托盘集成：</b>更好的原生托盘菜单和图标支持。</span>
</li>
<li>
<i class="material-icons">code</i>
<span><b>改进的绑定生成：</b>使用静态分析器，保留代码注释，速度更快。</span>
</li>
</ul>
</div>
<!-- Code Example -->
<div>
<div class="section-title">代码示例：Go 方法调用</div>
<div class="code-block">
<span class="code-lang">Go</span>
<span class="keyword">func</span> (a *App) <span class="func">Greet</span>(name <span class="keyword">string</span>) <span class="keyword">string</span> {<br>
<span class="keyword">return</span> fmt.Sprintf(<span class="string">"Hello %s!"</span>, name)<br>
}
</div>
<div class="code-block" style="margin-top: 10px; background: #1E1E1E;">
<span class="code-lang">JS (Auto-generated)</span>
<span class="keyword">import</span> { Greet } <span class="keyword">from</span> <span class="string">'../wailsjs/go/main/App'</span><br><br>
Greet(<span class="string">'Wails'</span>).then(<span class="func">result</span> => <span class="func">console.log</span>(result))<br>
<span class="comment">// Output: Hello Wails!</span>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="footer-links">
<span class="tag">GitHub: wailsapp/wails</span>
<span class="tag">官网: wails.io</span>
</div>
<div>Generated on 2026-02-12</div>
</div>
</div>
</body>
</html>
登录后可参与表态
讨论回复
0 条回复还没有人回复，快来发表你的看法吧！