android开发入门与实践_Electron从入门到实践,前端开发者开发桌面App的最佳选择...
在開(kāi)始之前,我想您一定會(huì)有這樣的困惑:標(biāo)題里的Electron 是什么?Electron能做什么?許多偉大的公司使用Electron框架的原因又是什么?
帶著這些問(wèn)題和疑惑,通過(guò)本文的介紹,可助您全面地認(rèn)識(shí)Electron這門(mén)新興的技術(shù),迅速找到其入門(mén)途徑,并理解Electron為何被稱(chēng)為當(dāng)下開(kāi)發(fā)桌面App的最佳選擇。
初探Electron
一、Electron是什么?(為何稱(chēng)之為“跨平臺(tái)桌面瀏覽器”)
前端開(kāi)發(fā)的魅力,在于開(kāi)發(fā)者隨時(shí)要面臨全新技術(shù)的挑戰(zhàn)!
曾幾何時(shí),作為前端開(kāi)發(fā)者的你可曾想過(guò):如何利用HTML、CSS和JavaScript構(gòu)建跨平臺(tái)的桌面應(yīng)用程序?借助 Electron,這項(xiàng)工作將比你想象的更加簡(jiǎn)單。Electron作為一個(gè)使用新興技術(shù)(包括JavaScript,HTML和CSS),可以幫助用戶(hù)建立與系統(tǒng)功能的交互,讓開(kāi)發(fā)人員可以更專(zhuān)注于應(yīng)用程序本身。
Electron設(shè)計(jì)之初便充分結(jié)合了當(dāng)今最好的Web技術(shù),作為一個(gè)跨平臺(tái)的“集成框架”,它可以輕松地與Mac、Windows和Linux兼容。而所謂的“集成框架”也就是它將“Chromium”和“Node.js”很好的集成在了一起,并明確分工,Electron負(fù)責(zé)硬件部分,“Chromium”和“Node.js”負(fù)責(zé)界面與邏輯,大家井井有條,共同構(gòu)成了一個(gè)成本低廉卻十分高效的解決方案,在快速交付上甚至比Native還要快速。
Electron發(fā)展里程碑
- 2013年4月11日,Electron以Atom Shell為名起步。
- 2014年5月6日,Atom以及Atom Shell以MIT許可證開(kāi)源。
- 2015年4月17日,Atom Shell改名為Electron。
- 2016年5月11日,1.0版本發(fā)布。
- 2016年5月20日,允許向Mac應(yīng)用商店提交軟件包。
- 2016年8月2日,支持Windows商店。
簡(jiǎn)而言之,Electron JS是一個(gè)運(yùn)行時(shí)框架,它允許用戶(hù)使用HTML5、CSS和JavaScript創(chuàng)建桌面套件應(yīng)用程序,而大部分應(yīng)用程序都是由兩種非常受歡迎的技術(shù)混合而成:Node.js和Chromium。因此,您編寫(xiě)的任何Web應(yīng)用程序都可以在Electron JS 上正常運(yùn)行。
Electron的內(nèi)置功能包括:
- 自動(dòng)更新 - 使應(yīng)用程序能夠自動(dòng)更新、升級(jí)
- 本機(jī)菜單和通知 - 創(chuàng)建本機(jī)應(yīng)用程序菜單和上下文菜單
- 應(yīng)用程序崩潰報(bào)告 - 您可以將崩潰報(bào)告提交給遠(yuǎn)程服務(wù)器
- 調(diào)試和分析 - Chromium的內(nèi)容模塊可以發(fā)現(xiàn)性能瓶頸和運(yùn)行緩慢的原因。此外,您也可以在應(yīng)用中使用自己喜歡的Chrome開(kāi)發(fā)者工具
- Windows安裝程序 -您可以快速而簡(jiǎn)單創(chuàng)建安裝包
二、Electron 可以用來(lái)做什么?(哪些場(chǎng)景需要使用Electron)
以Windows平臺(tái)應(yīng)用開(kāi)發(fā)為例,大部分人首先會(huì)想到使用成熟的開(kāi)發(fā)方案,如QT(C++)、WPF(C#) 等。但面臨以下幾種使用場(chǎng)景,這些方案將顯得捉襟見(jiàn)肘:
- 公司要設(shè)計(jì)一個(gè)全新的APP, 但技術(shù)人員大部分由前端開(kāi)發(fā)構(gòu)成
- 公司原本就有在線的Web應(yīng)用,但是想讓該應(yīng)用能夠在桌面端直接打開(kāi)(離線狀態(tài)下也可使用),并增加一些與系統(tǒng)交互的功能
在SpreadJS項(xiàng)目中,用戶(hù)需要將基于web版的表格編輯器封裝成APP使用,同時(shí)增加文件操作的能力,如導(dǎo)入導(dǎo)出excel、導(dǎo)入PDF等,而SpreadJS是一個(gè)純前端的表格控件,開(kāi)發(fā)人員全部由前端開(kāi)發(fā)組成,對(duì)C++和C#并不熟悉,如果投入過(guò)大的時(shí)間精力用來(lái)學(xué)習(xí)其他開(kāi)發(fā)語(yǔ)言,整個(gè)項(xiàng)目的技術(shù)管理和項(xiàng)目管理將變得無(wú)法控制。除此之外,鑒于項(xiàng)目本身對(duì)應(yīng)用的業(yè)務(wù)邏輯要求并不高,只是套一個(gè)具有瀏覽器屬性的運(yùn)行環(huán)境即可,因此,單獨(dú)為此配置C++、C# 開(kāi)發(fā)人員將無(wú)形中提升更多項(xiàng)目成本。
為此,我們引入了Electron框架:現(xiàn)有的前端開(kāi)發(fā)人員能在不學(xué)習(xí)其他語(yǔ)言的情況下,直接搞定上述需求,這就是Electron 為我們帶來(lái)的價(jià)值。
三、為什么選擇 Electron?(Electron的出現(xiàn)為前端開(kāi)發(fā)者謀得了一份好差事)
可以這么說(shuō),Electron這個(gè)框架讓網(wǎng)路里流傳很廣的一句話(huà)不再是玩笑:“不要和老夫說(shuō)什么C++、Java,老夫行走江湖就一把JS,遇到需求擼起袖子就是干”。Electron可以幫助前端開(kāi)發(fā)者在不需要學(xué)習(xí)其他語(yǔ)言和技能的情況下,快速開(kāi)發(fā)跨平臺(tái)桌面應(yīng)用。
Electron的出現(xiàn)將蠶食很大一部分桌面客戶(hù)端領(lǐng)域的市場(chǎng)份額,鑒于它的跨平臺(tái)特性,在不同系統(tǒng)之間僅需少量的優(yōu)化工作。可想而知,這個(gè)成本到底有多低。
在開(kāi)發(fā)的體驗(yàn)上,Electron是基于"Chromium"和"Node.js"的,所以幾乎所有的Node.js模塊都可以在Electron上運(yùn)行,并很容易使用“npm”搭積木的方式快速交付一個(gè)產(chǎn)品。
四、大型應(yīng)用使用Electron框架的成功案例
1. SpreadJS純前端表格控件
SpreadJS 是一款基于 HTML5 的純前端電子表格控件,以“高速低耗、高度類(lèi)似Excel、可無(wú)限擴(kuò)展”為產(chǎn)品特色,提供移動(dòng)跨平臺(tái)和瀏覽器支持,同時(shí)滿(mǎn)足 .NET、Java、App 等應(yīng)用程序中的 Web Excel 組件開(kāi)發(fā)、數(shù)據(jù)填報(bào)、在線文檔、圖表公式聯(lián)動(dòng)、類(lèi) Excel UI 設(shè)計(jì)等業(yè)務(wù)場(chǎng)景,在數(shù)據(jù)可視化、Excel 導(dǎo)入導(dǎo)出、公式引用、數(shù)據(jù)綁定、框架集成等場(chǎng)景下無(wú)需大量代碼開(kāi)發(fā)和測(cè)試,極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。
2. WebTorrent
WebTorrent,作為第一個(gè)在瀏覽器中運(yùn)行的torrent客戶(hù)端,是一個(gè)完全由JavaScript編寫(xiě)并使用WebRTC進(jìn)行點(diǎn)對(duì)點(diǎn)傳輸?shù)目蛻?hù)端應(yīng)用。無(wú)需任何插件,擴(kuò)展或安裝,WebTorrent將用戶(hù)鏈接到分散的瀏覽器到瀏覽器網(wǎng)絡(luò),以確保有效的文件傳輸。
WebTorrent使用Electron框架開(kāi)發(fā),使其盡可能輕量、無(wú)廣告且開(kāi)源。此外,使用Electron還有助于流式傳輸,并充當(dāng)混合客戶(hù)端,將應(yīng)用程序連接到所有流行BitTorrent和WebTorrent網(wǎng)絡(luò)。
3. WordPress
WordPress 桌面是一個(gè)使用了Electron和React作為框架的桌面應(yīng)用程序,提供無(wú)縫的跨平臺(tái)體驗(yàn),允許用戶(hù)專(zhuān)注于他們的內(nèi)容和設(shè)計(jì),而不會(huì)被任何瀏覽器標(biāo)簽所分心。
4. Slack
Slack采用了Electron框架構(gòu)建,鑒于其高性能表現(xiàn)和無(wú)框架外觀,將帶來(lái)與瀏覽器完全不同的體驗(yàn)方式。對(duì)于尋求更集中的工作空間的團(tuán)隊(duì)來(lái)說(shuō),Slack Desktop絕對(duì)是最適合的應(yīng)用程序之一。雖然Slack Desktop融合了很多技術(shù),但大多數(shù)資源文件和代碼都是遠(yuǎn)程加載的,它們結(jié)合了Chromium的渲染引擎和Node.js運(yùn)行時(shí)和模塊系統(tǒng)。
5. WhatsApp
WhatsApp作為下載量最高的Messenger應(yīng)用程序,也是基于Electron框架構(gòu)建的。Electron幫助WhatsApp開(kāi)發(fā)人員以低廉的成本完成了幾乎所有工作,并通過(guò)更加簡(jiǎn)化和創(chuàng)新的技術(shù),為用戶(hù)帶來(lái)全新的桌面體驗(yàn)方式。
Electron 架構(gòu)實(shí)現(xiàn)
Electron基本文件結(jié)構(gòu)
Electron有一個(gè)基本的文件結(jié)構(gòu),類(lèi)似于我們?cè)趧?chuàng)建網(wǎng)頁(yè)時(shí)使用的文件結(jié)構(gòu):
electron-quick-start
- index.html 這是一個(gè)HTML5網(wǎng)頁(yè),是一個(gè)渲染器進(jìn)程,在加載的時(shí)候會(huì)渲染index.html頁(yè)面
- main.js 創(chuàng)建窗口并處理系統(tǒng)事件
- package.json 是我們應(yīng)用程序的啟動(dòng)腳本。它將在主進(jìn)程中運(yùn)行,并包含有關(guān)應(yīng)用程序的所有信息
Electron的架構(gòu)主要分為兩部分:主進(jìn)程和渲染進(jìn)程
回顧以往的web開(kāi)發(fā),我們的代碼,無(wú)論是HTML、CSS還是Javascript,都是運(yùn)行在瀏覽器沙盒中的,我們無(wú)法越過(guò)瀏覽器的權(quán)限訪問(wèn)系統(tǒng)本身的資源,代碼的能力被限制在了瀏覽器中。瀏覽器之所以這么做,是為了安全的考慮。設(shè)想一下,我們?cè)谑褂脼g覽器的時(shí)候,會(huì)打開(kāi)各式各樣不同來(lái)源的網(wǎng)站,如果JavaScript代碼有能力訪問(wèn)并操作本地操作系統(tǒng)的資源,那將是多么可怕的事情。
假設(shè):你在某天不小心打開(kāi)了一個(gè)惡意的網(wǎng)站,可能你存儲(chǔ)在硬盤(pán)上的文件就被偷走了(都用不著去修電腦)。但我們要開(kāi)發(fā)的是桌面應(yīng)用程序,如果無(wú)法訪問(wèn)到本地的資源肯定是不行的。Electron將nodejs巧妙的融合了進(jìn)來(lái),讓nodejs作為整個(gè)程序的管家。管家擁有較高的權(quán)限,可以訪問(wèn)和操作本地資源,使用原本在瀏覽器中不提供的高級(jí)API。同時(shí)管家也管理著渲染進(jìn)程窗口的創(chuàng)建和銷(xiāo)毀。所以,我們將這個(gè)管家稱(chēng)之為主進(jìn)程。在使用Electron開(kāi)發(fā)的程序中,會(huì)使用main.js作為程序的主入口,該文件內(nèi)代碼執(zhí)行的內(nèi)容,就是主進(jìn)程中執(zhí)行的內(nèi)容。
主進(jìn)程
主進(jìn)程控制應(yīng)用程序的生命周期。Electron 用來(lái)運(yùn)行 package.json 的 main 腳本的進(jìn)程被稱(chēng)為主進(jìn)程。 在主進(jìn)程中運(yùn)行的腳本通過(guò)創(chuàng)建web頁(yè)面來(lái)展示用戶(hù)界面。它內(nèi)置了完整的Node.js API,主要用于打開(kāi)對(duì)話(huà)框以及創(chuàng)建渲染進(jìn)程。此外,主進(jìn)程還負(fù)責(zé)處理與其他操作系統(tǒng)交互、啟動(dòng)和退出應(yīng)用程序。
主進(jìn)程就像是應(yīng)用程序的管家,負(fù)責(zé)管理整個(gè)應(yīng)用程序的生命周期以及所有渲染進(jìn)程的創(chuàng)建。
按照慣例,主進(jìn)程位于名為main.js的文件中,你可以通過(guò)在package.json文件中修改配置屬性來(lái)更改主進(jìn)程文件。
比如,我們可以打開(kāi)package.json并更改配置屬性:
“main”: “main.js”, -> “main”: “mainTest.js”,請(qǐng)注意,Electron有且只有一個(gè)主進(jìn)程。且主進(jìn)程銷(xiāo)毀時(shí),所有渲染進(jìn)程也將一并銷(xiāo)毀。在chrome瀏覽器的默認(rèn)策略下,每一個(gè)tab都是獨(dú)立的進(jìn)程,Electron也正是利用了這一策略。
渲染進(jìn)程
渲染進(jìn)程是應(yīng)用程序中的瀏覽器窗口。與主進(jìn)程不同,Electron可以有許多渲染進(jìn)程,且每個(gè)進(jìn)程都是獨(dú)立的。由于 Electron 使用了 Chromium 來(lái)展示web 頁(yè)面,所以 Chromium 的多進(jìn)程架構(gòu)也被使用到。 每個(gè)Electron中的 web 頁(yè)面運(yùn)行在它自己的渲染進(jìn)程中。
正是因?yàn)槊總€(gè)渲染進(jìn)程都是獨(dú)立的,因此一個(gè)崩潰不會(huì)影響另外一個(gè),這些要?dú)w功于Chromium的多進(jìn)程架構(gòu)。
如何保持進(jìn)程通信?
即便Electron中的所有進(jìn)程同時(shí)存在并保持獨(dú)立運(yùn)行,但他們?nèi)匀恍枰阅撤N方式進(jìn)行溝通,尤其是在他們負(fù)責(zé)不同任務(wù)的時(shí)候。
為了保持進(jìn)程通信,Electron有一個(gè)進(jìn)程間通信系統(tǒng)(IPC也就是內(nèi)部進(jìn)程通信)。您可以使用IPC在主進(jìn)程和渲染進(jìn)程之間傳遞信息。
// 在主進(jìn)程中Electron 進(jìn)程通信的實(shí)現(xiàn)方式:
- 主進(jìn)程使用 BrowserWindow 實(shí)例創(chuàng)建頁(yè)面。每個(gè) BrowserWindow 實(shí)例都在自己的渲染進(jìn)程里運(yùn)行頁(yè)面。 當(dāng)一個(gè)BrowserWindow 實(shí)例被銷(xiāo)毀后,相應(yīng)的渲染進(jìn)程也會(huì)被終止。
- 主進(jìn)程管理所有的web頁(yè)面和它們對(duì)應(yīng)的渲染進(jìn)程。 每個(gè)渲染進(jìn)程都是獨(dú)立的,它只關(guān)心它所運(yùn)行的 web頁(yè)面。
- 在頁(yè)面中調(diào)用與 GUI 相關(guān)的原生 API 是不被允許的,因?yàn)樵?web 頁(yè)面里操作原生的GUI 資源是非常危險(xiǎn)的,而且容易造成資源泄露。 如果你想在 web 頁(yè)面里使用 GUI 操作,其對(duì)應(yīng)的渲染進(jìn)程必須與主進(jìn)程進(jìn)行通訊,請(qǐng)求主進(jìn)程進(jìn)行相關(guān)的 GUI 操作。
說(shuō)句題外話(huà):在兩個(gè)網(wǎng)頁(yè)(渲染進(jìn)程)間共享數(shù)據(jù)最簡(jiǎn)單的方法是使用瀏覽器中已經(jīng)實(shí)現(xiàn)的 HTML5 API。 其中比較好的方案是用 Storage API, localStorage,sessionStorage 或者 IndexedDB,但這些不是今天的主題。
如何構(gòu)建 Electron系統(tǒng)架構(gòu)?
為了降低構(gòu)建整個(gè) Chromium 帶來(lái)的復(fù)雜度,Electron通過(guò)libchromiumcontent 來(lái)訪問(wèn) Chromium 的Content API。libchromiumcontent 是一個(gè)獨(dú)立的、引入了 Chromium Content 模塊及其所有依賴(lài)的共享庫(kù)。用戶(hù)不需要一個(gè)強(qiáng)勁的機(jī)器來(lái)構(gòu)建Electron。
Electron只用了Chromium的渲染庫(kù)而不是其全部組件。這使得升Chromium更加容易,但也意味著Electron缺少了Google Chrome里的一些瀏覽器相關(guān)的特性。
打包
原來(lái)打包步驟略微繁瑣,如今由于社區(qū)發(fā)展,產(chǎn)生了很多優(yōu)秀的打包工具,讓我們可以不用關(guān)注很多細(xì)節(jié),(比如asar)
我們僅需做的 :將app 的目錄結(jié)構(gòu)整理好,提供對(duì)應(yīng)的資源,如icon等,然后使用工具制作鏡像即可將資源打包成為各個(gè)平臺(tái)下的APP應(yīng)用。
打包工具的選擇
通常情況下,我們選擇Electron-builder (跨平臺(tái)支持性較好,上手成本低)
Electron 快速上手實(shí)踐
這里我準(zhǔn)備了一個(gè)演示,這個(gè)演示我將以SpreadJS的一個(gè)應(yīng)用為例,展示如何將Web應(yīng)用轉(zhuǎn)換為Electron桌面應(yīng)用。
我這里使用electron-builder進(jìn)行項(xiàng)目文件的打包,您可以直接在項(xiàng)目根目錄通過(guò) npx electron-builder命令執(zhí)行打包命令。
項(xiàng)目打包過(guò)程可能需要些時(shí)間,在這期間,我向您介紹一下Electron 打包的配置文件,您可以根據(jù)您的實(shí)際情況配置如下文件以滿(mǎn)足您的需求。
"build": { "appId": "your.id", // appid "productName": "程序名稱(chēng)",// 程序名稱(chēng) "files": [ // 打包需要的不過(guò)濾的文件 "build/**/*", "main.js", "node_modules/**/*" ], "directories": { "output": "./dist-out", // 打包輸出的目錄 "app": "./", // package所在路徑 "buildResources": "assets" }, "nsis": { "oneClick": false, // 是否需要點(diǎn)擊安裝,自動(dòng)更新需要關(guān)掉 "allowToChangeInstallationDirectory":true, //是否能夠選擇安裝路徑 "perMachine": true // 是否需要輔助安裝頁(yè)面 }, "win": { "target": [ { "target": "nsis", // 輸出目錄的方式 "arch": [ // 輸出的配置ia32或者x64/x86 "x64" } ], "publish": [ // 自動(dòng)更新的配置 { "provider": "generic", // 自己配置更新的服務(wù)器要選generic "url":"http://127.0.0.1:8080/updata/" //更新配置的路徑 } } }緩慢的打包進(jìn)程結(jié)束后,您應(yīng)該可以在項(xiàng)目目錄中的build目錄看到生成的exe文件。
點(diǎn)擊安裝,它就像一個(gè)普通的桌面應(yīng)用程序一樣開(kāi)始了安裝進(jìn)程。(這里的軟件名稱(chēng)和軟件logo都是我們項(xiàng)目中配置好的)。
安裝完成后,打開(kāi)程序,這里我們可以看到打包好的應(yīng)用和在Web端訪問(wèn)時(shí)的效果別無(wú)二致,同時(shí)也能夠像其他桌面應(yīng)用程序一樣,支持離線使用。
以上就是教程的全部?jī)?nèi)容了,最后,有什么問(wèn)題歡迎討論,如果對(duì)您有幫助,歡迎點(diǎn)贊/關(guān)注/留言友愛(ài)三連走起來(lái)~
總結(jié)
以上是生活随笔為你收集整理的android开发入门与实践_Electron从入门到实践,前端开发者开发桌面App的最佳选择...的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: python写excel标记文字颜色_p
- 下一篇: python文本提取_使用Python从