Golang wails2 cross end desktop solution

Posted by La Parka on Sun, 23 Jan 2022 15:08:27 +0100

wails2 Golang

github: https://github.com/wailsapp/w...

file: https://wails.io/zh-Hans/docs...

Environmental requirements

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

install

# Go 1.17 lower installation
go install github.com/wailsapp/wails/cmd/wails@latest

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

Enter the command, and the 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!

## Enter the developer's name and email address
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.

## Check the currently running system environment and whether the dependent command-line tools are available.
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 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

## Nine front-end templates are provided here, such as Angular, React and Vue. Here I choose the familiar React
Please choose an option [1]: 2
Template: React JS
> Generating project...

## A hello folder will be generated under the current directory, and the actual wails project will be in it. 
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

Frontend here is the directory of front-end projects/ The frontend/build folder holds the compiled results of npm. How did wails introduce it into the code?

Open the 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 You can see the two sentences / / go: embedded in the go file, which uses the new embedded feature officially provided by go 1.16. Through these two instructions, you can assign the code in js and css files to js and css string variables.

Therefore, the minimum version of go required by wails is 1.16.

//Go: embedded instruction, which can package static resource files into compiled programs at the compilation stage, and provide the ability to access these files.

Build project

## You need to enter the wails project
$ cd ./hello

## Build within the project
$ 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 project

$ ./build/hello.exe

The following results will be seen under windows:

Analysis of wails Technology

IE11

During the wails build, we can see the prompt: IE11, that is, web viewer is based on IE11 on the windows platform. On August 17, 2021, Microsoft announced that Office 365 will no longer consider the compatibility on IE11 and filter users to Edge, but Edge is not a default installation. So wails calls IE11 to render the web.

As for the Compatibility Strategy of React, Vue and Angular for IE11, we will avoid it.

Internet Explorer 11 support

Executable file

OK, let's take a look at the compiled file. It's only 8MB, which is much better than 70MB and hundreds of megabytes of Electron. I think that's why we use this plan.

summary

In general, wails2 improves go's cross platform desktop application solution based on Web view. Among them, being able to use the convenience brought by the web front end while making the compilation results as small as possible is its biggest highlight. If you do something simple and don't answer the compatibility problem of pages, it is a good cross end desktop program solution.

common problem

  • Under windows platform, setup reported that gcc could not 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 checks that the operating system is windows, but gcc is not checked. Here, you need to install gcc through mingw and configure it to the path environment variable of windows.

  • 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 version of Golang you use is too low. You can upgrade to 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

Upgrade to Go 1.17 to solve the problem. I don't know the specific reason. Someone who will tell me.

reference resources

Topics: Go webapp