wails：electron之外的更优选择

对于桌面apps开发，尤其需要原生功能支持、有离线使用需求、迭代速度较快、对下载安装不太敏感同时桌面端开发人员不足的项目，最好能够利用js构建跨平台的桌面端应用。提供一个定制的“浏览器”，封装了一些原生系统的功能，提供给开发者。如可以定制不同系统的菜单栏、应用图标、任务栏，控制应用窗口的大小和位置，调用本地的程序等。相比web应用，开发者摆脱了来自浏览器的限制、并可以间接地和原生打交道。

通常会选用Electron著名应用有：Atom编辑器、VS Code编辑器、Slack、Postman桌面版、Wordpress桌面版等。

wails简介

Wails提供使用go及web技术开发桌面apps的能力，相对Electron更轻量化、更快。结合go简便构建具有更多功能、现代化前端界面的应用。

入门

Wails在安装前需要需准备基础环境:

Go 1.17+
NPM (Node 15+)

安装wails

运行 go install github.com/wailsapp/wails/v2/cmd/wails@latest 安装Wails CLI.

检查安装结果

运行 wails doctor. 如果检查未通过，可根据提示安装依赖包，直至通过。

使用Javascript及Vue开发，生成项目:

wails init -n myproject -t vue

如果使用Typescript:

wails init -n myproject -t vue-ts

随后在生成的项目目录下，运行wails dev

Wails CLI v2.0.0-beta.37


Executing: go mod tidy -compat=1.17
Executing: wails generate module
Building application for development...
  - Installing frontend dependencies: Done.
  - Compiling frontend: Done.
  - Compiling application: Done.
  - Packaging application: Done.

Running frontend dev watcher command: 'npm run dev'
Watching (sub)/directory: /Users/jade/dev/hello-wails
Using DevServer URL: http://localhost:34115
Using Frontend DevServer URL: http://localhost:3000
Using reload debounce setting of 100 milliseconds
INF | Serving assets from frontend DevServer URL: http://localhost:3000
Added new directory to watcher: /Users/jade/dev/hello-wails/frontend/wailsjs/go
DEB | [DevWebServer] Waiting for frontend DevServer 'http://localhost:3000' to be ready

> frontend@0.0.0 dev /Users/jade/dev/hello-wails/frontend
> vite


  vite v2.9.12 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 284ms.

DEB | [DevWebServer] Serving DevServer at http://localhost:34115

如顺利将弹出类似如下窗口：

wails测试界面

其他

白屏

此问题在mac下会出现，在白屏下右键，选择调试（同浏览器中“检查”），可以看到"The resource could not be loaded because the App Transport Security policy requires the use of a secure connection"内容。

需要修改build/darwin/Info.plist，添加如下内容

    <key>NSExceptionAllowsInsecureHTTPLoads</key><true/>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key><true/>
    </dict>

之后运行 rm -rf build/bin && wails dev。

参考：

探索桌面应用应用案例

最后修改于 2022-06-23