建站
咨詢
售后
建站咨詢
新聞中心
之前有朋友希望我基于H5-Dooring開發(fā)一款桌面端應用, 最近剛好有時間, 就花了小半天時間從零使用electron開發(fā)了桌面端的離線軟件Dooring-electron.
霞山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！
因為之前用electron比較少, 今天剛好學了一下, 也基本把前后端打通了, 文末我會放dooring-electron的github地址供大家參考學習. 如果大家有更好的方案, 可以隨時和我討論.
dooring-electron架構(gòu)介紹
熟悉Electron的朋友也許知道, Electron繼承了來自 Chromium 的多進程架構(gòu)，這使得Electron在架構(gòu)上非常類似于一個現(xiàn)代的網(wǎng)頁瀏覽器。我們可以控制兩種類型的進程：主進程和渲染器。
每個 Electron 應用都有一個單一的主進程，作為應用程序入口。主進程在 Node 環(huán)境中運行，我們可以使用所有 Node 的能力。
那么主進程中我們可以做些什么呢? 主進程的主要目的是使用 BrowserWindow 模塊創(chuàng)建和管理應用程序窗口。
- BrowserWindow 類的每個實例創(chuàng)建一個應用程序窗口，且在單獨的渲染器進程中加載一個網(wǎng)頁。我們可從主進程用 window 的 webContent 對象與網(wǎng)頁內(nèi)容進行交互。
有了以上基礎, 我畫了一張dooring-electron 的簡單架構(gòu)圖方便大家理解:
如果相對electron有更多直觀理解的, 也可以參考其官網(wǎng):
https://www.electronjs.org/
dooring-electron的技術(shù)棧筆者使用的是:
koa2 + electron + react + umi3
接下來我將給大家介紹如何學習使用dooring-electron.
dooring-electron安裝與使用
在安裝之前我們先來體驗一下.
(編輯器界面)
(預覽界面)
(ide界面)
安裝
下載代碼
- git clone git@github.com:MrXujiang/dooring-electron-lowcode.git
安裝依賴包
- yarn install
- or
- cnpm install
本地啟動
本地啟動應用
- yarn debug:main
項目打包
構(gòu)建測試包
- npm run pack // 僅輸出包,方便測試
構(gòu)建安裝包
1.執(zhí)行前端資源打包
- npm run build // react資源打包
2.運行electron構(gòu)建命令,輸出安裝包
- npm run dist-mac // mac包
- npm run dist-win // windows包
- npm run dist-linux // linux包
- npm run dist-all // 所有平臺包
各配置規(guī)則可以參考官方文檔：
https://www.electron.build/configuration/configuration
安裝案例
筆者以打包輸出的dist-mac為例來演示如何在mac上安裝. 首先我們找到打包后的release目錄, 然后拖拽進applications即可:
window 和 linux 版本的安裝也很簡單, 大家可以親自嘗試一下.
如何快速學習electron
這里我來談談如何快速上手使用electron, 首先使用electron前大家最好具備如下知識基礎:
- html + js + css 基礎
- 熟悉nodejs基本api
有了以上基礎, 我們學習electron將非常迅速. 對于electron本身, 我們只要學習其官網(wǎng)的api介紹(按需學習)和demo即可.
本文轉(zhuǎn)載自微信公眾號「趣談前端」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系趣談前端公眾號。
本文題目：從零使用electron搭建桌面端Dooring
文章URL：http://www.5511xx.com/article/dpesooi.html
