Wails Preact 官方模板深度指南从wails dev热重载到wails build生产打包【免费下载链接】wailsCreate beautiful applications using Go项目地址: https://gitcode.com/gh_mirrors/wa/wails本篇技术指南以 Wails v2 官方 Preact 模板v2/pkg/templates/templates/preact为对象完整解析该模板的项目结构、wails.json工程配置、Go 与 Preact 前端的双向绑定机制以及wails dev实时开发与wails build生产构建的完整工作流。读完本文你将能够基于该模板独立初始化一个 Preact Vite Wails 桌面应用并理解其热重载、Go 方法调用与资产嵌入的底层原理。模板概览与定位Wails 的官方模板体系存放在 v2/pkg/templates/templates每个模板由template.json模板元信息、wails.tmpl.json工程配置模板以及一组 Go/前端源码模板构成。Preact 模板是其中的官方模板之一由template.json声明为{ name: Preact Vite, shortname: preact, author: Lea Anthony, description: Preact Vite development server, helpurl: https://wails.io }从描述可以看出该模板的核心技术组合是Preact前端 UI Vite开发服务器与构建工具。Preact 作为 React 的轻量级替代品提供了近似 JSX 的开发体验Vite 则负责极速的模块热更新HMR与生产构建。两者与 Wails 的 Go 后端配合构成了一个完整的桌面应用脚手架。模板目录结构与角色分工使用wails init选择该模板后生成的项目会包含以下关键文件以模板源文件*.tmpl.*对应生成产物preact/ ├── main.go.tmpl # 生成 main.go应用入口与 Wails 配置 ├── app.tmpl.go # 生成 app.go业务结构体与 Greet 方法 ├── go.mod.tmpl # Go module 定义含 Wails 依赖 ├── wails.tmpl.json # 生成 wails.json工程级配置 ├── template.json # 模板元信息供 wails init 读取 └── frontend/ ├── index.tmpl.html # 生成 index.html前端入口 HTML ├── package.json # 前端依赖与 npm 脚本 ├── vite.config.js # Vite 配置Preact 插件 ├── src/ │ ├── main.jsx # Preact 渲染入口 │ ├── app.jsx # 演示组件调用 Go 的 Greet │ ├── app.css / style.css └── wailsjs/ ├── go/main/App.js # 自动生成的 Go 绑定 └── runtime/ # Wails 运行时关键点frontend/dist是 Vite 构建的输出目录main.go.tmpl通过//go:embed all:frontend/dist将其嵌入二进制这也是最终可分发单文件应用的基础详见下文“生产构建”一节。工程配置wails.json 与模板变量模板通过wails.tmpl.json生成工程根目录的wails.json。wails init在实例化时会用项目名、作者等信息替换其中的 Go 模板变量{{.ProjectName}}、{{.BinaryName}}、{{.AuthorName}}、{{.AuthorEmail}}{ $schema: https://wails.io/schemas/config.v2.json, name: {{.ProjectName}}, outputfilename: {{.BinaryName}}, frontend:install: npm install, frontend:build: npm run build, frontend:dev:watcher: npm run dev, frontend:dev:serverUrl: auto, author: { name: {{.AuthorName}}, email: {{.AuthorEmail}} } }各配置项在开发/构建流程中的实际作用如下name/outputfilename应用名与最终二进制文件名。frontend:installwails命令在首次构建前自动执行的前端依赖安装命令此处为npm install。frontend:build生产构建时执行的前端构建命令即npm run build内部调用vite build产物输出到frontend/dist。frontend:dev:watcher开发模式下启动的前端监听命令即npm run dev内部调用vite。frontend:dev:serverUrl设为auto时Wails 会自动探测并连接 Vite 开发服务器地址无需手动指定端口。完整字段说明可参阅仓库中项目配置的解析实现 v2/internal/project/project.go其中可以看到DevServer默认绑定地址为localhost:34115见 project.go#L182。Go 侧源码模板入口与绑定方法main.go应用窗口与资产服务器main.go.tmpl生成了标准的 Wails v2 入口要点如下//go:embed all:frontend/dist var assets embed.FS func main() { app : NewApp() err : wails.Run(options.App{ Title: {{.ProjectName}}, 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()) } }//go:embed all:frontend/dist将 Vite 构建产物嵌入 Go 二进制AssetServer通过assetserver.Options提供这些静态资源实现离线分发。Bind将App结构体暴露给前端 JS 调用。OnStartup应用启动时回调用于保存context.Context供运行时 API 使用。BackgroundColour窗口背景色深色 RGB(27, 38, 54)。app.go默认 Greet 业务方法app.tmpl.go提供了示例业务逻辑这是前端调用 Go 代码的最小范例type App struct { ctx context.Context } func NewApp() *App { return App{} } func (a *App) startup(ctx context.Context) { a.ctx ctx } func (a *App) Greet(name string) string { return fmt.Sprintf(Hello %s, Its show time!, name) }startup保存 context便于后续调用 runtime 方法如窗口控制、事件等Greet是默认的绑定方法演示了 Go → JS 的参数传递与返回值。go.modWails 依赖模板go.mod.tmpl声明 Go 模块与 Wails v2 依赖其中{{.WailsVersion}}会在初始化时替换为实际版本号module changeme go 1.23.0 require github.com/wailsapp/wails/v2 {{.WailsVersion}} // replace github.com/wailsapp/wails/v2 {{.WailsVersion}} {{.WailsDirectory}}前端源码Preact 组件与自动生成的 Go 绑定入口与组件index.tmpl.html定义页面骨架包含#app挂载点并引入./src/main.jsxmain.jsx将App组件渲染到该节点。app.jsx是核心演示组件展示了典型的Preact 状态 Wails 绑定调用模式import {Greet} from ../wailsjs/go/main/App; import {useState} from preact/hooks; export function App(props) { const [resultText, setResultText] useState(Please enter your name below ); const [name, setName] useState(); const updateName (e) setName(e.target.value); const updateResultText (result) setResultText(result); function greet() { Greet(name).then(updateResultText); } // ...渲染输入框、按钮与结果区域 }注意Greet返回的是一个 Promise这是 Wails 绑定生成的异步调用形态——前端通过window[go][main][App][Greet]与 Go 后端通信见 frontend/wailsjs/go/main/App.jsexport function Greet(arg1) { return window[go][main][App]Greet; }wailsjs目录由 Wails 在构建/开发时自动生成开发者不应手工编辑类型定义App.d.ts与runtime.d.ts可提供编辑器智能提示。Vite 与依赖package.json声明了前端依赖与脚本{ scripts: { dev: vite, build: vite build, preview: vite preview }, dependencies: { preact: ^10.24.0 }, devDependencies: { preact/preset-vite: ^2.10.0, vite: ^7.0.0 } }vite.config.js仅需接入preact/preset-vite插件即可获得 JSX 转换与 HMR 支持import {defineConfig} from vite import preact from preact/preset-vite export default defineConfig({ plugins: [preact()] })实时开发wails dev 与双服务器机制在项目根目录运行wails dev即进入实时开发模式。其工作方式为Wails 根据wails.json中的frontend:dev:watcher启动 Vite 开发服务器对前端改动提供极速热重载HMR浏览器/窗口内的界面几乎实时刷新无需重新编译 Go。Wails 自身的开发服务器默认运行在http://localhost:34115该地址定义于 v2/internal/project/project.go#L182。在浏览器中打开该地址同样可以访问应用界面并调用 Go 方法——这意味着你可以在浏览器开发者工具devtools中直接调试前端与 Go 绑定而不必每次都在原生窗口中操作。frontend:dev:serverUrl设为auto时Wails 自动完成 Vite 服务器地址的发现与连接无需手工配置端口。生产构建wails build当开发完成需要发布可分发的生产包时运行wails build该命令的执行链路是依据wails.json中的frontend:build执行npm run build由 Vite 将 Preact 前端构建、压缩到frontend/dist。Go 编译器通过//go:embed all:frontend/dist把静态资源整体嵌入二进制。依据outputfilename生成可执行文件即无需外部 Web 服务器、可独立分发的桌面应用。一个典型的发布流程因此是wails dev迭代功能 →wails build产出安装包/二进制。开发与生产两条链路由wails.json中的frontend:*四组命令串接这也是理解该模板以及所有 Wails v2 官方模板的关键。小结Wails 官方 Preact 模板是一条完整、可直接落地的“Go 后端 Preact 前端”桌面开发链路工程配置集中在wails.json四组frontend:*命令统辖安装、构建与开发监听开发体验由wails dev提供 Vite 热重载并通过localhost:34115支持浏览器内联调试前后端通信由自动生成的wailsjs绑定层完成前端以 Promise 形式调用 Go 方法发布能力由wails build//go:embed实现单二进制分发。参照上述源码与配置你即可在此基础上替换app.go中的业务方法、扩展 Preact 组件快速构建自己的 Wails 桌面应用。更完整的项目配置字段说明可继续阅读 Wails 官方项目配置文档并结合仓库中的 模板生成逻辑 与 项目配置解析 深入理解。【免费下载链接】wailsCreate beautiful applications using Go项目地址: https://gitcode.com/gh_mirrors/wa/wails创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考