Golang wails2 跨端桌面解決方案

小白要生髮發表於2022-01-23
GolangAI跨端

wails2 Golang

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

文件: https://wails.io/zh-Hans/docs...

環境要求

  • Go 1.16
  • npm
  • 需是 Windows，MacOS, Linux 作業系統之一
  • gcc

安裝

# 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 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

初始化專案

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

專案 目錄結構

$ 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 就是前端專案的目錄， ./frontend/build 資料夾儲存了 npm 編譯後的成果。而 wails 是怎樣將其引入到程式碼中的呢？

開啟檔案 ./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()
}

從 main.go 檔案中可以看到 //go:embed 這兩句程式碼，這用到了 go 1.16 開始官方提供的 embed 新特性，通過這兩個指令將 js，css 檔案裡的程式碼賦值給 js，css 兩個字串變數。

所以， wails 對go最低版本要求是 1.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 下會看到 如下結果：

wails-run

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 確實是好太多。我想大家用這個方案就是衝這個來的吧。

總結

總的來說，wails2 完善了 go 基於 web-view 跨平臺桌面程式解決方案。其中，能夠使用web前端帶來的便利的同時，還能讓編譯成果儘可能小，這是它最大的亮點。如果你做的東西比較簡單，不接依頁面的相容性問題，那麼它不失為一個不錯的跨端桌面程式解決方案。

常見問題

  • 在 windows 平臺下 setup 報 gcc 找不到
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

升級到 Go 1.17 可解決，具體原因我也不清楚，有會的大佬告訴我一下。

參考

相關文章