Wails 是一个用 Go 构建桌面应用的框架。它不像 Electron 那样打包一个完整的 Chromium，而是直接调用系统原生 WebView（Windows 上是 WebView2，Mac 上是 WKWebView，Linux 上是 WebKit GTK），前端代码通过 WebView 渲染，后端是 Go，前后端通过 Bindings 直接通信。
相比 Electron，Wails 打包出来的体积小得多（一个 Hello World 不到 20MB），内存占用也更低。
环境要求
装 Wails 之前，先确保机器上装好了下面这些：
- Go 1.22+ — Wails v2.11 要求 Go 1.22 及以上
- Node.js 20+ — 前端构建需要
- WebView2 — Windows 11 自带，Windows 10 需要确认一下（后面会讲）
下面一步步来。
安装 Go
先确认系统有没有装过 Go，打开终端（PowerShell 或 CMD）跑一下：
go version
如果输出了版本号且 ≥ 1.22，直接跳到安装 Node.js。没装的话去官网下：
- 打开 https://go.dev/dl/
- 下载 Windows 版本的
.msi安装包 - 双击安装，一路下一步
装完之后验证一下：
go version
能看到版本号就说明装好了。
安装 Node.js
Wails 需要 Node.js 来构建前端资源。装 LTS 版本就行：
- 打开 https://nodejs.org/
- 下载 LTS 版本的
.msi安装包 - 一路下一步安装
验证：
node --version
npm --version
能看到版本号就行。
检查 WebView2
Windows 11 自带 WebView2，不需要额外装。Windows 10 的话检查一下：
打开 设置 → 应用，搜索 “WebView2”。如果没找到，去 微软官网 下载安装。
不过大多数 Windows 10 系统在用 Edge 浏览器的时候就已经安装了 WebView2，大概率不用操心。
安装 Wails CLI
Wails CLI 用 go install 安装。注意不要用 @latest——它目前指向 v2.5 版本，跟近几年的 Go 版本不兼容。直接指定版本安装：
go install github.com/wailsapp/wails/v2/cmd/wails@v2.11.0
装完之后验证：
wails version
输出类似 v2.11.0 就说明装好了。
Wails 支持的前端框架
Wails 内置了几种前端框架的模板，在 wails init 的时候可以选择：
- React — 生态最大，组件库最全，适合复杂交互的项目。但学习曲线相对陡，JSX、hooks 那套需要一点时间上手
- Vue — 上手比 React 简单一些，模板语法直观，适合中大型项目。但 Vue 的生态虽然大，跟 React 比还是差一些
- Svelte — 没有虚拟 DOM，编译时就把框架逻辑优化掉了，最终产物体积小、运行快。语法极简，写起来最接近原生 HTML/JS，几分钟就能上手
我选的是 Svelte。原因很直接：
- 足够简单 ——Svelte 写起来几乎就是 HTML + JS，不需要学 JSX、虚拟 DOM 那套心智模型，很适合写轻量级的桌面工具
- 编译时优化 ——Svelte 会在编译阶段把组件转换成高效的纯 JS，不需要在运行时加载框架本身，产物体积和性能都很好
- Wails 的绝配 ——Wails 本身就是追求轻量，配上 Svelte 正好一路轻到底
但 Svelte 也有明显的缺点：
- 不适合大型项目 ——没有虚拟 DOM 的 diff 机制，当组件树非常庞大时，更新效率会下降。团队协作时 Svelte 的类型系统和项目组织方式也不如 React 成熟
- 生态小 ——Svelte 的第三方组件库和工具链远不如 React/Vue 丰富，很多场景需要自己造轮子
- 社区和招聘 ——遇到坑的时候搜到的资料相对少，招人也不好招
所以我的建议是：写个人项目、小工具、轻量级桌面应用，Svelte 是最佳选择。如果是企业级大型桌面应用，还是 React 更稳妥。
创建项目
CLI 装好了，选好框架了，接下来用 wails init 创建项目：
wails init -n wails_study -t svelte
各参数说明：
-n wails_study— 项目名称，会作为目录名-t svelte— 指定前端模板
-t 可选的值：
| 值 | 说明 |
|---|---|
svelte | Svelte + Vite |
react | React + Vite |
vue | Vue + Vite |
preact | Preact + Vite |
lit | Lit + Vite |
vanilla | 原生 JS + Vite |
svelte-ts | Svelte + TypeScript + Vite |
react-ts | React + TypeScript + Vite |
vue-ts | Vue + TypeScript + Vite |
想用 TypeScript 的话选 -t svelte-ts。
使用社区模板
Wails 的内置模板只包含最基础的前端配置，没有 TailwindCSS、TypeScript（除非手动选 ts 版本）、路由这些。社区模板可以直接拿来用，项目一建好就自带全套配置。
用法是把 GitHub 仓库地址传给 -t：
wails init -n myapp -t https://github.com/misitebao/wails-template-vue
也可以用 @version 指定版本：
wails init -n myapp -t https://github.com/misitebao/wails-template-vue@v1.0.0
一些常见的社区模板：
| 模板 | 特点 |
|---|---|
| wails-template-vue | Vue + TypeScript + TailwindCSS + 国际化 + 路由 |
| wails-vite-react-ts | React 19 + TypeScript + TailwindCSS + TanStack Router |
| ReactViteTSWails | React 19 + Vite 8 + TypeScript + TailwindCSS + ESLint + Prettier + husky |
-t 也可以指向本地路径，适合团队内部共享：
wails init -n myapp -t ./path/to/your-template
如果不放心某个社区模板，可以看看里面的 template.json 和 wails.json，确认它到底额外装了哪些依赖和 hooks。
自定义模板
如果想把自己的项目做成模板，Wails 也提供了生成器：
wails generate template -name mytemplate
如果已经有了一个前端项目，想把它包装成 Wails 模板：
wails generate template -name mytemplate -frontend ./my-existing-frontend
生成的模板结构类似：
mytemplate/
├── template.json # 模板元信息
├── app.tmpl.go # app.go 模板
├── main.tmpl.go # main.go 模板
├── go.mod.tmpl # go.mod 模板
├── wails.tmpl.json # wails.json 模板
├── frontend/ # 前端代码模板
│ └── ...
└── NEXTSTEPS.md # 后续说明
生成后可以用本地路径测试：
wails init -n test -t ./mytemplate
确认一切正常后推到 GitHub，再到 Wails 社区的 Templates 页面 提 PR 就可以分享给其他人用了。
初始化完成后看看生成的项目结构：
wails_study/
├── app.go # Go 后端入口
├── main.go # 应用启动入口
├── wails.json # Wails 项目配置
├── go.mod
├── go.sum
├── build/ # 打包相关配置（图标、资源等）
│ └── ...
└── frontend/ # 前端代码
├── package.json
├── vite.config.js
├── index.html
├── src/
│ ├── main.ts
│ ├── App.svelte
│ ├── assets/
│ └── ...
└── ...
关键文件说明：
app.go— Go 后端代码，定义了暴露给前端的 Bindings（方法）main.go— 应用启动入口，创建WailsApp实例并运行frontend/src/App.svelte— 前端主组件，后面改 UI 主要就是改这个文件wails.json— 项目名、版本、Wails CLI 版本等元信息
运行项目
进到项目目录，启动开发模式：
cd wails_study
wails dev
第一次运行会下载 Go 依赖和 npm 依赖，稍微等一会儿。编译完成后会自动弹出一个原生窗口，看到 Wails 的默认模板界面就说明成功了。
wails dev 支持热重载——改前端代码窗口会自动刷新，改 Go 代码也会自动重新编译。开发体验很丝滑。
运行起来之后，frontend/src/App.svelte 里面有一段 Greeter 示例代码，展示了前后端通信的机制。我们到下一篇再深入讲这个。
常见问题
go install 报网络错误
国内网络问题，需要配置 Go 模块代理：
go env -w GOPROXY=https://goproxy.cn,direct
wails dev 报 CGO 相关错误
Wails 依赖 CGO，某些 Windows 环境可能没有 GCC。安装 TDM-GCC 或者从 MinGW-w64 下载。
最简单的办法是用 TDM-GCC，下载安装后确认：
gcc --version
能输出版本号就行。
wails dev 弹出空窗口或白屏
一般是前端依赖没装好。进 frontend/ 目录手动装一下再试：
cd frontend
npm install
cd ..
wails dev
端口被占用
默认端口是 34115，被占用的话 Wails 会自动找一个可用端口。如果自动分配也不太行，试试先杀掉占用的进程。
装好环境、跑起来 Hello World，Wails 的入门就完成了。下一篇我们会深入理解 Wails 的项目结构以及前后端通信的机制。