Golang waits2 cross-end desktop solution

wails2 Golang

github: https://github.com/wailsapp/wails

Documentation: https://wails.io/zh-Hans/docs/reference/options

Environmental requirements

• Go 1.16
• npm
• It must be one of Windows , MacOS , Linux operating systems
• gcc

Install

# Go 1.17 下 安装
go install github.com/wailsapp/wails/cmd/wails@latest

# Go 1.16 
$ go get -u github.com/wailsapp/wails/cmd/wails

Enter the command, the following result is that the installation is successful

$ 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!

Initialize personal information

$ wails setup
 _       __      _ __
| |     / /___ _(_) /____
| | /| / / __ `/ / / ___/
| |/ |/ / /_/ / / (__  )  v1.16.9
|__/|__/\__,_/_/_/____/   https://wails.app
The lightweight framework for web-like apps

Welcome to Wails!

## 输入开发者姓名 以及 邮箱
What is your name (xiaobaiyaoshengfa):
What is your email address (xiaobaiyaoshengfa@sifou): xiaobaiyaoshengfa@sifou

Wails 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.cmd

Ready for take off!
Create your first project by running 'wails init'.

Hello World

Initialize the project

$ wails init
Wails v1.16.9 - Initialising project

The 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.

Project directory structure

$ 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.json

6 directories, 14 files

Here frontend is the directory of the front-end project, and the ./frontend/build folder saves the compiled results npm And wails introduce it into the code?

Open file ./main.go

package main

import (
  _ "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 string

func main() {

  app := wails.CreateApp(&wails.AppConfig{
    Width:  1024,
    Height: 768,
    Title:  "Hello",
    JS:     js,
    CSS:    css,
    Colour: "#131313",
  })
  app.Bind(basic)
  app.Run()
}

From main.go file can be seen //go:embed these two code, which uses go 1.16 begin to official embed new features, these two commands will js, css file code assigned to js , css two string variables.

Therefore, wails the minimum version of go to be 1.16 .

//go:embed instruction can package static resource files into the compiled program during the compilation phase, and provide the ability to access these files.

Build the project

## 这里需要进入 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!

run the project

$ ./build/hello.exe

Under windows, you will see the following results:

Wails Technical Analysis

IE11

In wails build , we can see, the prompt: IE11 , is web-viewer in windows platform is based on IE11 , and in the August 17, 2021, Microsoft announced Office 365 no longer considered IE11 compatibility problems, And filter users over to Edge , but Edge is not installed by default. So wails calls IE11 render the web.

As for the compatibility strategy of React , Vue , Angular to IE11

Internet Explorer 11 support

executable file

Well, let's take a look at the compiled file again, only 8MB , which is much better than the 70MB , the hundreds of megabytes of Electron . I think everyone uses this plan to rush to this.

Summarize

Overall, wails2 completes the go cross-platform desktop program solution based on web-view Among them, the ability to use the convenience brought by the web front-end while making the compilation results as small as possible is its biggest highlight. If what you do is relatively simple and does not depend on page compatibility issues, then it is a good cross-terminal desktop program solution.

common problem

• Under windows platform, setup report gcc cannot be found

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

Here wails check to the operating system is Windows , did not check to gcc , where required by mingw installation gcc , and configured to windows of path environment variable.

• 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)

This is because the Golang version you are using is too low, and Go 1.16 can be solved by upgrading to 061ed121cdcaf3.

• 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

Upgrading to Go 1.17 can solve it. I don't know the specific reason. Someone who will tell me.

refer to

• https://mp.weixin.qq.com/s/nLXQThjmL61VLZtuurilKw