Go跨平台Wails框架入门教程

news2024/9/20 1:12:02

前言

Go跨平台Wails UI应用框架是一个强大的工具，它允许开发者利用Go语言的性能优势和Web技术的灵活性来构建跨平台的桌面应用程序。以下是一个详细的Wails应用框架应用教程及相关示例的概述。

一、Wails简介

Wails是一个开源项目，旨在让开发者能够使用Go和Web技术（如React、Vue等）来构建桌面应用。它提供了一种轻量级且高效的解决方案，相比传统的Electron框架，Wails构建的应用具有更小的体积和更快的启动速度。
在这里插入图片描述

二、开发环境准备

  1. 安装Go：确保你的系统上安装了Go语言环境。可以从Go官网下载并安装。
  2. 安装Wails CLI：通过运行go install github.com/wailsapp/wails/v2/cmd/wails@latest命令来安装Wails的命令行工具。
  3. 安装Node.js和npm：Wails项目通常包含前端代码，因此需要Node.js和npm来管理前端依赖。
  4. 安装其他依赖：根据Wails的官方文档，你可能还需要安装一些系统级的依赖，如libwebkit2gtk-4.0-dev（Linux）或webview2（Windows）。

三、创建新项目

使用Wails CLI创建一个新项目非常简单。只需在命令行中运行类似以下命令（以Vue为例）：

wails init -n my-wails-project -t vue

这个命令会创建一个名为my-wails-project的新项目，并配置Vue作为前端框架。

四、项目结构

Wails项目的典型结构包括：

  • main.go 和 app.go：包含Go代码，处理业务逻辑、数据管理和与前端的通信。
  • frontend 文件夹：包含前端的所有代码，如Vue或React组件。
  • go.mod 和 go.sum：Go的模块依赖文件。
  • wails.json：Wails项目的配置文件，定义了如何构建和打包应用。
  • build 文件夹：用于存放构建后的应用程序和相关资源。

五、开发流程

  1. 编写Go代码：在main.go和app.go等Go文件中编写后端逻辑，如API接口、数据库操作等。
  2. 编写前端代码：在frontend文件夹中，使用Vue或React等框架编写前端页面和组件。
  3. 绑定Go和前端：通过Wails的绑定机制，可以在前端JavaScript中直接调用Go函数，实现前后端的无缝通信。
  4. 运行和调试：使用wails dev命令启动开发服务器，并在浏览器中打开前端页面进行调试。
  5. 构建和打包：使用wails build命令构建并打包应用，生成可在不同平台上运行的可执行文件。

六、示例

以下是一个简单的示例，展示如何使用Wails构建一个简单的桌面应用：

  1. 创建项目：按照前面的步骤创建一个新项目。

  2. 编写Go代码：在app.go中添加一个简单的Go函数，例如一个返回问候语的函数。

    package main

import (
    "fmt"
)

// App 结构体
type App struct{}

// Greet 方法
func (a *App) Greet(name string) string {
    return fmt.Sprintf("Hello, %s!", name)
}

  3. 编写前端代码：在Vue组件中，调用这个Go函数并显示结果。

    <template>
  <div>
    <h1>{{ greeting }}</h1>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Greet } from '../wailsjs/main/App'; // 假设Wails已自动生成TypeScript定义

export default {
  setup() {
    const greeting = ref('');

    const greet = async () => {
      const response = await Greet('World');
      greeting.value = response;
    };

    return { greeting, greet };
  },
};
</script>

请注意，上述Vue代码中的Greet函数是从Wails自动生成的TypeScript定义中导入的，这取决于你的Wails版本和配置。

  1. 运行和测试：使用wails dev命令启动开发服务器，并在浏览器中查看应用。

其他示例

当然，我可以继续给出更多关于Wails框架的示例，以帮助您更好地理解其用法和功能。以下是一些额外的示例，涵盖了不同的应用场景和功能：

示例一：构建一个简单的待办事项应用

1. 后端Go代码（app.go）

package main

import (
	"fmt"
	"sync"
)

// Task 表示一个待办事项
type Task struct {
	ID    int
	Title string
	Done  bool
}

// App 结构体包含待办事项列表和同步锁
type App struct {
	Tasks []Task
	mu    sync.Mutex
}

// AddTask 方法添加新的待办事项
func (a *App) AddTask(title string) {
	a.mu.Lock()
	defer a.mu.Unlock()
	a.Tasks = append(a.Tasks, Task{ID: len(a.Tasks) + 1, Title: title, Done: false})
}

