wails2
github: github.com/wailsapp/wails
file: wails.io/zh-Hans/docs/reference/op...
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.
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.9Upgrade to Go 1.17 to solve the problem. I don't know the specific reason. Someone who will tell me.