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