Golang|Golang wails2 跨端桌面解决方案

wails2 Golang github: https://github.com/wailsapp/w...
文档: https://wails.io/zh-Hans/docs...
环境要求

WindowsMacOSLinux

安装

# Go 1.17 下 安装
go install github.com/wailsapp/wails/cmd/wails@latest# Go 1.16 
$ go get -u github.com/wailsapp/wails/cmd/wails

输入命令，有如下结果就是安装成功了

$ wails update
Wails v1.16.9 - Checking for updates...> Checking for updates...Current Version : v1.16.9
Latest Release : v1.16.9
Looks like you're up to date!

初始化个人信息

$ wails setup
 ____ __
| |/ /___ _(_) /____
| | /| / / __ `/ / / ___/
| |/ |/ / /_/ / / (__)v1.16.9
|__/|__/\__,_/_/_/____/https://wails.app
The lightweight framework for web-like appsWelcome to Wails!## 输入开发者姓名 以及 邮箱
What is your name (xiaobaiyaoshengfa):
What is your email address (xiaobaiyaoshengfa@sifou): xiaobaiyaoshengfa@sifouWails config saved to: C:\Users\xxx\.wails\wails.json
Feel free to customise these settings.## 检查当前运行的系统环境，以及依赖的命令行工具是否可用。
Detected Platform: Windows
Checking for prerequisites...
Program 'gcc' found: C:\Program Files\mingw-w64\x86_64-7.3.0-release-posix-seh-rt_v5-rev0\mingw64\bin\gcc.exe
Program 'npm' found: C:\nodejs\npm.cmdReady for take off!
Create your first project by running 'wails init'.

Hello World 初始化项目

$ wails init
Wails v1.16.9 - Initialising projectThe name of the project (My Project): Hello
Project Name: Hello
The output binary name (hello): hello
Output binary Name: hello
Project directory name (hello):
Project Directory: hello
Please select a template (* means unsupported on current platform):
1: Angular - Angular 8 template (Requires node 10.8+)
2: React JS - Create React App v4 template
3: Svelte - A basic Svelte template
4: Vanilla - A Vanilla HTML/JS template
5: * Vue3 Full - Vue 3, Vuex, Vue-router, and Webpack4
6: * Vue3 JS - A template based on Vue 3, Vue-router, Vuex, and Webpack5
7: Vue2/Webpack Basic - A basic Vue2/WebPack4 template
8: Vuetify1.5/Webpack Basic - A basic Vuetify1.5/Webpack4 template
9: Vuetify2/Webpack Basic - A basic Vuetify2/Webpack4 template## 这里提供了9个前端模板，比如常见的有 Angular， React，Vue 等，这里我选择了熟悉的 React
Please choose an option [1]: 2
Template: React JS
> Generating project...## 当前目录下生成一个 hello 文件夹，实际的wails 项目将就在里面。 
Project 'Hello' initialised. Run `wails build` to build it.

项目目录结构

$ tree -L 2 ./hello/
./hello/
├── appicon.png
├── build
│└── hello.exe
├── frontend
│├── build
│├── node_modules
│├── package.json
│├── package.json.md5
│├── package-lock.json
│├── public
│├── README.md
│└── src
├── go.mod
├── go.sum
├── hello.exe.manifest
├── hello.ico
├── hello.rc
├── hello-res.syso
├── main.go
└── project.json6 directories, 14 files

这里

frontend

就是前端项目的目录，

./frontend/build

文件夹保存了

npm

编译后的成果。而

wails

是怎样将其引入到代码中的呢？
打开文件

./main.go

package mainimport (
_ "embed"
"github.com/wailsapp/wails"
)func basic() string {
return "World!"
}//go:embed frontend/build/static/js/main.js
var js string//go:embed frontend/build/static/css/main.css
var css stringfunc main() {app := wails.CreateApp(&wails.AppConfig{
Width:1024,
Height: 768,
Title:"Hello",
JS:js,
CSS:css,
Colour: "#131313",
})
app.Bind(basic)
app.Run()
}

从

main.go

文件中可以看到

//go:embed

这两句代码，这用到了

go 1.16

开始官方提供的

embed

新特性，通过这两个指令将 js，css 文件里的代码赋值给

js

，

css

两个字符串变量。

wails1.16//go:embed

构建项目

## 这里需要进入 wails 项目
$ cd ./hello## 项目内进行构建
$ wails build
Wails v1.16.9 - Building Application> Skipped frontend dependencies (-f to force rebuild)
> Building frontend...
> Ensuring Dependencies are up to date...
> Packing + Compiling project...
*** Please note: Windows builds use mshtml which is only compatible with IE11. For more information, please read https://wails.app/guides/windows/ ***
Awesome! Project 'Hello' built!

运行项目

$ ./build/hello.exe

windows 下会看到如下结果：

Golang|Golang wails2 跨端桌面解决方案

文章图片

wails 技术分析 IE11
在

wails build

时，我们就能看见，提示语： IE11，也就是

web-viewer

在

windows

平台是基于

IE11

，而在 2021年8月17日，微软就宣布

Office 365

不再考虑在

IE11

上的兼容性问题，并且过滤用户过度到

Edge

，但

Edge

不是默认安装。所以

wails

调用

IE11

渲染了web。
至于

React

，

Vue

，

Angular

对

IE11

的兼容性策略，咋们避开不谈。

Internet Explorer 11 的支持

可执行文件
好，我们再来看看编译文件，才

8MB

, 这相比动辄

70MB

, 上百兆的

Electron

确实是好太多。我想大家用这个方案就是冲这个来的吧。

Golang|Golang wails2 跨端桌面解决方案

文章图片

总结总的来说，

wails2

完善了

go

基于

web-view

跨平台桌面程序解决方案。其中，能够使用web前端带来的便利的同时，还能让编译成果尽可能小，这是它最大的亮点。如果你做的东西比较简单，不接依页面的兼容性问题，那么它不失为一个不错的跨端桌面程序解决方案。
常见问题

windowssetupgcc

Detected Platform: Windows
Checking for prerequisites...
Error: Program 'gcc' not found. Please install gcc from here and try again: http://tdm-gcc.tdragon.net/download. You will need to add the bin directory to your path, EG: C:\TDM-GCC-64\bin\
Program 'npm' found: C:\nodejs\npm.cmd

这里wails检查到了操作系统是

Windows

，没有检查到

gcc

，这里需要通过

mingw

安装下

gcc

，并配置到

windows

的

path

环境变量。

package embed is not in GOROOT

C:\Users\xxx\go\pkg\mod\github.com\wailsapp\wails@v1.16.9\runtime\assets.go:3:8: package embed is not in GOROOT (C:\Users\xxx\.g\go\src\embed)

这是因为你使用的Golang 版本过低导致的，升级到

Go 1.16

就能解决。

missing go.sum entry for module providing package golang.org/x/text/transform

C:\Users\xxx\go\pkg\mod\github.com\wailsapp\wails@v1.16.9\runtime\window.go:13:2: missing go.sum entry for module providing package golang.org/x/text/transform (imported by github.com/wailsapp/wails/runtime);
 to add:
go get github.com/wailsapp/wails/runtime@v1.16.9

【Golang|Golang wails2 跨端桌面解决方案】升级到

Go 1.17

可解决，具体原因我也不清楚，有会的大佬告诉我一下。
参考

https://mp.weixin.qq.com/s/nL...