使用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