• 欢迎访问佰阅部落,本站为优质开源程序分享站,所有自研项目均开源免费,可在Github查看源码。 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎积极参与讨论、反馈问题

Wails开发实战:将web应用迁移到桌面客户端很难吗?

开发工具 佰阅部落 1个月前 (09-18) 304次浏览
文章目录[隐藏]

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。

5. 相关资源


佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Wails开发实战:将web应用迁移到桌面客户端很难吗?
喜欢 (0)
佰阅部落
关于作者:
爱折腾,爱学习,用心分享各种实用搭建教程,让优质web程序脱颖而出,欢迎订阅!