mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 05:01:21 +08:00
e53d80d352
* docs: add wails.md introduction doc
* Update wails.md
* docs: update documentation 47cf42deff
622 lines
53 KiB
HTML
622 lines
53 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Wails V2 备忘清单
|
||
& wails cheatsheet & Quick Reference</title>
|
||
<meta content="width=device-width, initial-scale=1" name="viewport">
|
||
<meta description="Wails V2Wails 是一个利用 Golang 和 现代 Web 技术（如 Vue、React）构建跨平台桌面应用的开源框架，作为 Go 的快并且轻量的 Electron 替代品
|
||
|
||
下面是 Wails V2 的快速参考列表，包含常用命令和示例（Wails V3 仍处于开发测试阶段），为开发人员分享快速参考备忘单。">
|
||
<meta keywords="wails,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<meta name="author" content="jaywcjlove">
|
||
<meta name="license" content="MIT">
|
||
<meta name="funding" content="https://jaywcjlove.github.io/#/sponsor">
|
||
<meta rel="apple-touch-icon" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="152x152" href="../icons/touch-icon-ipad.png">
|
||
<meta rel="apple-touch-icon" sizes="180x180" href="../icons/touch-icon-iphone.png">
|
||
<meta rel="apple-touch-icon" sizes="167x167" href="../icons/touch-icon-ipad-retina.png">
|
||
<meta rel="apple-touch-icon" sizes="120x120" href="../icons/touch-icon-iphone-retina.png">
|
||
<link rel="icon" href="../icons/favicon.svg" type="image/svg+xml">
|
||
<link href="../style/style.css" rel="stylesheet">
|
||
<link href="../style/katex.css" rel="stylesheet">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/wails.md" class="edit" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script src="../js/dark.js?v=1.8.3"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="wails-v2-备忘清单"><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
|
||
<path d="M107.946667 838.4l57.173333 23.893333v-385.28l-103.68 250.026667c-17.493333 43.52 3.413333 93.44 46.506667 111.36z m832-157.866667L728.32 169.813333a85.888 85.888 0 0 0-77.226667-52.48c-11.093333 0-22.613333 1.706667-33.706666 6.4L302.933333 253.866667a85.290667 85.290667 0 0 0-46.08 110.933333l211.626667 510.72a85.248 85.248 0 0 0 110.933333 46.08l314.026667-130.133333a85.077333 85.077333 0 0 0 46.506667-110.933334zM336.213333 373.333333c-23.466667 0-42.666667-19.2-42.666666-42.666666s19.2-42.666667 42.666666-42.666667 42.666667 19.2 42.666667 42.666667-19.2 42.666667-42.666667 42.666666z m-85.333333 469.333334c0 46.933333 38.4 85.333333 85.333333 85.333333h61.866667l-147.2-355.84v270.506667z"></path>
|
||
</svg><a aria-hidden="true" tabindex="-1" href="#wails-v2-备忘清单"><span class="icon icon-link"></span></a>Wails V2 备忘清单</h1><div class="wrap-body">
|
||
<p><a href="https://github.com/wailsapp/wails"><img src="https://img.shields.io/github/stars/wailsapp/wails?style=flat" alt="GitHub Repo stars"></a> <a href="https://github.com/wailsapp/wails/releases/latest"><img src="https://img.shields.io/github/v/release/wailsapp/wails?style=flat" alt="GitHub release (latest by date)"></a> <a href="https://pkg.go.dev/github.com/wailsapp/wails/v2"><img src="https://pkg.go.dev/badge/github.com/wailsapp/wails/v2.svg" alt="Go Reference"></a></p>
|
||
<p>Wails 是一个利用 Golang 和 现代 Web 技术（如 Vue、React）构建跨平台桌面应用的开源框架，作为 Go 的快并且轻量的 Electron 替代品</p>
|
||
<p style="padding-top: 12px;">下面是 Wails V2 的快速参考列表，包含常用命令和示例（Wails V3 仍处于开发测试阶段）</p>
|
||
<!--rehype:style=padding-top: 12px;-->
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#命令行工具-cli">命令行工具 (CLI)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#安装与更新">安装与更新</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#项目命令">项目命令</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#常用命令参数">常用命令参数</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#项目配置">项目配置</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#项目结构">项目结构</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#wailsjson-详解">wails.json 详解</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#核心交互与生命周期">核心交互与生命周期</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#方法绑定-go---js">方法绑定 (Go <-> JS)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#事件系统-events">事件系统 (Events)</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#go-端-runtimeevents">Go 端 (runtime.Events*)</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#javascript-端-runtimeevents">JavaScript 端 (runtime.Events*)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#应用生命周期钩子">应用生命周期钩子</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#运行时-api-runtime">运行时 API (Runtime)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#窗口-window">窗口 (Window)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#对话框-dialog">对话框 (Dialog)</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#go-端">Go 端</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#javascript-端">JavaScript 端</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#菜单-menu">菜单 (Menu)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#其他-runtime-api">其他 Runtime API</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#应用打包与分发">应用打包与分发</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#windows-打包">Windows 打包</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#macos-打包">macOS 打包</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#linux-打包">Linux 打包</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#进阶主题与杂项">进阶主题与杂项</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#平台特定构建选项">平台特定构建选项</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用-typescript">使用 TypeScript</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#调试">调试</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#参考资料">参考资料</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="命令行工具-cli"><a aria-hidden="true" tabindex="-1" href="#命令行工具-cli"><span class="icon icon-link"></span></a>命令行工具 (CLI)</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="安装与更新"><a aria-hidden="true" tabindex="-1" href="#安装与更新"><span class="icon icon-link"></span></a>安装与更新</h3><div class="wrap-body">
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 安装 Wails CLI</span>
|
||
</span><span class="code-line">$ go <span class="token function">install</span> github.com/wailsapp/wails/v2/cmd/wails@latest
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment"># 更新到最新稳定版</span>
|
||
</span><span class="code-line">$ wails update
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment"># 更新到最新预发布版</span>
|
||
</span><span class="code-line">$ wails update <span class="token parameter variable">-pre</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="项目命令"><a aria-hidden="true" tabindex="-1" href="#项目命令"><span class="icon icon-link"></span></a>项目命令</h3><div class="wrap-body">
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 初始化新项目 (以 Vue 模板为例)</span>
|
||
</span><span class="code-line">$ wails init <span class="token parameter variable">-n</span> my-project <span class="token parameter variable">-t</span> vue
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment"># 进入项目目录并启动实时开发</span>
|
||
</span><span class="code-line">$ <span class="token builtin class-name">cd</span> my-project
|
||
</span><span class="code-line">$ wails dev
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment"># 构建生产版本 (以 Windows 平台为例)</span>
|
||
</span><span class="code-line">$ wails build <span class="token parameter variable">-platform</span> windows/amd64 <span class="token parameter variable">-clean</span> <span class="token parameter variable">-upx</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment"># 检查环境依赖</span>
|
||
</span><span class="code-line">$ wails doctor
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="常用命令参数"><a aria-hidden="true" tabindex="-1" href="#常用命令参数"><span class="icon icon-link"></span></a>常用命令参数</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="wrap-text "><thead><tr><th>命令</th><th>参数</th><th>描述</th></tr></thead><tbody><tr><td><code>init</code></td><td><code>-n</code></td><td><strong>项目名称 (必填)</strong></td></tr><tr><td></td><td><code>-t</code></td><td>模板名称 (<code>vue</code>, <code>react</code>) 或模板 URL</td></tr><tr><td></td><td><code>-ide</code></td><td>为 <code>vscode</code> 或 <code>goland</code> 生成 IDE 配置</td></tr><tr><td><code>dev</code></td><td><code>-browser</code></td><td>在浏览器中打开前端界面进行调试</td></tr><tr><td></td><td><code>-assetdir</code></td><td>指定前端资产目录的路径</td></tr><tr><td></td><td><code>-frontenddevserverurl</code></td><td>使用外部前端开发服务器的 URL</td></tr><tr><td></td><td><code>-wailsjsdir</code></td><td>指定生成的 Wails JS 模块目录</td></tr><tr><td><code>build</code></td><td><code>-platform</code></td><td>交叉编译目标平台, 如 <code>darwin/arm64</code></td></tr><tr><td></td><td><code>-clean</code></td><td>构建前清理 <code>build/bin</code> 目录</td></tr><tr><td></td><td><code>-upx</code></td><td>使用 UPX 压缩最终的二进制文件</td></tr><tr><td></td><td><code>-nsis</code></td><td>(Windows) 生成 NSIS 安装程序</td></tr><tr><td></td><td><code>-webview2</code></td><td>(Windows) WebView2 依赖处理策略 (<code>download</code>, <code>embed</code>, <code>browser</code>)</td></tr><tr><td></td><td><code>-debug</code></td><td>保留调试信息</td></tr><tr><td></td><td><code>-devtools</code></td><td>在生产版本中启用开发者工具</td></tr></tbody></table>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="项目配置"><a aria-hidden="true" tabindex="-1" href="#项目配置"><span class="icon icon-link"></span></a>项目配置</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="项目结构"><a aria-hidden="true" tabindex="-1" href="#项目结构"><span class="icon icon-link"></span></a>项目结构</h3><div class="wrap-body">
|
||
<pre><code class="code-highlight"><span class="code-line">my-project/
|
||
</span><span class="code-line">├── build/ # 构建输出目录
|
||
</span><span class="code-line">├── frontend/ # 前端源文件
|
||
</span><span class="code-line">│ └── wailsjs/ # Wails 自动生成的模块
|
||
</span><span class="code-line">├── app.go # 应用核心逻辑
|
||
</span><span class="code-line">├── main.go # 应用入口
|
||
</span><span class="code-line">├── go.mod
|
||
</span><span class="code-line">└── wails.json # 项目配置文件
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="wailsjson-详解"><a aria-hidden="true" tabindex="-1" href="#wailsjson-详解"><span class="icon icon-link"></span></a><code>wails.json</code> 详解</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="wrap-text "><thead><tr><th>配置项</th><th>描述</th><th>示例</th></tr></thead><tbody><tr><td><code>name</code></td><td>项目名称</td><td><code>"my-app"</code></td></tr><tr><td><code>outputfilename</code></td><td>输出的二进制文件名</td><td><code>"my-app.exe"</code></td></tr><tr><td><code>frontend:install</code></td><td>前端依赖安装命令</td><td><code>"npm install"</code></td></tr><tr><td><code>frontend:build</code></td><td>前端构建命令</td><td><code>"npm run build"</code></td></tr><tr><td><code>frontend:dev:watcher</code></td><td>开发模式下运行的前端监视命令</td><td><code>"npm run dev"</code></td></tr><tr><td><code>wailsjsdir</code></td><td>生成 JS 模块的目录</td><td><code>"./frontend/wailsjs"</code></td></tr><tr><td><code>author.name</code></td><td>作者名称，用于打包元数据</td><td><code>"Your Name"</code></td></tr><tr><td><code>info</code></td><td>(macOS) 用于 <code>Info.plist</code> 的元数据</td><td><code>{"CFBundleName": "MyApp"}</code></td></tr></tbody></table>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="核心交互与生命周期"><a aria-hidden="true" tabindex="-1" href="#核心交互与生命周期"><span class="icon icon-link"></span></a>核心交互与生命周期</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="方法绑定-go---js"><a aria-hidden="true" tabindex="-1" href="#方法绑定-go---js"><span class="icon icon-link"></span></a>方法绑定 (Go <-> JS)</h3><div class="wrap-body">
|
||
<p>在 Go 中定义公共方法，即可在前端直接调用。</p>
|
||
<pre class="language-go"><code class="language-go code-highlight"><span class="code-line"><span class="token comment">// app.go</span>
|
||
</span><span class="code-line"><span class="token keyword">type</span> App <span class="token keyword">struct</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> ctx context<span class="token punctuation">.</span>Context
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">func</span> <span class="token punctuation">(</span>a <span class="token operator">*</span>App<span class="token punctuation">)</span> <span class="token function">Greet</span><span class="token punctuation">(</span>name <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token builtin">string</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">return</span> fmt<span class="token punctuation">.</span><span class="token function">Sprintf</span><span class="token punctuation">(</span><span class="token string">"Hello %s!"</span><span class="token punctuation">,</span> name<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// main.go</span>
|
||
</span><span class="code-line">app <span class="token operator">:=</span> <span class="token function">NewApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">err <span class="token operator">:=</span> wails<span class="token punctuation">.</span><span class="token function">Run</span><span class="token punctuation">(</span><span class="token operator">&</span>options<span class="token punctuation">.</span>App<span class="token punctuation">{</span>
|
||
</span><span class="code-line"> Title<span class="token punctuation">:</span> <span class="token string">"My App"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> Bind<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token keyword">interface</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> app<span class="token punctuation">,</span> <span class="token comment">// 暴露 app 实例的所有公共方法</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token comment">// frontend/main.js</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Greet</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'../wailsjs/go/main/App'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token function"><span class="token maybe-class-name">Greet</span></span><span class="token punctuation">(</span><span class="token string">"World"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">result</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="事件系统-events"><a aria-hidden="true" tabindex="-1" href="#事件系统-events"><span class="icon icon-link"></span></a>事件系统 (Events)</h3><div class="wrap-body">
|
||
<p>用于在 Go 和前端之间异步发送和监听消息。</p>
|
||
<h4 id="go-端-runtimeevents"><a aria-hidden="true" tabindex="-1" href="#go-端-runtimeevents"><span class="icon icon-link"></span></a>Go 端 (<code>runtime.Events*</code>)</h4>
|
||
<pre class="language-go"><code class="language-go code-highlight"><span class="code-line"><span class="token keyword">import</span> <span class="token string">"github.com/wailsapp/wails/v2/pkg/runtime"</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 发送事件到前端</span>
|
||
</span><span class="code-line">runtime<span class="token punctuation">.</span><span class="token function">EventsEmit</span><span class="token punctuation">(</span>app<span class="token punctuation">.</span>ctx<span class="token punctuation">,</span> <span class="token string">"go-event"</span><span class="token punctuation">,</span> <span class="token string">"data from Go"</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 监听来自前端的事件</span>
|
||
</span><span class="code-line">runtime<span class="token punctuation">.</span><span class="token function">EventsOn</span><span class="token punctuation">(</span>app<span class="token punctuation">.</span>ctx<span class="token punctuation">,</span> <span class="token string">"js-event"</span><span class="token punctuation">,</span> <span class="token keyword">func</span><span class="token punctuation">(</span>optionalData <span class="token operator">...</span><span class="token keyword">interface</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ... 处理数据</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
<h4 id="javascript-端-runtimeevents"><a aria-hidden="true" tabindex="-1" href="#javascript-端-runtimeevents"><span class="icon icon-link"></span></a>JavaScript 端 (<code>runtime.Events*</code>)</h4>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">EventsOn</span><span class="token punctuation">,</span> <span class="token maybe-class-name">EventsEmit</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'../wailsjs/runtime'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 发送事件到 Go</span>
|
||
</span><span class="code-line"><span class="token function"><span class="token maybe-class-name">EventsEmit</span></span><span class="token punctuation">(</span><span class="token string">"js-event"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token string-property property">"payload"</span><span class="token operator">:</span> <span class="token number">123</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment">// 监听来自 Go 的事件</span>
|
||
</span><span class="code-line"><span class="token function"><span class="token maybe-class-name">EventsOn</span></span><span class="token punctuation">(</span><span class="token string">"go-event"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"Received data from Go:"</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="应用生命周期钩子"><a aria-hidden="true" tabindex="-1" href="#应用生命周期钩子"><span class="icon icon-link"></span></a>应用生命周期钩子</h3><div class="wrap-body">
|
||
<p>在 <code>wails.Run()</code> 中定义，用于在应用关键节点执行 Go 代码。</p>
|
||
<pre class="language-go"><code class="language-go code-highlight"><span class="code-line"><span class="token comment">// main.go</span>
|
||
</span><span class="code-line">err <span class="token operator">:=</span> wails<span class="token punctuation">.</span><span class="token function">Run</span><span class="token punctuation">(</span><span class="token operator">&</span>options<span class="token punctuation">.</span>App<span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"> OnStartup<span class="token punctuation">:</span> app<span class="token punctuation">.</span>startup<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> OnDomReady<span class="token punctuation">:</span> app<span class="token punctuation">.</span>domReady<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> OnShutdown<span class="token punctuation">:</span> app<span class="token punctuation">.</span>shutdown<span class="token punctuation">,</span>
|
||
</span><span class="code-line"> OnBeforeClose<span class="token punctuation">:</span> app<span class="token punctuation">.</span>beforeClose<span class="token punctuation">,</span> <span class="token comment">// 返回 bool 值决定是否关闭</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="wrap-text "><thead><tr><th>钩子</th><th>描述</th></tr></thead><tbody><tr><td><code>OnStartup</code></td><td>应用启动时，在窗口创建前调用</td></tr><tr><td><code>OnDomReady</code></td><td>前端 DOM 加载完成后调用</td></tr><tr><td><code>OnShutdown</code></td><td>应用关闭前，在窗口销毁后调用</td></tr><tr><td><code>OnBeforeClose</code></td><td>用户关闭窗口时调用，返回 <code>true</code> 可阻止关闭</td></tr></tbody></table>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="运行时-api-runtime"><a aria-hidden="true" tabindex="-1" href="#运行时-api-runtime"><span class="icon icon-link"></span></a>运行时 API (Runtime)</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="窗口-window"><a aria-hidden="true" tabindex="-1" href="#窗口-window"><span class="icon icon-link"></span></a>窗口 (Window)</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="wrap-text "><thead><tr><th>功能</th><th>Go 示例 (<code>runtime.*</code>)</th><th>JS 示例 (<code>runtime.*</code>)</th></tr></thead><tbody><tr><td><strong>设置标题</strong></td><td><code>WindowSetTitle(ctx, "New")</code></td><td><code>WindowSetTitle("New")</code></td></tr><tr><td><strong>设置尺寸</strong></td><td><code>WindowSetSize(ctx, 800, 600)</code></td><td><code>WindowSetSize(800, 600)</code></td></tr><tr><td><strong>设置最小/最大尺寸</strong></td><td><code>WindowSetMinSize(ctx, 400, 300)</code></td><td><code>WindowSetMinSize(400, 300)</code></td></tr><tr><td><strong>居中</strong></td><td><code>WindowCenter(ctx)</code></td><td><code>WindowCenter()</code></td></tr><tr><td><strong>全屏/取消全屏</strong></td><td><code>WindowFullscreen(ctx)</code></td><td><code>WindowFullscreen()</code></td></tr><tr><td><strong>显示/隐藏</strong></td><td><code>WindowShow(ctx)</code> / <code>WindowHide(ctx)</code></td><td><code>WindowShow()</code> / <code>WindowHide()</code></td></tr><tr><td><strong>设为置顶</strong></td><td><code>WindowSetAlwaysOnTop(ctx, true)</code></td><td><code>WindowSetAlwaysOnTop(true)</code></td></tr><tr><td><strong>拖动窗口</strong></td><td>(仅 JS)</td><td>在 HTML 元素上设置 <code>style="--wails-draggable:drag"</code></td></tr></tbody></table>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="对话框-dialog"><a aria-hidden="true" tabindex="-1" href="#对话框-dialog"><span class="icon icon-link"></span></a>对话框 (Dialog)</h3><div class="wrap-body">
|
||
<h4 id="go-端"><a aria-hidden="true" tabindex="-1" href="#go-端"><span class="icon icon-link"></span></a>Go 端</h4>
|
||
<pre class="language-go"><code class="language-go code-highlight"><span class="code-line">dialogOpts <span class="token operator">:=</span> <span class="token operator">&</span>runtime<span class="token punctuation">.</span>OpenDialogOptions<span class="token punctuation">{</span> Title<span class="token punctuation">:</span> <span class="token string">"Select File"</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line">filePath<span class="token punctuation">,</span> err <span class="token operator">:=</span> runtime<span class="token punctuation">.</span><span class="token function">OpenFileDialog</span><span class="token punctuation">(</span>app<span class="token punctuation">.</span>ctx<span class="token punctuation">,</span> <span class="token operator">*</span>dialogOpts<span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th>对话框类型</th><th>Go 方法 (<code>runtime.*</code>)</th></tr></thead><tbody><tr><td><strong>信息框</strong></td><td><code>MessageDialog(ctx, runtime.MessageDialogOptions{...})</code></td></tr><tr><td><strong>打开文件</strong></td><td><code>OpenFileDialog(ctx, runtime.OpenDialogOptions{...})</code></td></tr><tr><td><strong>保存文件</strong></td><td><code>SaveFileDialog(ctx, runtime.SaveDialogOptions{...})</code></td></tr><tr><td><strong>打开目录</strong></td><td><code>OpenDirectoryDialog(ctx, runtime.OpenDialogOptions{...})</code></td></tr></tbody></table>
|
||
<h4 id="javascript-端"><a aria-hidden="true" tabindex="-1" href="#javascript-端"><span class="icon icon-link"></span></a>JavaScript 端</h4>
|
||
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">OpenFileDialog</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'../wailsjs/runtime'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">selectFile</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> filePath <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function"><span class="token maybe-class-name">OpenFileDialog</span></span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Select File"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="菜单-menu"><a aria-hidden="true" tabindex="-1" href="#菜单-menu"><span class="icon icon-link"></span></a>菜单 (Menu)</h3><div class="wrap-body">
|
||
<pre class="language-go"><code class="language-go code-highlight"><span class="code-line"><span class="token comment">// main.go</span>
|
||
</span><span class="code-line">appMenu <span class="token operator">:=</span> menu<span class="token punctuation">.</span><span class="token function">NewMenu</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">fileMenu <span class="token operator">:=</span> appMenu<span class="token punctuation">.</span><span class="token function">AddSubmenu</span><span class="token punctuation">(</span><span class="token string">"File"</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">fileMenu<span class="token punctuation">.</span><span class="token function">AddText</span><span class="token punctuation">(</span><span class="token string">"Quit"</span><span class="token punctuation">,</span> keys<span class="token punctuation">.</span><span class="token function">CmdOrCtrl</span><span class="token punctuation">(</span><span class="token string">"q"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">func</span><span class="token punctuation">(</span><span class="token boolean">_</span> <span class="token operator">*</span>menu<span class="token punctuation">.</span>CallbackData<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> runtime<span class="token punctuation">.</span><span class="token function">Quit</span><span class="token punctuation">(</span>app<span class="token punctuation">.</span>ctx<span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line">err <span class="token operator">:=</span> wails<span class="token punctuation">.</span><span class="token function">Run</span><span class="token punctuation">(</span><span class="token operator">&</span>options<span class="token punctuation">.</span>App<span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"> Menu<span class="token punctuation">:</span> appMenu<span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="wrap-text "><thead><tr><th>菜单项类型</th><th>示例</th></tr></thead><tbody><tr><td><strong>文本项</strong></td><td><code>menu.AddText("Item", accelerator, callback)</code></td></tr><tr><td><strong>复选框</strong></td><td><code>menu.AddCheckbox("Toggle", true, accelerator, callback)</code></td></tr><tr><td><strong>分隔符</strong></td><td><code>menu.AddSeparator()</code></td></tr><tr><td><strong>子菜单</strong></td><td><code>menu.AddSubmenu("Submenu")</code></td></tr></tbody></table>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="其他-runtime-api"><a aria-hidden="true" tabindex="-1" href="#其他-runtime-api"><span class="icon icon-link"></span></a>其他 Runtime API</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="wrap-text "><thead><tr><th>功能</th><th>Go 示例 (<code>runtime.*</code>)</th><th>JS 示例 (<code>runtime.*</code>)</th></tr></thead><tbody><tr><td><strong>日志</strong></td><td><code>LogInfo(ctx, "Message")</code></td><td><code>LogInfo("Message")</code></td></tr><tr><td><strong>剪贴板</strong></td><td><code>ClipboardSetText(ctx, "text")</code></td><td><code>ClipboardSetText("text")</code></td></tr></tbody></table>
|
||
<!--rehype:className=wrap-text -->
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="应用打包与分发"><a aria-hidden="true" tabindex="-1" href="#应用打包与分发"><span class="icon icon-link"></span></a>应用打包与分发</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="windows-打包"><a aria-hidden="true" tabindex="-1" href="#windows-打包"><span class="icon icon-link"></span></a>Windows 打包</h3><div class="wrap-body">
|
||
<ul>
|
||
<li>
|
||
<p><strong>默认生成</strong>: <code>.exe</code> 可执行文件。</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">wails build <span class="token parameter variable">-platform</span> windows/amd64
|
||
</span></code></pre>
|
||
</li>
|
||
<li>
|
||
<p><strong>生成 NSIS 安装程序</strong>:</p>
|
||
<ul>
|
||
<li>
|
||
<p><strong>前提条件</strong>: 需要预先安装 <a href="https://nsis.sourceforge.io/Download">NSIS (Nullsoft Scriptable Install System)</a>。</p>
|
||
<ul>
|
||
<li>
|
||
<p><strong>下载 NSIS</strong>: 从 <a href="https://nsis.sourceforge.io/Download">NSIS 官方网站</a> 下载最新版本的 NSIS 安装程序。</p>
|
||
</li>
|
||
<li>
|
||
<p><strong>安装 NSIS</strong>: 运行安装程序并按照提示完成安装。<strong>确保</strong>在安装过程中选择将 NSIS 添加到系统的 <code>PATH</code> 环境变量中，以便 <code>makensis</code> 命令可以在命令行中全局访问。</p>
|
||
</li>
|
||
<li>
|
||
<p><strong>验证安装</strong>:</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">makensis <span class="token parameter variable">-VERSION</span>
|
||
</span></code></pre>
|
||
<p>如果安装正确，您将看到 NSIS 的版本号输出。</p>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<p><strong>生成安装程序</strong>:</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">wails build <span class="token parameter variable">-platform</span> windows/amd64 <span class="token parameter variable">-nsis</span>
|
||
</span></code></pre>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<p><strong>处理 WebView2 依赖</strong>:</p>
|
||
<ul>
|
||
<li>
|
||
<p><code>download</code>: 提示用户下载 WebView2。</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">wails build <span class="token parameter variable">-platform</span> windows/amd64 <span class="token parameter variable">-webview2</span> download
|
||
</span></code></pre>
|
||
</li>
|
||
<li>
|
||
<p><code>embed</code>: 将 WebView2 嵌入到应用中（推荐）。</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">wails build <span class="token parameter variable">-platform</span> windows/amd64 <span class="token parameter variable">-webview2</span> embed
|
||
</span></code></pre>
|
||
</li>
|
||
<li>
|
||
<p><code>browser</code>: 在浏览器中打开下载页面。</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">wails build <span class="token parameter variable">-platform</span> windows/amd64 <span class="token parameter variable">-webview2</span> browser
|
||
</span></code></pre>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="macos-打包"><a aria-hidden="true" tabindex="-1" href="#macos-打包"><span class="icon icon-link"></span></a>macOS 打包</h3><div class="wrap-body">
|
||
<ul>
|
||
<li>
|
||
<p><strong>默认生成</strong>: <code>.app</code> 应用程序包。</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">wails build <span class="token parameter variable">-platform</span> darwin/amd64
|
||
</span></code></pre>
|
||
</li>
|
||
<li>
|
||
<p><strong>代码签名与公证</strong>:</p>
|
||
<ul>
|
||
<li>需要通过 Apple 开发者账户进行 <strong>代码签名</strong> 和 <strong>公证</strong> 才能分发。</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<p><strong>跳过打包成 <code>.app</code> 步骤</strong>:</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">wails build <span class="token parameter variable">-platform</span> darwin/amd64 <span class="token parameter variable">-skippackage</span>
|
||
</span></code></pre>
|
||
</li>
|
||
</ul>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="linux-打包"><a aria-hidden="true" tabindex="-1" href="#linux-打包"><span class="icon icon-link"></span></a>Linux 打包</h3><div class="wrap-body">
|
||
<ul>
|
||
<li>
|
||
<p><strong>生成可执行文件</strong>:</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">wails build <span class="token parameter variable">-platform</span> linux/amd64
|
||
</span></code></pre>
|
||
</li>
|
||
<li>
|
||
<p><strong>打包成 <code>.deb</code></strong>:</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">wails build <span class="token parameter variable">-platform</span> linux/amd64 <span class="token parameter variable">-deb</span>
|
||
</span></code></pre>
|
||
</li>
|
||
<li>
|
||
<p><strong>打包成 <code>.rpm</code></strong>:</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">wails build <span class="token parameter variable">-platform</span> linux/amd64 <span class="token parameter variable">-rpm</span>
|
||
</span></code></pre>
|
||
</li>
|
||
<li>
|
||
<p><strong>AppImage 支持</strong>:</p>
|
||
<ul>
|
||
<li>Wails 不直接内置对 AppImage 的支持，但可以使用外部工具手动创建。
|
||
<ul>
|
||
<li>
|
||
<p><strong>使用 <code>appimagetool</code></strong>:</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">appimagetool ./your-app-dir
|
||
</span></code></pre>
|
||
</li>
|
||
<li>
|
||
<p><strong>安装 <code>appimagetool</code></strong>:</p>
|
||
<ul>
|
||
<li>您可以从 <a href="https://appimage.org/">AppImage 官方网站</a> 获取 <code>appimagetool</code>。</li>
|
||
<li>下载后，将其添加到您的 <code>PATH</code> 中以便全局访问。</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<hr>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="进阶主题与杂项"><a aria-hidden="true" tabindex="-1" href="#进阶主题与杂项"><span class="icon icon-link"></span></a>进阶主题与杂项</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="平台特定构建选项"><a aria-hidden="true" tabindex="-1" href="#平台特定构建选项"><span class="icon icon-link"></span></a>平台特定构建选项</h3><div class="wrap-body">
|
||
<p>在 <code>main.go</code> 的 <code>wails.Run()</code> 中为不同平台提供细粒度配置。</p>
|
||
<pre class="language-go"><code class="language-go code-highlight"><span class="code-line">err <span class="token operator">:=</span> wails<span class="token punctuation">.</span><span class="token function">Run</span><span class="token punctuation">(</span><span class="token operator">&</span>options<span class="token punctuation">.</span>App<span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// ...</span>
|
||
</span><span class="code-line"> Windows<span class="token punctuation">:</span> <span class="token operator">&</span>windows<span class="token punctuation">.</span>Options<span class="token punctuation">{</span>
|
||
</span><span class="code-line"> WebviewIsTransparent<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// WebView2 背景透明</span>
|
||
</span><span class="code-line"> WindowIsTranslucent<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 窗口背景透明</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> Mac<span class="token punctuation">:</span> <span class="token operator">&</span>mac<span class="token punctuation">.</span>Options<span class="token punctuation">{</span>
|
||
</span><span class="code-line"> TitleBar<span class="token punctuation">:</span> <span class="token operator">&</span>mac<span class="token punctuation">.</span>TitleBar<span class="token punctuation">{</span>
|
||
</span><span class="code-line"> TitlebarAppearsTransparent<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 透明标题栏</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> About<span class="token punctuation">:</span> <span class="token operator">&</span>mac<span class="token punctuation">.</span>AboutInfo<span class="token punctuation">{</span>
|
||
</span><span class="code-line"> Title<span class="token punctuation">:</span> <span class="token string">"My Awesome App"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> Message<span class="token punctuation">:</span> <span class="token string">"© 2025 Me"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用-typescript"><a aria-hidden="true" tabindex="-1" href="#使用-typescript"><span class="icon icon-link"></span></a>使用 TypeScript</h3><div class="wrap-body">
|
||
<p>Wails 会自动为 Go 绑定的方法生成 TypeScript 定义。</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># wails.json</span>
|
||
</span><span class="code-line"><span class="token string">"frontend:build"</span><span class="token builtin class-name">:</span> <span class="token string">"npm run build"</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token comment"># package.json</span>
|
||
</span><span class="code-line"><span class="token string">"scripts"</span><span class="token builtin class-name">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token string">"build"</span><span class="token builtin class-name">:</span> <span class="token string">"tsc && vite build"</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="调试"><a aria-hidden="true" tabindex="-1" href="#调试"><span class="icon icon-link"></span></a>调试</h3><div class="wrap-body">
|
||
<ul>
|
||
<li><strong>Go 部分</strong>: 使用 <code>wails dev -debug</code> 启动并附加您的 Go 调试器。</li>
|
||
<li><strong>前端部分</strong>: 在 <code>wails dev</code> 模式下，右键点击应用，选择“检查”打开浏览器开发者工具。</li>
|
||
</ul>
|
||
</div></div></div></div></div><div class="wrap h2body-not-exist"><div class="wrap-header h2wrap"><h2 id="参考资料"><a aria-hidden="true" tabindex="-1" href="#参考资料"><span class="icon icon-link"></span></a>参考资料</h2><div class="wrap-body">
|
||
<ul>
|
||
<li><a href="https://wails.io/">Wails 官方文档</a></li>
|
||
<li><a href="https://github.com/wailsapp/wails">Wails GitHub 仓库</a></li>
|
||
<li><a href="https://discord.gg/4K6VHPkG5c">Wails Discord 社区</a></li>
|
||
</ul>
|
||
<hr>
|
||
</div></div><div class="h2wrap-body"></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.8.3" defer></script><script src="../js/fuse.min.js?v=1.8.3" defer></script><script src="../js/main.js?v=1.8.3" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|