資訊專(zhuān)欄INFORMATION COLUMN
摘要：是一款幫助開(kāi)發(fā)者實(shí)現(xiàn)跨平臺(tái)桌面開(kāi)發(fā)的平臺(tái)。開(kāi)發(fā)者只需要使用即可開(kāi)發(fā)屬于自己的桌面應(yīng)用。下面我來(lái)介紹下自己開(kāi)發(fā)的一個(gè)小的應(yīng)用，主要用來(lái)簡(jiǎn)化進(jìn)入終端的步驟。增加的時(shí)候彈框選擇一個(gè)想要打開(kāi)的應(yīng)用，可以添加自己的命令，比如甚至啟動(dòng)之類(lèi)的。
electron 是一款幫助開(kāi)發(fā)者實(shí)現(xiàn)跨平臺(tái)桌面開(kāi)發(fā)的平臺(tái)。開(kāi)發(fā)者只需要使用javascript html css即可開(kāi)發(fā)屬于自己的桌面應(yīng)用。
所以說(shuō)假如你是一位前端的話(huà)為什么不去試試用它來(lái)優(yōu)化一下自己的工作流呢。
下面我來(lái)介紹下自己開(kāi)發(fā)的一個(gè)小的mac應(yīng)用，主要用來(lái)簡(jiǎn)化進(jìn)入終端的步驟。
因?yàn)槠綍r(shí)的很多工作都是在終端下進(jìn)行的。比如我們要在自己構(gòu)建的目錄下執(zhí)行npm，那么提前就要進(jìn)入這個(gè)目錄下，如果我有很多個(gè)這樣的目錄進(jìn)入的話(huà)也相當(dāng)麻煩，還要用cd命令一個(gè)一個(gè)進(jìn)入。那么我就想著能不能直接點(diǎn)一下就打開(kāi)終端并進(jìn)入我想進(jìn)去的命令呢？然后我能不能像打開(kāi)應(yīng)用那樣，用可視化的方式來(lái)操作這件事呢，于是我想到了Electron。
先截取一下我要開(kāi)發(fā)應(yīng)用的最終效果圖
非常精簡(jiǎn)的界面，只有增加和刪除。
增加的時(shí)候彈框選擇一個(gè)想要打開(kāi)的應(yīng)用，可以添加自己的命令，比如cd 甚至啟動(dòng)之類(lèi)的。點(diǎn)刪除的時(shí)候可以隨意刪除。
添加完后就可以用過(guò)點(diǎn)擊這個(gè)快捷方式直接進(jìn)入到你的目錄下了。
下面介紹思路。
前端的應(yīng)用框架我選用了React+Redux，并使用了Material-UI組件庫(kù)。
shell 使用的是 local-shell@^1.0.0。開(kāi)發(fā)之前我有仔細(xì)閱讀Electron的ApI,發(fā)現(xiàn)它的shell api 不能實(shí)現(xiàn)我想要的直接打開(kāi)一個(gè)應(yīng)用的功能，有興趣的可以仔細(xì)研究一下。所以就去Npm上搜到了這個(gè)local-shell。
前端應(yīng)用與Electron的通信我多帶帶寫(xiě)在了一個(gè)文件中，通過(guò)window這個(gè)全局變量聯(lián)系到一起。
之所以分開(kāi)，是因?yàn)槲以缦鹊乃悸肥窍乳_(kāi)發(fā)webapp然后再用electron包裝，webapp中不能使用electron,所以多帶帶把electron的相關(guān)方法拿出來(lái)。
如果只是單純開(kāi)發(fā)桌面應(yīng)用則不需要這樣做。
你可以先開(kāi)啟webpack server，然后Npm start electron，直接在index.html里面引入webpack的 輸出app.js，然后所有的東西都按模塊化開(kāi)發(fā)。
另外在測(cè)試桌面app的時(shí)候發(fā)現(xiàn)不能直接往文本里復(fù)制，google后發(fā)現(xiàn)是因?yàn)闆](méi)有設(shè)置菜單項(xiàng)的緣故。希望這能對(duì)你有所幫助。
項(xiàng)目地址: https://github.com/wq123456/E...
個(gè)人博客地址：https://wq123456.github.io
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80415.html
摘要：使用實(shí)現(xiàn)桌面應(yīng)用實(shí)現(xiàn)離線可用很多方法，比如使用技術(shù)。還有一個(gè)好處，因?yàn)樗耆趤?lái)實(shí)現(xiàn)可以使用的一些新功能，那我們理論上可以在做桌面應(yīng)用時(shí)順手把應(yīng)用也做了。 本文將會(huì)講述一個(gè)完整的跨端桌面應(yīng)用?代碼畫(huà)板?的構(gòu)建，會(huì)涉及到整個(gè)軟件開(kāi)發(fā)流程，從開(kāi)始的設(shè)計(jì)、編碼、到最后產(chǎn)品成型、包裝等。 本文不僅僅是一篇技術(shù)方面的專(zhuān)業(yè)文章，更會(huì)有很多產(chǎn)品方面的設(shè)計(jì)思想和將技術(shù)轉(zhuǎn)換成生產(chǎn)力的思考，我將結(jié)合我自...
摘要：本文主要介紹應(yīng)用如何打包成和文件。添加監(jiān)聽(tīng)并生成快捷方式安裝卸載運(yùn)行步驟和重新打包此時(shí)，再次運(yùn)行進(jìn)行安裝，就會(huì)自動(dòng)再桌面和開(kāi)始菜單生成快捷方式了。 本文主要介紹Electron應(yīng)用如何打包成msi和exe文件。由于介紹Electron打包成msi和exe的文章很少，官方的文檔也一筆帶過(guò)，在研究的過(guò)程中踩了很多坑，所以寫(xiě)下此文，給其他人一個(gè)參考。關(guān)于Electron基礎(chǔ)知識(shí)的文章，官方文...
摘要：更新歷史修復(fù)了無(wú)法導(dǎo)出中文文件的，增加了拖拽導(dǎo)入文件的功能。把編碼對(duì)象作為參數(shù)傳入，就可以生成一個(gè)可供下載的鏈接，下載的內(nèi)容是完美的中文字符其他種類(lèi)字符同樣支持，代碼如下保存為格式以上就是兩個(gè)關(guān)鍵新功能的實(shí)現(xiàn)原理。 Markcook 1.2 showImg(https://imgly.net/img/AhB.jpg); 項(xiàng)目地址：https://github.com/jrainlau...
摘要：本文主要講解的入門(mén)?？梢詭椭覀児芾戆南螺d依賴(lài)部署發(fā)布等?？梢哉J(rèn)為是中的。后續(xù)使用中，全部替換為即可。命令根據(jù)它，自動(dòng)下載所需模塊用于創(chuàng)建窗口和處理系統(tǒng)事件安裝包的位置。 Electron是什么 可以認(rèn)為Electron是一種運(yùn)行環(huán)境庫(kù)，我們可以基于此，用HTML、JS和CSS寫(xiě)桌面應(yīng)用。PC端的UI交互，主要有web應(yīng)用和桌面應(yīng)用。具體采用哪種方式，主要看系統(tǒng)的應(yīng)用場(chǎng)景，哪個(gè)更合適...
閱讀 3161·2021-11-22 12:01
閱讀 3781·2021-08-30 09:46
閱讀 796·2019-08-30 13:48
閱讀 3230·2019-08-29 16:43
閱讀 1674·2019-08-29 16:33
閱讀 1864·2019-08-29 13:44
閱讀 1428·2019-08-26 13:45
閱讀 2242·2019-08-26 11:44
