使用Electron实现一个iPic

iPic 是一个很赞的应用，可以快速将图片上传到图床上。由于非会员只能使用免费的新浪图床，因为最近新浪图床防盗链和图片有效期的缘故，因此决定自己实现一个图片快速上传的应用。
大致对比了一下Flutter Desktop、PyQT和Electron等框架，最后决定使用Electron，花了两三个晚上实现了将剪切板的图片快速上传到七牛上（非广告~）。
本文将回顾整个开发流程，并记录第一次正儿八经开发Electron的经验。

项目完整代码已放在github上。
准备工作
开发安环境
electron-forge是一个用来开发、打包和发布 Electron 的脚手架，首先安装electron和electron-forge

全局安装

npm install -g electron
npm install -g electron-forge

初始化项目

electron-forge init oPic

…初始化的时间可能会有点长

复制代码electron-forge 为我们生成了基本的项目模板。
如果是开发类似于 GUI 应用，可以修改src/index.html里面相关的视图文件，体验使用 Web 技术开发桌面应用。如果引入了 Vue、React 等框架，也可以在开发环境下直接将file://文件替换为webpack-dev-server服务 URL
// mainWindow.loadURL(file://${__dirname}/index.html);
mainWindow.loadURL(http://localhost:8080);
复制代码需求梳理
由于本次开发目标是工具类应用，很少涉及到 UI 层面的开发，梳理一下整个工具的需求

点击顶部任务栏应用图标，展示剪贴板内的图片(如复制图片文件、截图等)，下面是 iPic 的工作页面

点击待上传图片，后台将图片上传到图床，自动将图片 URL 填充到剪贴板

需要提供图床配置
出于图床的容量和流量的考虑，希望在图片上传之前进行压缩

更新已上传图片列表，点击已上传图片，会重新复制该图片的 URL

整个需求比较简单，主要需要去Electron 文档查下面几个接口

在 Mac 顶部应用栏展示应用图标，点击弹出选项菜单
获取剪切板图片信息，定制选项菜单栏展示图片
图床配置弹窗 UI 开发，与主进程交互
图片上传，很早之前写了一个img_qiniu_cdn，貌似现在还可以用
图片压缩，本来想使用TinyPng的 API，发现有次数限制~找个其他的库吧

大概就这些，开始写代码啦
开发
顶部应用栏
查看系统托盘 API，构造一个Tray实例
import { Tray } from “electron”;
// 创建顶部图标
const createTray = app => {
// upload@3x是展示在托盘的图标
const icon16 = path.resolve(__dirname, “…/assets/[email protected]”);
const tray = new Tray(icon16);
// 监听图标点击事件，打开选项菜单
tray.on(“click”, () => {
const config = configUtil.getConfig();
const template = [
{ label: “待上传”, type: “normal”, enabled: