当前位置: 首页 > news >正文

Go 实战|使用 Wails 构建轻量级的桌面应用:仿微信登录界面 Demo

概述

本文探讨 Wails 框架的使用,从搭建环境到开发,再到最终的构建打包,本项目源码 GitHub 地址:https://github.com/mazeyqian/go-run-wechat-demo

前言

Wails 是一个跨平台桌面应用开发框架,他允许开发者利用 Go 的性能优势,并结合任何前端技术栈,如 React、Vue 或 Svelte,来创建桌面应用。

对于桌面应用,Electron 长久以来一直是主流选择,他使用 Web 前端技术构建跨平台的桌面应用。然而,Electron 有着较大的内存占用和应用体积,这让 Wails 成为了轻量级的替代方案。

Wails 的显著优势:

  1. 更小的应用体积:Wails 编译的应用程序通常比 Electron 更小,这意味着更快的下载速度和启动时间,以及更低的运行时资源消耗。
  2. 原生性能:Go 提供了接近 C 语言的性能,这使得 Wails 应用能够更高效地运行,尤其是在处理并发任务和系统级操作时。
  3. 简化的构建过程:Wails 简化了构建过程,只需一条命令就可以将应用打包为可执行文件,无需额外的配置或依赖。
  4. 优秀的开发体验:和开发 Web 前端应用一样的实时改动反馈,并且可以在浏览器中开发桌面应用。
  5. 原生用户界面元素:Wails 支持使用系统原生的用户界面元素,提供一致的用户体验。
  6. 灵活的前端选择:可以选择开发者熟悉的任何前端框架来开发桌面应用。

Components of a Wails App

创建一个 Wails 项目

在开始创建 Wails 项目之前,需要确保系统中已经安装了 Go 和 Node.js,因为 Wails 依赖这两者来构建桌面应用。以下是安装 Wails 框架和创建新项目的步骤。

安装 Wails

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

验证安装结果:

wails version

也可以通过 wails doctor 来检查是否所有必要的依赖都已正确安装。

# Wails
# ...
# System
# ...
# Dependencies
# ...
# Diagnosis
# ...
SUCCESS  Your system is ready for Wails development!

我的本地开发版本:

#Version
Wailsv2.6.0
Gov1.19.1
Node.jsv16.19.0
npmv8.19.3

创建新项目

使用 Wails CLI 创建一个名为 go-run-wechat-demo 的新项目:

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

项目结构

项目结构

  • main.goapp.go:Go 应用程序,处理业务逻辑、数据管理和与前端的通信。
  • frontend:包含前端的所有代码,使用 React、Vue 或你选择的任何其他框架,负责用户界面和与用户的交互。
  • go.modgo.sum:Go 的模块依赖文件。
  • wails.json:Wails 项目的配置文件,定义了如何构建和打包应用。
  • build:用于存放构建后的应用程序和相关资源。

项目开发:仿微信登录界面

进入开发模式

进入项目根目录,输入并执行 wails dev 命令,首次执行会安装前后端依赖,执行成功后可以看到默认应用页面。

默认应用页面

并且可以在浏览器调试页面:

To develop in the browser and call your bound Go methods from Javascript, navigate to: http://localhost:34115

任何代码修改也都能够热更新:

1:42:21 PM [vite] hmr update /src/App.tsx

修改代码

窗口样式和布局

为了模仿微信登录界面,在 main.go 文件中,通过 Wails 框架的配置选项修改了应用程序窗口的尺寸 Width&Height、背景色 BackgroundColour 和标题 Title

main.go

func main() {// 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,},})if err != nil {println("Error:", err.Error())}
}
后端实现

本次 Demo 主要实现两个功能,登录和切换账号;这两个方法可以通过前端 JavaScript 调用。返回的字符串可以用于在 UI 中显示相应的状态消息给用户。在文件 app.go 中添加这两个方法。

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

在 Wails 开发模式下,会自动将 Go 结构体转换为 TypeScript 模块。

// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDITexport function LogInSuccess(arg1:string):Promise<string>;export function SwitchAccountSuccess():Promise<string>;
前端实现

修改 frontend/src/App.tsx 文件,添加相关逻辑:

import {useState} from "react";
import logo from "./assets/images/logo-universal-w256.jpg";
import "./App.css";
import {LogInSuccess, SwitchAccountSuccess} from "../wailsjs/go/main/App";function App() {const [resultText, setResultText] = useState("");const name = "除";const updateResultText = (result: string) => setResultText(result);function logIn() {LogInSuccess(name).then(updateResultText);}function switchAccount() {SwitchAccountSuccess().then(updateResultText);}return (<div id="App"><img src={logo} id="logo" alt="logo"/><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

并且修改了 CSS 样式文件 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:

Log In

尝试操作 Switch Account:

Switch Account

底部图标:

底部图标

打包应用

在项目根目录,运行 wails build 即可打包当前环境下的应用程序。但是在开发模式下,已经有了一些缓存文件,可以配合 -clean 来清理 build/bin 目录:

wails build -clean

打包 macOS App:

wails build -platform=darwin/amd64

打包 Windows 程序:

wails build -platform=windows/amd64

打包

使用 create-dmg 为 macOS 创建 .dmg 文件:

create-dmg WeChat.dmg WeChat.app

macOS

以上文件可以进入 Releases 页面查看:

https://github.com/mazeyqian/go-run-wechat-demo/releases/tag/v1.0.0

Releases

总结

Wails 框架提供了一种简洁而强大的方式,让开发者能够利用 Go 的性能优势和 Web 前端的灵活性,从而能够使用更高效、更轻量级的方法来构建跨平台的桌面应用。

版权声明

本博客所有的原创文章,作者皆保留版权。转载必须包含本声明,保持本文完整,并以超链接形式注明作者后除和本文原始地址:https://blog.mazey.net/4499.html

(完)

相关文章:

Go 实战|使用 Wails 构建轻量级的桌面应用:仿微信登录界面 Demo

概述 本文探讨 Wails 框架的使用&#xff0c;从搭建环境到开发&#xff0c;再到最终的构建打包&#xff0c;本项目源码 GitHub 地址&#xff1a;https://github.com/mazeyqian/go-run-wechat-demo 前言 Wails 是一个跨平台桌面应用开发框架&#xff0c;他允许开发者利用 Go …...

c++取经之路(其五)——类和对象拷贝构造函数

概念&#xff1a;拷贝构造函数&#xff0c;只有单个形参&#xff0c;该形参是对本类类型对象的引用(一般常用const修饰)&#xff0c;在用已存在的类类型对象创建新对象时由编译器自动调用。 特征&#xff1a; 1. 拷贝构造函数是构造函数的一个重载形式 如&#xff1a; 2. 拷贝…...

YOLOv8最新改进系列:融合最新顶会提出的HCANet网络中卷积和注意力融合模块(CAFM),有效提升小目标检测性能,大幅度拉升目标检测效果!遥遥领先!

YOLOv8最新改进系列&#xff1a;YOLOv8最新改进系列:融合最新顶会提出的HCANet网络中卷积和注意力融合模块(CAFM)&#xff0c;有效提升小目标检测性能&#xff0c;大幅度拉升目标检测效果&#xff01;遥遥领先&#xff01; B站全文戳这里&#xff01; 详细的改进教程以及源码…...

【计算机毕业设计】网上宠物商店管理系统——后附源码

&#x1f389;**欢迎来到我的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 一名来自世界500强的资深程序媛&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于…...

详解Qt添加外部库

在Qt项目中添加外部库是一项常见任务&#xff0c;无论是静态库还是动态库都需要正确的配置才能让项目顺利编译链接。以下是详细步骤和不同场景下的配置方法&#xff1a; 方法一&#xff1a;手动编辑.pro文件 添加头文件路径&#xff1a; 在Qt项目中的.pro文件中使用INCLUDEPAT…...

深入理解JVM垃圾收集器

相关系列 深入理解JVM垃圾收集算法-CSDN博客 目前市面常见的垃圾收集器有Serial、ParNew、Parallel、CMS、Serial Old、Parallel Old、G1、ZGC以及有二种不常见的Epsilon、Shenandoah的&#xff0c;从上图可以看到有连线的的垃圾收集器是可以组合使用&#xff0c;是年轻代老年代…...

macU盘在电脑上读不出来 u盘mac读不出来怎么办 macu盘不能写入 Tuxera NTFS for Mac免费下载

对于Mac用户来说&#xff0c;使用U盘是很常见的操作&#xff0c;但有时候可能会遇到Mac电脑无法读取U盘的情况&#xff0c;这时候就需要使用一些特定的工具软件来帮助我们解决问题。本文就来告诉大家macU盘在电脑上读不出来是怎么回事&#xff0c;u盘mac读不出来怎么办。 一、m…...

448.找到所有数组中消失的数字(原地修改)

给你一个含 n 个整数的数组 nums &#xff0c;其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字&#xff0c;并以数组的形式返回结果。 示例 1&#xff1a; 输入&#xff1a;nums [4,3,2,7,8,2,3,1] 输出&#xff1a;[5,6] 原地修改 …...

Redis学习从入门到掌握(基础篇)

文章目录 一、初识Redis1.认识 Redis2.Redis常见命令&#xff08;1&#xff09;Redis 数据结构介绍&#xff08;2&#xff09;Redis 通用命令&#xff08;3&#xff09;String 类型&#xff08;4&#xff09;String 类型的常见命令&#xff08;5&#xff09;Hash 类型&#xff…...

redis主从复制、哨兵

目录 1. 主从复制 特点&#xff1a; 工作原理&#xff1a; 配置&#xff1a; 2. 哨兵 特点&#xff1a; 工作原理&#xff1a; 配置&#xff1a; ​编辑 1. 主从复制 特点&#xff1a; 主从复制是 Redis 最基本的高可用性方案。主节点&#xff08;Master&#xff09…...

uniapp登录拦截白名单使用

1、创建uni.promisify.adaptor.js文件 // 根目录新建 uni.promisify.adaptor.js // 路由白名单 const list [/, /pages/stroke/stroke]; //创建路由拦截&#xff0c;这里只判断一般跳转 uni.addInterceptor(switchTab, {invoke(res) {console.log(res);//存在token就跳转if (…...

力扣45. 跳跃游戏 II

Problem: 45. 跳跃游戏 II 文章目录 题目描述思路复杂度Code 题目描述 思路 1.获取数组的长度len&#xff0c;定义int类型变量end用于标记每次在当前可以跳到的最远距离&#xff0c;farthest用于记录每次可以跳跃到的最远距离&#xff0c;jumps用于记录最小的跳跃次数&#xff…...

MXNet安装:专业指南与深度解析

一、引言 MXNet是一个高效且灵活的深度学习框架&#xff0c;它支持多种编程语言和平台&#xff0c;并提供了丰富的深度学习算法和工具。随着深度学习技术的广泛应用&#xff0c;MXNet因其出色的性能和易用性受到了越来越多开发者和研究人员的青睐。本文将详细介绍MXNet的安装过…...

C++函数模板案例--数组封装

目录 一、数组封装的需求 案例描述: 二、实操 创建.hpp文件&#xff0c;编写数组类。 浅拷贝危害 拷贝构造函数 “”重载 尾插法 尾删法 “[]"重载 返回数组容量、大小 完整代码 编写.cpp文件&#xff0c;对自定义数组进行测试。 打印数组函数 test01测试函数…...

传统文字检测方法+代码实现

文章目录 前言传统文字检测方法1、基于最大稳定极值区域&#xff08;MSER&#xff09;的文字检测1.1 MSER&#xff08;MSER-Maximally Stable Extremal Regions&#xff09;基本原理代码实现——使用Opencv中的cv2.MSER_create()接口 2、基于笔画宽度变换&#xff08;Stroke Wi…...

Jmeter从数据为查找结果集数据方法随笔

一、Jmeter连接数据库 1.下载对应数据库的驱动包到jmeter安装目录的lib下ext文件中&#xff0c;并导入到jmeter的测试计划中&#xff0c;本实例中使用的是mysql如下所示&#xff1a; 点击测试计划–>点击浏览–>选中mysql驱动jar包–>打开 2.添加线程组&#xff0c;…...

Objective-C网络请求开发的高效实现方法与技巧

前言 在移动应用开发中&#xff0c;网络请求是一项至关重要的技术。Objective-C作为iOS平台的主要开发语言之一&#xff0c;拥有丰富的网络请求开发工具和技术。本文将介绍如何利用Objective-C语言实现高效的网络请求&#xff0c;以及一些实用的技巧和方法。 1.Objective-C技…...

Java:OOP之术语或概念

■■ 编程和程序设计 ■□ 程序员和编程■ 程序员&#xff1a;programmer■ 编程&#xff1a;program, programming■ 面向过程&#xff1a;Process oriented■ 面向对象&#xff1a;object-oriented● 面向对象分析&#xff1a;OOA&#xff0c;全称Object-oriented Analysis●…...

内存地产风云录:malloc、free、calloc、realloc演绎动态内存世界的楼盘开发与交易大戏

欢迎来到白刘的领域 Miracle_86.-CSDN博客 系列专栏 C语言知识 先赞后看&#xff0c;已成习惯 创作不易&#xff0c;多多支持&#xff01; 在这个波澜壮阔的内存地产世界中&#xff0c;malloc、free、calloc和realloc四位主角&#xff0c;共同演绎着一场场精彩绝伦的楼盘开…...

个人博客项目笔记_05

1. ThreadLocal内存泄漏 ThreadLocal 内存泄漏是指由于没有及时清理 ThreadLocal 实例所存储的数据&#xff0c;导致这些数据在线程池或长时间运行的应用中累积过多&#xff0c;最终导致内存占用过高的情况。 内存泄漏通常发生在以下情况下&#xff1a; 线程池场景下的 ThreadL…...

基础知识点全覆盖(1)

Python基础知识点 1.基本语句 1.注释 方便阅读和调试代码注释的方法有行注释和块注释 1.行注释 行注释以 **# **开头 # 这是单行注释2.块注释 块注释以多个 #、三单引号或三双引号(注意: 基于英文输入状态下的标点符号) # 类 # 似 # 于 # 多 # 行 # 效 # 果 这就是多行注释…...

异常处理java

在Java中&#xff0c;异常处理可以使用"throws"关键字或者"try-catch"语句。这两种方法有不同的用途和适用场景。 "throws"关键字: 在方法声明中使用"throws"关键字&#xff0c;表示该方法可能会抛出异常&#xff0c;但是并不立即处理…...

个人博客项目_09

1. 归档文章列表 1.1 接口说明 接口url&#xff1a;/articles 请求方式&#xff1a;POST 请求参数&#xff1a; 参数名称参数类型说明yearstring年monthstring月 返回数据&#xff1a; {"success": true, "code": 200, "msg": "succ…...

【2024年MathorCup数模竞赛】C题赛题与解题思路

2024年MathorCup数模竞赛C题 题目 物流网络分拣中心货量预测及人员排班背景求解问题 解题思路问题一问题二问题三问题四 本次竞赛的C题是对物流网络分拣中心的货量预测及人员排班问题进行规划。整个问题可以分为两个部分&#xff0c;一是对时间序列进行预测&#xff0c;二是对人…...

蓝桥杯省赛冲刺(3)广度优先搜索

广度优先搜索&#xff08;Breadth-First Search, BFS&#xff09;是一种在图或树等非线性数据结构中遍历节点的算法&#xff0c;它从起始节点开始&#xff0c;按层级逐步向外扩展&#xff0c;即先访问离起始节点最近的节点&#xff0c;再访问这些节点的邻居&#xff0c;然后是邻…...

网页内容生成图片,这18般武艺你会几种呢?

前言 关于【SSD系列】&#xff1a; 前端一些有意思的内容&#xff0c;旨在3-10分钟里&#xff0c; 500-1000字&#xff0c;有所获&#xff0c;又不为所累。 网页截图&#xff0c;windows内置了快捷命令和软件&#xff0c;chrome开发者工具也能一键截图&#xff0c;html2canva…...

pytest的时候输出一个F后面跟很多绿色的点解读

使用pytest来测试pyramid和kotti项目&#xff0c;在kotti项目测试的时候&#xff0c;输出一个F后面跟很多绿色的点&#xff0c;是什么意思呢&#xff1f; 原来在使用pytest进行测试时&#xff0c;输出中的“F”代表一个失败的测试&#xff08;Failed&#xff09;&#xff0c;而…...

算法打卡day33

今日任务&#xff1a; 1&#xff09;509. 斐波那契数 2&#xff09;70. 爬楼梯 3&#xff09;746.使用最小花费爬楼梯 509. 斐波那契数 题目链接&#xff1a;509. 斐波那契数 - 力扣&#xff08;LeetCode&#xff09; 斐波那契数&#xff0c;通常用 F(n) 表示&#xff0c;形成…...

《疯狂java讲义》Java AWT图形化编程中文显示

《疯狂java讲义》第六版第十一章AWT中文没有办法显示问题解决 VM Options设置为-Dfile.encodinggbk 需要增加变量 或者这边直接设置gbk 此外如果用swing 就不会产生这个问题了。...

Python3 标准库,API文档链接

一、标准库 即当你安装python3 后就自己携带的一些已经提供好的工具模块&#xff0c;工具类&#xff0c;可以专门用来某一类相关问题&#xff0c;达到辅助日常工作或者个人想法的一些成品库 类似的 C ,Java 等等也都有自己的标准库和使用文档 常见的一些&#xff1a; os 模块…...