wails Go+vue/angular/react编写桌面GUI客户端wails Go+vue/angular/react编写桌面GUI客户端安装wails构建项目项目结构运行程序框架的重点介绍

最近公司需要做一个上传工具，因为上传的文件可能好几个G，所以用传统的http上传是很不现实的，大家就想着做成客户端，但是要跨平台，所以就进行技术选型，当时大家最先想到的就是electron,但是electron打出来的包很大，因为他把一个浏览器内核也给打包进去了。后来就想起了用go写，因为go也是跨平台的，然后百度找了几个，都是文档不全，偶然看到一个框架叫wails，而且这个相对于其他的几个还有个文档，关键是目前几大js框架都支持，wails是使用系统本身的系统内核，mac/linux使用的是webkit，windows使用的是mshtml，目前就是ie内核，因为ie太落后目前好多不兼容，github上很多人提issure，作者后期考虑换用edge内核。下面是做完效果图

在这里插入图片描述

在这里插入图片描述

安装wails

首先你的安装好go的sdk

go get github.com/wailsapp/wails/cmd/wails

后续更新命令

wails init

在这里插入图片描述

在这里插入图片描述

如图所示，然后选择你要使用的js框架，我这里用的是vue，所以选择的是3

构建项目

用ide打开新建的go项目，我这里用的是goland

go mod download

默认使用的是go mod，所以要下载依赖，最好用代理，不然估计会超级慢，甚至会失败。 这是我的环境变量配置，goland也需要配置

GOROOT gosdk解压目录

GOPATH    存放代码和依赖库的地址，需要新建

GO111MODULE    auto 自动 on 使用mod off 不使用mod

GOPROXY    https://goproxy.io或者https://mirrors.aliyun.com/goproxy/ 下载依赖代理，速度快

在这里插入图片描述

在这里插入图片描述

项目结构

在这里插入图片描述

frontend是一个标准的前端项目结构，可以用webstorm打开，和平时开发没啥不一样

在这里插入图片描述

运行程序

wails serve //运行go项目，启动一个网桥，这样js可以直接调用go的代码
npm run serve  //这个要进入前端的项目，然后运行

然后浏览器访问http://localhost:8080

在这里插入图片描述

框架的重点介绍

js如何和go进行通信呢，wails提供了一个网桥，这个咱们不研究，我们只管如何使用

在这里插入图片描述

我们先定义个结构体，并需要来一个初始化的方法，然后在main.go中绑定结构体的方法。

在这里插入图片描述

js中的怎么调用呢

window.backend.UserBind.CheckLogin()
//UserBind就是初始化的结构体名称
//CheckLogin 就是结构体下的具体方法
//then中是结构体中返回的数据

在这里插入图片描述

选择文件，需要通过 *wails.Runtime 来调用。下面是我的一个案例。

在这里插入图片描述

js中调用选择文件的方法

在这里插入图片描述