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

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

使用 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 的性能和灵活的前端技术栈,适用于需要高性能和小体积的桌面应用开发场景。

复制全文 生成海报 桌面应用 开发框架 跨平台 Go语言

推荐文章

如何在 Vue 3 中使用 TypeScript?
2024-11-18 22:30:18 +0800 CST
Vue3如何执行响应式数据绑定?
2024-11-18 12:31:22 +0800 CST
imap_open绕过exec禁用的脚本
2024-11-17 05:01:58 +0800 CST
PHP 如何输出带微秒的时间
2024-11-18 01:58:41 +0800 CST
nginx反向代理
2024-11-18 20:44:14 +0800 CST
Go语言SQL操作实战
2024-11-18 19:30:51 +0800 CST
Linux 常用进程命令介绍
2024-11-19 05:06:44 +0800 CST
在 Vue 3 中如何创建和使用插件?
2024-11-18 13:42:12 +0800 CST
回到上次阅读位置技术实践
2025-04-19 09:47:31 +0800 CST
快速提升Vue3开发者的效率和界面
2025-05-11 23:37:03 +0800 CST
js一键生成随机颜色:randomColor
2024-11-18 10:13:44 +0800 CST
ElasticSearch简介与安装指南
2024-11-19 02:17:38 +0800 CST
全栈利器 H3 框架来了!
2025-07-07 17:48:01 +0800 CST
一个简单的html卡片元素代码
2024-11-18 18:14:27 +0800 CST
Nginx负载均衡详解
2024-11-17 07:43:48 +0800 CST
MySQL设置和开启慢查询
2024-11-19 03:09:43 +0800 CST
程序员茄子在线接单