使用Electron 构建是自己的桌面快捷应用

electron 是一款帮助开发者实现跨平台桌面开发的平台。开发者只需要使用javascript html css即可开发属于自己的桌面应用。

所以说假如你是一位前端的话为什么不去试试用它来优化一下自己的工作流呢。

下面我来介绍下自己开发的一个小的mac应用，主要用来简化进入终端的步骤。

因为平时的很多工作都是在终端下进行的。比如我们要在自己构建的目录下执行npm，那么提前就要进入这个目录下，如果我有很多个这样的目录进入的话也相当麻烦，还要用cd命令一个一个进入。那么我就想着能不能直接点一下就打开终端并进入我想进去的命令呢？然后我能不能像打开应用那样，用可视化的方式来操作这件事呢，于是我想到了Electron。

先截取一下我要开发应用的最终效果图

非常精简的界面，只有增加和删除。

增加的时候弹框选择一个想要打开的应用，可以添加自己的命令，比如cd 甚至启动之类的。点删除的时候可以随意删除。
添加完后就可以用过点击这个快捷方式直接进入到你的目录下了。

下面介绍思路。

• 前端的应用框架我选用了React+Redux，并使用了Material-UI组件库。

• shell 使用的是 local-shell@^1.0.0。开发之前我有仔细阅读Electron的ApI,发现它的shell api 不能实现我想要的直接打开一个应用的功能，有兴趣的可以仔细研究一下。所以就去Npm上搜到了这个local-shell。

• 前端应用与Electron的通信我单独写在了一个文件中，通过window这个全局变量联系到一起。
  之所以分开，是因为我早先的思路是先开发webapp然后再用electron包装，webapp中不能使用electron,所以单独把electron的相关方法拿出来。

如果只是单纯开发桌面应用则不需要这样做。
你可以先开启webpack server，然后Npm start electron，直接在index.html里面引入webpack的 输出app.js，然后所有的东西都按模块化开发。

另外在测试桌面app的时候发现不能直接往文本里复制，google后发现是因为没有设置菜单项的缘故。希望这能对你有所帮助。

项目地址: https://github.com/wq123456/E...
个人博客地址：https://wq123456.github.io