// ToggleTask 方法切换待办事项的完成状态
func (a *App) ToggleTask(id int) {
	a.mu.Lock()
	defer a.mu.Unlock()
	for _, task := range a.Tasks {
		if task.ID == id {
			task.Done = !task.Done
			break
		}
	}
}

// GetTasks 方法返回所有待办事项
func (a *App) GetTasks() []Task {
	a.mu.Lock()
	defer a.mu.Unlock()
	tasksCopy := make([]Task, len(a.Tasks))
	copy(tasksCopy, a.Tasks)
	return tasksCopy
}

2. 前端Vue代码（示例组件）

在Vue组件中，您可以调用上述Go方法，并展示待办事项列表。这里只给出Vue组件的模板部分，具体实现需要根据您的项目结构进行调整。

<template>
  <div>
    <input v-model="newTaskTitle" @keyup.enter="addTask" placeholder="Add new task" />
    <button @click="addTask">Add</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="task.ID">
        <input type="checkbox" :checked="task.Done" @change="toggleTask(index)" />
        {{ task.Title }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import { AddTask, ToggleTask, GetTasks } from '../wailsjs/main/App'; // 假设Wails已自动生成TypeScript定义

export default {
  setup() {
    const newTaskTitle = ref('');
    const tasks = ref([]);

    const fetchTasks = async () => {
      tasks.value = await GetTasks();
    };

    const addTask = async () => {
      if (newTaskTitle.value.trim() !== '') {
        await AddTask(newTaskTitle.value);
        newTaskTitle.value = '';
        await fetchTasks();
      }
    };

    const toggleTask = async (index) => {
      const taskID = tasks.value[index].ID;
      await ToggleTask(taskID);
      await fetchTasks();
    };

    onMounted(() => {
      fetchTasks();
    });

    return { newTaskTitle, tasks, addTask, toggleTask };
  },
};
</script>

注意：上面的Vue代码示例使用了Vue 3的Composition API，并且假设AddTask、ToggleTask和GetTasks方法已经被Wails自动生成的TypeScript定义所导出。在实际项目中，您需要根据Wails的实际输出进行调整。

示例二：使用Wails构建带有原生菜单的应用

Wails支持创建带有原生菜单的桌面应用。这可以通过在main.go中配置菜单项并在运行时显示它们来实现。

1. 配置菜单（main.go）

package main

import (
	"github.com/wailsapp/wails"
	"github.com/wailsapp/wails/lib/menu"
)

func buildMenu() *menu.Menu {
	menuItems := []*menu.MenuItem{
		{
			Label:     "File",
			SubMenu: []*menu.MenuItem{
				{Label: "Quit", Action: func() { /* 实现退出逻辑 */ }},
			},
		},
		{
			Label:     "Edit",
			SubMenu: []*menu.MenuItem{
				{Label: "Preferences", Action: func() { /* 实现首选项窗口 */ }},
			},
		},
	}
	return menu.NewMenu("MyApp", menuItems)
}

func main() {
	// ... 初始化Wails应用 ...

	app := wails.CreateApp()
	menu := buildMenu()
	app.Menus.Main = menu

	// ... 其余的应用初始化代码 ...
}

注意：上面的代码示例是一个简化的版本，用于说明如何在Wails中配置菜单。在实际应用中，您需要根据您的应用需求来定义菜单项和它们的动作。

七、总结

Wails框架为Go开发者提供了一个强大且灵活的平台，用于构建跨平台的桌面应用。通过结合Go的性能和Web技术的易用性，开发者可以轻松地创建出功能丰富、用户体验优秀的桌面应用。上述示例展示了Wails在不同场景下的应用，包括待办事项管理和原生菜单的创建。希望这些示例能够帮助您更好地理解和使用Wails框架。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2125777.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2024.9 学习笔记

2024.9 学习笔记

9.10 1.大地坐标系 大地坐标系&#xff08;Geodetic Coordinate System&#xff09;: 定义: 基于地球表面&#xff0c;通常使用经度、纬度和高度来描述位置。也可以称为东北天&#xff08;XYZ轴&#xff09;用途: 常用于地图制作、地理信息系统&#xff08;GIS&#xff09;和…
阅读更多...
基于 NIM 建构多模态 AI-Agent （代码解析）

基于 NIM 建构多模态 AI-Agent （代码解析）

本次课程将着重介绍一下内容: 多模态模型基于 NIM 的调用方式基于 NIM 接口实现 Phi-3-Vision 的推理实践基于 Gradio 框架建立前端互动界面 申请NIM的API Key&#xff0c;来调用NIM的计算资源 进入NVIDIA NIM | phi-3-vision-128k-instruct, 点击Get API Key按钮&#xff0…
阅读更多...
SpringBootWeb案例（续）

SpringBootWeb案例（续）

书接上回&#xff0c;上篇文章CSDN 复习了部门管理功能的开发。这篇文章来复习员工管理模块功能开发 基于以上页面原型&#xff0c;我们可以把员工管理功能分为&#xff1a; 分页查询&#xff08;重点&#xff09; 带条件的分页查询&#xff08;重点&#xff09; 删除员工 新…
阅读更多...
泰语快速学习方法！速成方法学习！

泰语快速学习方法！速成方法学习！

要快速学习泰语&#xff0c;可以采取多种策略&#xff0c;如掌握基础语法和词汇&#xff0c;专注于发音练习以掌握泰语特有的音调系统&#xff0c;利用语言学习软件进行互动学习&#xff0c;通过观看泰语媒体内容提高听力理解&#xff0c;与母语者进行语言交换来锻炼口语&#…
阅读更多...
GDB 查看汇编

GDB 查看汇编

查看汇编 x disassemble
阅读更多...
MySQL 按照条件（分组）只取一个形成列表 group max

MySQL 按照条件（分组）只取一个形成列表 group max

方法一、通过Max形成where条件 SELECTt1.* FROMbiz_customer_hold AS t1 WHEREt1.ch_create_time ( SELECT MAX( ch_create_time ) FROM biz_customer_hold AS t2 WHERE t2.ch_cust_no t1.ch_cust_no ) ORDER BYt1.ch_create_time DESC,t1.ch_hold_time DESC 方法二、通…
阅读更多...
部署TC服务 服务集成Seata

部署TC服务 服务集成Seata

一、部署TC服务 tc在管理全局事务和分支事务是需要记录&#xff0c;最好放在数据库中持久保存 1.创建数据库表 创建一个名为Seata的库建立四张表 语句如下 CREATE DATABASE IF NOT EXISTS seata; USE seata;CREATE TABLE IF NOT EXISTS global_table (xid …
阅读更多...
【PGCCC】Postgres 17 中的 3 大特性

【PGCCC】Postgres 17 中的 3 大特性

一年又一年&#xff0c;Postgres 已成为世界上最受喜爱和最受信任的数据库 — Postgres 17将变得更好。即将发布的版本在开发人员体验和性能方面都有所改进。 Postgres 17 中的 3 大特性 #01 具有 RETURNING 支持的 MERGE 命令 它可以帮助需要处理条件数据修改而无需处理多…
阅读更多...
CMU 10423 Generative AI：HW1（理论部分）

CMU 10423 Generative AI：HW1（理论部分）

备注&#xff1a;S24版GitHub上有某CMU学生分享了自己的全套理论编程作业&#xff0c;以下内容的整理结合了我自己的理解查阅、GPT4的解答、以及CMU学生的答案。 文章目录 0 作业概述1 RNN语言模型1.1 问题1&#xff1a;Elman&#xff08;即RNN&#xff09; 网络模型条件输出问…
阅读更多...
IDEAJ真正修改maven(.m2)在Windows环境下缓存路径

IDEAJ真正修改maven(.m2)在Windows环境下缓存路径

IDEAJ真正修改maven(.m2)缓存路径的方法 下面这种方式虽然当前项目生效了&#xff0c;IntelliJ IDEA修改默认.m2和.gradle缓存路径-CSDN博客文章浏览阅读251次&#xff0c;点赞4次&#xff0c;收藏8次。文章浏览阅读1.3k次。1&#xff0c;File -ProjectStructure - Artifacts &…
阅读更多...
RISC-V （十二）系统调用

RISC-V （十二）系统调用

系统模式&#xff1a;用户态和内核态 当前的代码都是实现在machine模式下。 系统模式的切换 epc寄存器的值存放的是ecall指本身的地址 。 用ecall指令 系统调用的执行流程 mret这条指令会利用status的mpp值恢复到之前的特权级别。 蓝色的线表示涉及到权限切换。 系统调用的传…
阅读更多...
【VUE】pinia持久化存储

【VUE】pinia持久化存储

前言&#xff1a;状态持久化存储的意义在于它能够确保用户在与应用程序交互时&#xff0c;其操作状态、用户偏好、应用数据等关键信息在页面刷新、浏览器关闭或重新启动后依然得以保留&#xff0c;从而提供连贯、无缝的用户体验&#xff0c;避免因状态丢失导致的不便和重复操作…
阅读更多...
绑定域名解析怎么做？

绑定域名解析怎么做？

在当今数字化时代&#xff0c;拥有一个网站已经成为许多个人和企业展示自己、提供服务或进行商业活动的重要方式。而要让网站能够在互联网上被访问到&#xff0c;绑定域名解析是一个关键的步骤。 绑定域名解析究竟该怎么做呢&#xff1f; 一、了解域名解析的基本概念 域名解…
阅读更多...
【重要】MThings V0.7.1更新要点

【重要】MThings V0.7.1更新要点

下载地址http://gulink.cn/download 01. [新增]逻辑控制功能。 “逻辑控制”作为一项全新的商用版功能&#xff0c;通过使用直观的可视化积木搭建方法&#xff0c;为系统级数据处理提供了高度的可定制性。它能够简化复杂的数据计算、控制算法设计和仿真验证流程&#xff0c;同…
阅读更多...
探索未来住宿体验：酒店触摸开关的科技魅力

探索未来住宿体验：酒店触摸开关的科技魅力

在快节奏的现代生活中&#xff0c;人们对于旅行住宿的期待已远不止于基本的休息与安眠&#xff0c;而是更加注重个性化、便捷化与智能化。随着科技的飞速发展&#xff0c;酒店行业也迎来了前所未有的变革&#xff0c;其中&#xff0c;触摸开关作为智能客房的标志性元素&#xf…
阅读更多...
【网络安全】-xss跨站脚本攻击-pikachu

【网络安全】-xss跨站脚本攻击-pikachu

文章目录 前言 什么是xss跨站脚本攻击&#xff1f; 1&#xff0e;xss的分类&#xff1a; 1.1 反射型xss 1.2 存储型xss 1.3 Dom型xss&#xff1a; 2.同源策略&#xff1a; 2.1同源策略的定义 2.2同源策略的绕过 2.3 绕过同源策略的绕过 前言 什么是xss跨站脚本攻击&#xff1…
阅读更多...
两个月冲刺软考——重点理解传值方式与传引用方式的区别

两个月冲刺软考——重点理解传值方式与传引用方式的区别

1.总线的分类(按功能划分) 数据总线负责传输实际的数据。 地址总线用于指定数据的来源或目的地的内存地址。 控制总线传输控制信号&#xff0c;如读写指令和其他操作指令。 2.传值方式与传引用方式 传值方式&#xff1a;形参取的是实参的值&#xff0c;形参的改变不会导致调…
阅读更多...
开源数据集 FreiHAND rgb 三维手势建模 手部关键点 ＞＞ DataBall

开源数据集 FreiHAND rgb 三维手势建模 手部关键点 ＞＞ DataBall

开源数据集 FreiHAND rgb 三维手势建模 手部关键点 mano hand 混合现实 深度学习 人工智能 FreiHAND是一个用于评估和训练深度神经网络以从单色图像中估计手部姿态和形状的数据集&#xff0c;这是在我们的论文中提出的。其当前版本包含32560个独特的训练样本和3960个独特的评估…
阅读更多...
【JavaScript】LeetCode：26-30

【JavaScript】LeetCode：26-30

文章目录 26 矩阵置零27 螺旋矩阵28 旋转图像29 搜索二维矩阵Ⅱ30 相交链表 26 矩阵置零 2次双重for循环。第1次&#xff1a;将matrix[i][j]为0时的i、j分别存放于数组res_i、res_j&#xff0c;记录有哪些行、列应该置为0。第2次&#xff1a;将记录中的行、列置为0。 /**- par…
阅读更多...
揭秘蛇形机器人的主动SLAM算法和障碍物避让策略

揭秘蛇形机器人的主动SLAM算法和障碍物避让策略

更多优质内容&#xff0c;请关注公众号&#xff1a;智驾机器人技术前线 1.论文信息 论文标题&#xff1a;An active SLAM with multi-sensor fusion for snake robots based on deep reinforcement learning 作者&#xff1a;Xin Liu, Shuhuan Wen, Yaohua Hu, Fei Han, Hong…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023