go使用 Wails 构建轻量级桌面应用：仿微信登录界面 Demo-程序员茄子

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

2024-11-18 22:57:54 +0800 CST views 1421

使用 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

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

界面布局与逻辑实现

窗口样式设置
在 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())
    }
}

后端功能实现
在 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!"
}

前端界面实现
修改 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;

自定义样式
修改 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;
}