使用Electron 構建是自己的桌面快捷應用

Gilbertat 發布于2019-08-20 11:08 / 750人閱讀

摘要：是一款幫助開發者實現跨平臺桌面開發的平臺。開發者只需要使用即可開發屬于自己的桌面應用。下面我來介紹下自己開發的一個小的應用，主要用來簡化進入終端的步驟。增加的時候彈框選擇一個想要打開的應用，可以添加自己的命令，比如甚至啟動之類的。

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

云服務器 GPU云服務器構建自己的云服務器怎么構建自己的云服務器怎樣構建自己的云服務器 webrtc結合electron桌面分享

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80415.html

如何使用前端技術開發一個桌面跨端應用

摘要：使用實現桌面應用實現離線可用很多方法，比如使用技術。還有一個好處，因為它完全基于來實現可以使用的一些新功能，那我們理論上可以在做桌面應用時順手把應用也做了。本文將會講述一個完整的跨端桌面應用?代碼畫板?的構建，會涉及到整個軟件開發流程，從開始的設計、編碼、到最后產品成型、包裝等。本文不僅僅是一篇技術方面的專業文章，更會有很多產品方面的設計思想和將技術轉換成生產力的思考，我將結合我自...

shixinzhang 2019-08-23 15:53 評論0 收藏0
手把手教你把前端代碼打包成msi和exe文件

摘要：本文主要介紹應用如何打包成和文件。添加監聽并生成快捷方式安裝卸載運行步驟和重新打包此時，再次運行進行安裝，就會自動再桌面和開始菜單生成快捷方式了。本文主要介紹Electron應用如何打包成msi和exe文件。由于介紹Electron打包成msi和exe的文章很少，官方的文檔也一筆帶過，在研究的過程中踩了很多坑，所以寫下此文，給其他人一個參考。關于Electron基礎知識的文章，官方文...

Miracle 2019-08-21 14:38 評論0 收藏0
Markcook 1.2，超輕的開源markdown編輯器

摘要：更新歷史修復了無法導出中文文件的，增加了拖拽導入文件的功能。把編碼對象作為參數傳入，就可以生成一個可供下載的鏈接，下載的內容是完美的中文字符其他種類字符同樣支持，代碼如下保存為格式以上就是兩個關鍵新功能的實現原理。 Markcook 1.2 showImg(https://imgly.net/img/AhB.jpg); 項目地址：https://github.com/jrainlau...

BlackMass 2019-08-19 18:06 評論0 收藏0
Electron入門介紹

摘要：本文主要講解的入門。可以幫助我們管理包的下載依賴部署發布等。可以認為是中的。后續使用中，全部替換為即可。命令根據它，自動下載所需模塊用于創建窗口和處理系統事件安裝包的位置。 Electron是什么可以認為Electron是一種運行環境庫，我們可以基于此，用HTML、JS和CSS寫桌面應用。PC端的UI交互，主要有web應用和桌面應用。具體采用哪種方式，主要看系統的應用場景，哪個更合適...

wing324 2019-08-21 18:41 評論0 收藏0