之前有朋友希望我基于H5-Dooring開(kāi)發(fā)一款桌面端應(yīng)用, 最近剛好有時(shí)間, 就花了小半天時(shí)間從零使用electron開(kāi)發(fā)了桌面端的離線(xiàn)軟件Dooring-electron.

因?yàn)橹坝胑lectron比較少, 今天剛好學(xué)了一下, 也基本把前后端打通了.

dooring-electron架構(gòu)介紹

熟悉Electron的朋友也許知道, Electron繼承了來(lái)自 Chromium 的多進(jìn)程架構(gòu)，這使得Electron在架構(gòu)上非常類(lèi)似于一個(gè)現(xiàn)代的網(wǎng)頁(yè)瀏覽器。我們可以控制兩種類(lèi)型的進(jìn)程：主進(jìn)程和渲染器。

每個(gè) Electron 應(yīng)用都有一個(gè)單一的主進(jìn)程，作為應(yīng)用程序入口。主進(jìn)程在 Node 環(huán)境中運(yùn)行，我們可以使用所有 Node 的能力。

那么主進(jìn)程中我們可以做些什么呢? 主進(jìn)程的主要目的是使用 BrowserWindow 模塊創(chuàng)建和管理應(yīng)用程序窗口。

• BrowserWindow 類(lèi)的每個(gè)實(shí)例創(chuàng)建一個(gè)應(yīng)用程序窗口，且在單獨(dú)的渲染器進(jìn)程中加載一個(gè)網(wǎng)頁(yè)。我們可從主進(jìn)程用 window 的 webContent 對(duì)象與網(wǎng)頁(yè)內(nèi)容進(jìn)行交互。

有了以上基礎(chǔ), 我畫(huà)了一張dooring-electron 的簡(jiǎn)單架構(gòu)圖方便大家理解:

如果相對(duì)electron有更多直觀理解的, 也可以參考其官網(wǎng):

??https://www.electronjs.org/??

dooring-electron的技術(shù)棧筆者使用的是:

koa2 + electron + react + umi3

接下來(lái)我將給大家介紹如何學(xué)習(xí)使用dooring-electron.

dooring-electron安裝與使用

在安裝之前我們先來(lái)體驗(yàn)一下.

(編輯器界面)

(預(yù)覽界面)

(ide界面)

安裝

下載代碼

git clone git@github.com:MrXujiang/dooring-electron-lowcode.git

安裝依賴(lài)包

yarn install
or
cnpm install

本地啟動(dòng)

本地啟動(dòng)應(yīng)用

yarn debug:main

項(xiàng)目打包

構(gòu)建測(cè)試包

npm run pack   // 僅輸出包,方便測(cè)試

構(gòu)建安裝包

執(zhí)行前端資源打包

npm run build  // react資源打包

運(yùn)行electron構(gòu)建命令,輸出安裝包

npm run dist-mac // mac包
npm run dist-win // windows包
npm run dist-linux // linux包
npm run dist-all   // 所有平臺(tái)包

各配置規(guī)則可以參考官方文檔：

??https://www.electron.build/configuration/configuration??

安裝案例

筆者以打包輸出的dist-mac為例來(lái)演示如何在mac上安裝. 首先我們找到打包后的release目錄, 然后拖拽進(jìn)applications即可:

window 和 linux 版本的安裝也很簡(jiǎn)單, 大家可以親自嘗試一下.

如何快速學(xué)習(xí)electron

這里我來(lái)談?wù)勅绾慰焖偕鲜质褂胑lectron, 首先使用electron前大家最好具備如下知識(shí)基礎(chǔ):

• html + js + css 基礎(chǔ)
• 熟悉nodejs基本api

有了以上基礎(chǔ), 我們學(xué)習(xí)electron將非常迅速. 對(duì)于electron本身, 我們只要學(xué)習(xí)其官網(wǎng)的api介紹(按需學(xué)習(xí))和demo即可. 如果有不懂的地方, 也歡迎隨時(shí)和我交流. 畢竟我也在剛?cè)腴T(mén)學(xué)習(xí)的路上haha.

本文轉(zhuǎn)載自微信公眾號(hào)「趣談前端」