electron-vue + electron-updater打造一款图片压缩工具

 前言

起初并没有开发桌面应用的想法,一是之前了解过这个技术但没有研究过,二是懒... 好吧,主要还是懒。一开始我只是做了一个命令行的压缩工具,只实现了基础功能,详见 [minify-your-img](https://github.com/snow-sprite/minify-your-img) ,当然这也是本款产品的前世今生,功能不及现在的1/3,只实现了基础的单图片、单文件夹压缩。做到一半的时候,想着这么做也不是很智能,是不是可以单独做个桌面应用,于是说干就干。

项目创建

使用官方命令创建基础项目:

vue init simulatedgreg/electron-vue my-project  # my-project即为你创建的项目名称


项目说明

 

  • 地址:https://github.com/snow-sprite/CompressApp (如果你喜欢它,或者对你有所帮助,请点亮star,蟹蟹!)

  •  功能

    ✅ 单文件夹拖拽压缩

    ✅ 单图片压缩

    ✅ 多图片拖拽压缩

    ✅ 多文件夹拖拽压缩

    ✅ 文件夹及图片同时拖拽压缩

    ✅ 在线图片仅支持有后缀的,默认生成到系统【下载】文件夹下

    ✅ 支持自动(手动)更新应用

  •  Api
    • tinyPng
    • zip-local

要压缩的图片格式是否支持,请从tinyPng官网查阅,如果支持的话添加到`src/main/lib/imagesType.js`白名单中即可

项目截图

electron-vue + electron-updater打造一款图片压缩工具_第1张图片

踩坑
1.  设置自动更新后,应用会在下载完成后自动退出并安装更新包,此时系统托盘程序已经失效

// 监听下载完成事件
  autoUpdater.on('update-downloaded', function (event) {
    sendUpdateMessage({
      cmd: 'update-downloaded',
      message: message.download
    })
    // 退出并安装更新包
    autoUpdater.quitAndInstall()
  })


同理: 在关闭窗口后,本来设置好的最小化程序也失效了,解决办法是关闭窗口后销毁程序,点击托盘,重新打开一个新窗口

trayIcon.on('click', () => {
    /**
     * 由于autoupdater的缘故 关闭窗口默认不再最小化
     * 再次打开系统托盘 需要先创建窗口
     */
    if (mainWindow === null) {
      createWindow()
    }
    mainWindow && mainWindow.show()
    mainWindow && mainWindow.focus()
  })


2.  Windows自动更新成功,Mac自动更新失败(latest-mac.yml已生成并上传web服务器),暂时没找到原因。

结言


当然,全世界没有任何一款没有缺陷的应用,本项目亦不例外,也还有很多不足的地方需要调试和改进,如果你有任何好的idea,欢迎[Pr](https://github.com/snow-sprite/CompressApp/pulls)。

参考


 electron-vue   electron-builder  tinyPngApi  nodejs ziplocal

你可能感兴趣的:(electron-vue,electron开发,electron打包,electron,Electron,Electron打包)