使用 Wails 构建轻量级桌面应用：仿微信登录界面 Demo

本文将介绍如何使用 Wails 框架来构建一个仿微信登录界面的桌面应用。此框架利用 Go 的性能优势，结合任何前端技术（如 React、Vue、Svelte），实现高效且轻量级的跨平台桌面应用。项目源码可在 GitHub 上获取。

为什么选择 Wails？

• 更小的应用体积：Wails 编译的应用程序体积较小，无需嵌入浏览器引擎。
• 原生性能：Wails 基于 Go 的性能优势，特别适合需要高并发和系统级操作的应用。
• 简化的构建流程：一条命令即可构建并打包应用，极大简化了操作。
• 灵活的前端选择：支持使用任何前端框架来开发用户界面，提供丰富的开发体验。

环境配置与项目创建

安装 Wails

确保已安装 Go 和 Node.js。通过以下命令安装 Wails：

go install github.com/wailsapp/wails/v2/cmd/wails@latest

验证安装结果：

wails version

创建新项目

在项目目录中，使用 Wails CLI 创建一个新项目：

wails init -n go-run-wechat-demo -t react-ts

项目结构概览

• main.go 和 app.go：包含业务逻辑、数据管理及与前端的通信。
• frontend：前端代码，使用 React、Vue 或其他框架构建用户界面。
• go.mod 和 go.sum：Go 的模块依赖文件。
• wails.json：Wails 的配置文件。
• build：构建后的应用程序及资源文件。

开发流程

进入项目根目录并运行开发命令：

wails dev

此时可通过浏览器调试页面，且支持实时更新。

界面布局与逻辑实现

1. 窗口样式设置
   在 main.go 文件中设置应用窗口的宽高、背景色及标题：

   func main() {
       app := NewApp()
       err := wails.Run(&options.App{
           Title:  "WeChat",
           Width:  280,
           Height: 400,
           BackgroundColour: &options.RGBA{R: 255, G: 255, B: 255, A: 1},
           OnStartup: app.startup,
           Bind: []interface{}{app},
       })
   
       if err != nil {
           println("Error:", err.Error())
       }
   }
   

2. 后端功能实现
   在 app.go 文件中定义登录和切换账号的两个方法：

   func (a *App) LogInSuccess(name string) string {
       return fmt.Sprintf("Welcome %s, You are logged in!", name)
   }
   
   func (a *App) SwitchAccountSuccess() string {
       return "You have switched accounts!"
   }
   

3. 前端界面实现
   修改 frontend/src/App.tsx 文件，添加前端逻辑和界面元素：

   import {useState} from "react";
   import {LogInSuccess, SwitchAccountSuccess} from "../wailsjs/go/main/App";
   
   function App() {
       const [resultText, setResultText] = useState("");
       const name = "除";
   
       function logIn() {
           LogInSuccess(name).then(setResultText);
       }
   
       function switchAccount() {
           SwitchAccountSuccess().then(setResultText);
       }
   
       return (
           <div id="App">
               <div id="result" className="result name">{resultText || name}</div>
               <button className="btn log-in" onClick={logIn}>Log In</button>
               <button className="btn switch-account" onClick={switchAccount}>Switch Account</button>
           </div>
       );
   }
   export default App;
   

4. 自定义样式
   修改 frontend/src/App.css 以适配界面布局：

   .btn {
       display: block;
       margin: 0 auto;
       font-size: 14px;
   }
   .log-in {
       width: 200px;
       background-color: hsla(148, 61%, 46%, 1);
   }
   .switch-account {
       color: rgb(89, 107, 144);
       margin-top: 22px;
   }
   

打包与发布

运行以下命令打包应用程序：

wails build -clean

macOS 和 Windows 平台的打包

• macOS：

  wails build -platform=darwin/amd64
  

• Windows：

  wails build -platform=windows/amd64
  

以上步骤完成后，即可在 GitHub Releases 页面发布构建包。

总结

Wails 框架为开发者提供了轻量级的跨平台桌面应用开发体验，结合 Go 的性能和灵活的前端技术栈，适用于需要高性能和小体积的桌面应用开发场景。