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

前言

起初并没有开发桌面应用的想法，一是之前了解过这个技术但没有研究过，二是懒... 好吧，主要还是懒。一开始我只是做了一个命令行的压缩工具，只实现了基础功能，详见 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白名单中即可

项目截图

踩坑

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

// 监听下载完成事件
  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()
  })

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

结言

当然，全世界没有任何一款没有缺陷的应用，本项目亦不例外，也还有很多不足的地方需要调试和改进，如果你有任何好的idea，欢迎Pr。

参考

electron-vue electron-builder tinyPngApi ziplocal