wails是一个可让你使用Go和Web技术编写桌面应用的项目,说白点后端使用go语言,前端使用任意Web技术,比如普通的HTML、VUE、React等等。作为练手项目,我准备把以前开源的glink短视频去水印做成桌面客户端试试。
0. 效果截图
1. 开发前准备
wails即将发布v2版本,得益于微软内置的webview2,解决了wails1.x版本在Windows上使用mshtml带来的诸多问题。最近v2开发正热火朝天,由于有
米司特包(中文开发者)的加入,我也有幸探讨v2版本开发的几个问题改进。可以说目前的v2版本基本可以正式使用了,目前主要的特点是:打包后经过upx压缩一般维持在2.8~3Mb,非常惊艳;支持整个窗口背景全透明;支持菜单栏隐藏,实现APP内的放大、最下化和关闭。
再来说说Glink视频去水印,这个项目使用go-fiber做后端,vue做前端开发的,整个入口只有一个通用的API解析接口,因此非常适合搭配wails来练练手。
2. 安装环境
安装wails
go get github.com/wailsapp/wails/v2/cmd/wails
完成后运行:wails doctor
将检查你是否安装了正确的依赖项。
初始化一个wails项目:
wails init -d . -n demo #其中-d .代表当前文件夹下创建,不加的话会创建一个-n名称的文件夹
wails自带了很多模板,可以输入wails -l查看,初始化的时候-t指定模板。
完成上一步就可以输入wails dev查看最终效果了,一个完成的wails应用就诞生了
使用wails build就可以打包输出,然后upx或zip压缩一下就可以分发了。
3. Glink应用迁移
首先把glink的vue源码放入frontend,然后回到根目录,修改wails.json里的assetdir
目录为frontend/dist
,修改main.go里的embed嵌入目录为//go:embed frontend/dist
。至此就算是完成了vue项目输出目录和wails静态资源的对接。此时使用wails dev就可以查看效果,如果想要使用wails命令的时候,自动build一下,还可以在wails.json里进行配置。由于使用json格式,无法做备注,期待后续使用yaml格式做代替。
搞定了静态资源和打包构建命令,下一步就是将go-fiber转换成wails app的接口,实际上很简单,只需要在wails后端的放入自己的函数即可。
也就是将下面的go-fiber:
func ApiHandler(c *fiber.Ctx) error {
url := c.Params("*") // 带有?的替换为&后进行,否则url无参数
match, _ := regexp.MatchString(`(http|https)://`, url)
if !match {
return c.JSON(fiber.Map{"msg": "请输入正确的url地址"})
}
// ....
}
改成wails app
func (b *App) ApiHandler(url string) string {
match, _ := regexp.MatchString(`(http|https)://`, url)
if !match {
return "请输入正确的url地址"
}
// ....
}
下一步,就是前端读取,实际上非常像axios请求。
原始web-axios代码如下:
api.get(`/${state.src_url}`).then((res)=>{
// console.log(res);
toast.success('解析成功')
}).catch(()=>{
// console.log(res);
})
换成wails特有的格式,后端的方法位于前端window.go.<packagename>.<struct>.<method>
,于是就有了下面的
window.go.main.App.ApiHandler(state.src_url).then((res)=>{
// console.log(res);
toast.success('解析成功')
}).catch(()=>{
// console.log(res);
})
怎么样?是不是感觉几乎没有变更门槛?事实上确实如此,正因为如此,由于目前wails的热更新操作每次加上前端打包会耗时4~5秒左右,或许我们可以使用成熟的gowatch热更新+vite工具实时快速开发,完成后再迁移到wails,这样就会提升不少开发效率。
完成上述步骤,就可以wails build打包输出了,相关软件可以参考佰阅云盘进行下载。
4. 已知问题
wails虽然开源已久,按理不可能不火,web前端技术目前不论是普通页面、动态或3D可视化都非常出色,搭配go语言做后端是非常棒的事情。然而目前的主要难点主要体现在:1. 热更新耗时太慢,导致开发效率低 2. wails开发时没有响应前端的接口,导致前端yarn serve等很多开发工具调用wails后端时无法识别,造成开发时前后端分离,这是非常致命的缺陷。
因为存在上面两个问题,所以wails并不适合开发时采用,几乎没有开发效率可言,开发阶段还是比较推荐vite+gowatch搭配web技术开发效果最佳,可以达到修改后立即所见所得(毫秒级)。开发完毕后,再按照本文那样迁移一下,效率应该是最好的。如果使用wails dev命令加上热更新处理,每次变更打包都是4~5s等待,这个就非常难受了。结论很清晰,开发时推荐vite+gowatch;最终打包时使用wails。