【go语言】go-webview2用法（持续更新）

文章目录

背景

目前为止，已经有很多优秀的electron应用。但其特点也很明显：使用html+css+js构建的布局很精致，但是体积不容小觑（最新版electron-egg打包出来的程序已经300MB+）。

• vscode： 微软开源的编辑器工具，支持各类插件。
• draw.io: 流程图绘制工具
• tabby: 一款ssh连接工具
• termius：ssh以及sftp连接工具
• typora：一款markdown编辑器
• 微信小程序开发工具: 基于nw.js, 本质和electron差不多。

而webview2是微软基于chromium做的一个渲染引擎，相当于将electron的公共部分抽离到一个目录下：C:\Program Files (x86)\Microsoft\EdgeWebView\Application，然后你的核心程序只需要几M即可运行。

经过UPX压缩后的exe程序，仅需要1.9MB就可跑起一个helloworld页面。

PS：基于webview2的还有wails这个框架，但是框架变动太频繁， wails2.5的程序升级到2.9就跑不起来了，很难受。

核心接口和方法

而go语言方面，已经有人封装了调用webview2来构建exe程序的库。

github.com/jchv/go-webview2

• New():

功能: 创建一个新的 WebView2 实例。
用法: webview, err := webview2.New()

• Destroy():

功能: 销毁 WebView2 实例。
用法: webview.Destroy()
SetTitle(title string):

功能: 设置 WebView2 窗口的标题。
用法: webview.SetTitle(“窗口标题”)

• SetSize(width, height int, hint webview2.Hint):

功能: 设置 WebView2 窗口的大小。
用法: webview.SetSize(800, 600, webview2.HintNone)

• Navigate(url string):

功能: 导航到指定的 URL。
用法: webview.Navigate(“https://example.com”)

• Eval(script string):

功能: 执行 JavaScript 代码。
用法: webview.Eval(“alert(‘Hello, world!’);”)

• Run():

功能: 运行 WebView2 实例，进入事件循环。
用法: webview.Run()

• Bind(name string, fn interface{}):

功能: 将 Go 函数绑定到 JavaScript，以便从 JavaScript 调用 Go 方法。
用法: webview.Bind(“functionName”, func() { /* Go code */ })

扩展接口

通过go调用win32 api可以扩展更多的功能。

/**
 * @description: 调用window原生消息弹框
 * @param {uintptr} hwnd
 * @param {*} text 消息内容
 * @param {string} caption
 * @param {uint} uType
 * @return {*}
 */
func ShowMessage(hwnd uintptr, text, caption string, uType uint) int {
    ret, _, _ := procMessageBoxW.Call(
        hwnd,
        uintptr(unsafe.Pointer(syscall.StringToUTF16Ptr(text))),
        uintptr(unsafe.Pointer(syscall.StringToUTF16Ptr(caption))),
        uintptr(uType),
    )
    return int(ret)
}

/**
 * @description: 选择一个文件, import 一下"github.com/sqweek/dialog"
 * @return {string, error} 文件路径，错误信息
 */
func OpenFileDialog() (string, error) {
    filePath, err := dialog.File().Title("选择").Load()
    if err != nil {
        return "", err
    }
    return filePath, nil
}

遗憾的是

1. 微软放弃了webview2在mac和linux上的支持，并未开放渲染引擎和接口。
2. go语言库github.com/jchv/go-webview2并不支持win7，会报错：kernel32.dll加载失败。可能需要重新配置Webview2Loader.dll。（win7需要109版本以下的。） 官方nuget仓库：https://www.nuget.org/packages/Microsoft.Web.WebView2/1.0.2730-prerelease#versions-body-tab
3. go-webview2这个库将函数绑定到了前端的window对象下， 这就导致了前端原生js编写的函数， 不能与go注入的函数同名，不然就gg。可以尝试将go注入的函数放到window.GoMethods下。替换webview.go 467行

    w.Init("(function() { var name = "+jsString(name)+";"+`
        var RPC = window._rpc = (window._rpc || {nextSeq: 1});
        if (!window.GoMethods) window.GoMethods = {};
        window.GoMethods[name] = function() {
          var seq = RPC.nextSeq++;
          var promise = new Promise(function(resolve, reject) {
            RPC[seq] = {
              resolve: resolve,
              reject: reject,
            };
          });
          window.external.invoke(JSON.stringify({
            id: seq,
            method: name,
            params: Array.prototype.slice.call(arguments),
          }));
          return promise;
        }
    })()`)

1. 如果将vue2打包的dist目录内嵌到go-webview2生成的exe中，需要一个httpServer来代理静态文件，这样就会占用至少一个本地端口，显然不合适。 似乎wails解决了这个问题：

• https://github.com/wailsapp/wails/blob/release/2.7.0/v2/pkg/assetserver/assetserver_webview.go#L25C13-L25C79
• wails目前开发流程，webview dev时加载vite的http://127.0.0.1:5173，build时实现了一个无本地端口占用，并加载dist内文件的方案，可惜我还没看懂其逻辑。