概述本文探讨 Wails 框架的使用从搭建环境到开发再到最终的构建打包本项目源码 GitHub 地址https://github.com/chengchuu/go-run-wechat-demo前言Wails 是一个桌面应用开发框架。本项目使用 Go 实现后端方法使用 React 和 TypeScript 编写界面。Wails 负责窗口管理、资源加载和前后端调用。Wails v2 主要优势:复用系统渲染引擎: Wails 使用平台提供的 WebView无需在应用中捆绑完整浏览器。这有助于控制分发体积但运行环境仍需具备对应组件。复用 Go 后端能力: 文件处理、网络请求和业务逻辑可以直接使用 Go 及其生态库。界面使用 Web 技术后端使用 Go便于沿用已有代码和工具。自动生成前后端绑定: Wails 为绑定的 Go 方法生成 JavaScript 封装和 TypeScript 类型声明。前端可直接发起异步调用减少手动维护桥接接口的工作。集成开发与构建流程:wails dev支持前端更新和 Go 代码自动重建也提供浏览器调试入口。wails build串联前端构建、资源嵌入和原生打包。提供桌面系统交互接口: 除窗口控制外Wails 还提供原生菜单、系统对话框和剪贴板接口。v2 也提供系统通知接口便于扩展桌面功能。保留前端技术选择: 界面可以沿用 HTML、CSS 和 JavaScript 技术。Wails 提供 React、Vue 和 Svelte 等模板便于复用已有组件与开发经验。本仓库选择 React 和 TypeScript。更多信息详见 Wails v2 功能介绍和运行机制。运行本项目环境要求当前依赖以go.mod和frontend/package.json为准。ComponentVersionGo1.25.0Wailsv2.15.0Node.js22.22.2npm10.9.7安装 Wails请先安装 Go 和 Node.js再安装 Wails。goinstallgithub.com/wailsapp/wails/v2/cmd/wailsv2.15.0确保 Go 的可执行文件安装目录位于PATH中验证安装结果:wails version也可以通过wails doctor来检查是否所有必要的依赖都已正确安装。# Wails # ... # System # ... # Dependencies # ... # Diagnosis # ... SUCCESS Your system is ready for Wails development!启动应用完成安装后进入本仓库根目录执行:wails doctor wails devwails doctor检查原生构建依赖。wails dev启动桌面开发环境并按wails.json运行前端安装和开发命令。首次运行需要下载依赖。创建一个 Wails 项目如果需要从头复现教程请完成前面的环境准备和 Wails 安装再创建新项目。创建新项目使用 Wails CLI 创建项目。CLI 指命令行工具下面的命令选择 React TypeScript 模板:wails init-ngo-run-wechat-demo-treact-ts项目结构main.go: 应用入口配置窗口、嵌入资源、启动回调和 Go 方法绑定。app.go: 定义App保存启动上下文并提供两个演示方法。frontend/index.html和frontend/src/main.tsx: 加载页面并挂载 React 应用。frontend/src/App.tsx: 定义界面、按钮事件和结果状态。样式与静态资源也位于frontend/src/。frontend/wailsjs/: Wails 生成的 Go 调用封装、类型声明和运行时文件。修改 Go 方法后应重新生成不要手动编辑。go.mod和go.sum: 记录 Go 模块依赖与校验信息。frontend/package.json: 声明前端依赖与脚本。Vite 和 TypeScript 配置也位于frontend/。wails.json: 定义产物名称以及前端安装、开发和构建命令。build/: 保存应用图标和平台打包配置。构建产物位于build/bin/。启动时main()创建App并交给wails.Run。app.startup保存上下文React 入口随后挂载界面。点击按钮后生成的封装调用 Go 方法返回结果通过 Promise 更新页面状态。项目实战: 仿微信登录界面进入开发模式在项目根目录执行wails dev首次运行会安装前后端依赖。开发模式也提供浏览器调试页面:To develop in the browser and call your bound Go methods from Javascript, navigate to: http://localhost:34115前端开发服务器使用 Vite。前端组件修改可触发热更新以下为日志示例。Go 代码由 Wails 的开发流程重新构建。1:42:21 PM [vite] hmr update /src/App.tsx修改代码窗口样式和布局main.go使用Width和Height设置窗口尺寸使用BackgroundColour设置背景色。Title指定窗口标题Bind注册供前端调用的 Go 实例。以下为main.go中的入口函数:funcmain(){// Create an instance of the app structureapp:NewApp()// Create application with optionserr:wails.Run(options.App{Title:WeChat,Width:280,Height:400,AssetServer:assetserver.Options{Assets:assets,},BackgroundColour:options.RGBA{R:255,G:255,B:255,A:1},OnStartup:app.startup,Bind:[]interface{}{app,},})iferr!nil{println(Error:,err.Error())}}后端实现app.go提供两个演示方法供前端 JavaScript 调用。LogInSuccess根据传入的名称返回欢迎消息SwitchAccountSuccess返回固定提示。两者均只返回字符串不执行实际登录或切换账号。// Log In Successfunc(a*App)LogInSuccess(namestring)string{returnfmt.Sprintf(Welcome %s, You are logged in!,name)}// Switch Account Successfunc(a*App)SwitchAccountSuccess()string{returnYou have switched accounts!}Wails 根据绑定实例的导出方法生成调用封装并提供 TypeScript 类型声明。以下声明位于frontend/wailsjs/go/main/App.d.ts。前端得到的是异步结果因此返回类型为Promisestring。// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL// This file is automatically generated. DO NOT EDITexportfunctionLogInSuccess(arg1:string):Promisestring;exportfunctionSwitchAccountSuccess():Promisestring;前端实现frontend/src/App.tsx 导入生成的调用封装。按钮事件调用 Go 方法再通过setResultText更新显示内容:import{useState}fromreact;importlogofrom./assets/images/logo-universal-w256.jpg;import./App.css;import{LogInSuccess,SwitchAccountSuccess}from../wailsjs/go/main/App;functionApp(){const[resultText,setResultText]useState();constname除;constupdateResultText(result:string)setResultText(result);functionlogIn(){LogInSuccess(name).then(updateResultText);}functionswitchAccount(){SwitchAccountSuccess().then(updateResultText);}return(div idAppimg src{logo}idlogoaltlogo/div idresultclassNameresult name{resultText||name}/divbutton classNamebtn log-inonClick{logIn}Log In/buttonbutton classNamebtn switch-accountonClick{switchAccount}Switch Account/button/div)}exportdefaultApp初始名称固定为除页面优先显示resultText。当前事件处理函数没有处理 Promise 拒绝。单独启动 Vite 也不会提供 Go 调用桥接应使用 Wails 开发环境验证按钮行为。frontend/src/App.css 定义按钮样式以下为相关片段:.btn{display:block;margin:0 auto;padding:0;text-align:center;border:none;font-size:14px;}.log-in{width:200px;height:36px;line-height:36px;color:#ffffff;background-color:hsla(148,61%,46%,1);border-radius:4px;margin-top:70px;}.switch-account{background-color:#ffffff;color:rgb(89,107,144);margin-top:22px;}此时界面如图:尝试操作 Log In:尝试操作 Switch Account:底部图标:打包应用在项目根目录执行wails build构建当前平台的应用。Wails 生成绑定运行前端构建再编译和打包 Go 应用。wails.json将前端构建命令设为npm run build。该脚本先运行 TypeScript 检查再由 Vite 生成frontend/dist。main.go通过//go:embed all:frontend/dist嵌入这些资源。macOS 应用输出为build/bin/WeChat.app。如果需要清理输出目录后重建可使用下面的命令-clean会清理build/bin请先保存需要保留的产物。wails build-clean指定 Intel Mac 目标架构的示例:wails build-platformdarwin/amd64指定 Windows AMD64 目标的示例:wails build-platformwindows/amd64完成 macOS 构建并安装 create-dmg 后在仓库根目录执行下面的命令。下面的命令将镜像输出到build/bin/WeChat.dmg:wechat_dmg_source$(mktemp-d)cp-Rbuild/bin/WeChat.app$wechat_dmg_source/create-dmg build/bin/WeChat.dmg$wechat_dmg_source以上文件可以进入 Releases 页面查看:https://github.com/chengchuu/go-run-wechat-demo/releases/tag/v1.0.0更新记录本文首次编辑于 2024-02-19最近更新于 2026-09-29。版权声明本文为原创文章作者保留版权。转载请保留本文完整内容并以超链接形式注明作者及原文出处。作者: 除除原文: https://blog.mazey.net/6551.html