electron 桌面端 Dooring 搭建實戰
之前有朋友希望我基於H5-Dooring開發一款桌面端應用, 最近剛好有時間, 就花了小半天時間從零使用electron開發了桌面端的離線軟件Dooring-electron.
因爲之前用electron比較少, 今天剛好學了一下, 也基本把前後端打通了, 文末我會放dooring-electron的github地址供大家參考學習. 如果大家有更好的方案, 可以隨時和我討論.
dooring-electron 架構介紹
熟悉Electron的朋友也許知道, Electron繼承了來自 Chromium 的多進程架構，這使得Electron在架構上非常類似於一個現代的網頁瀏覽器。我們可以控制兩種類型的進程：主進程和渲染器。
每個 Electron 應用都有一個單一的主進程，作爲應用程序入口。主進程在 Node 環境中運行，我們可以使用所有 Node 的能力。
那麼主進程中我們可以做些什麼呢? 主進程的主要目的是使用 BrowserWindow 模塊創建和管理應用程序窗口。
BrowserWindow 類的每個實例創建一個應用程序窗口，且在單獨的渲染器進程中加載一個網頁。我們可從主進程用 window 的 webContent 對象與網頁內容進行交互。
有了以上基礎, 我畫了一張dooring-electron 的簡單架構圖方便大家理解:
如果相對electron有更多直觀理解的, 也可以參考其官網:
https://www.electronjs.org/
dooring-electron的技術棧筆者使用的是:
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項目打包
構建測試包
npm run pack // 僅輸出包,方便測試構建安裝包
- 執行前端資源打包
npm run build // react資源打包- 運行 electron 構建命令, 輸出安裝包
npm run dist-mac // mac包
npm run dist-win // windows包
npm run dist-linux // linux包
npm run dist-all // 所有平臺包各配置規則可以參考官方文檔：
https://www.electron.build/configuration/configuration
安裝案例
筆者以打包輸出的dist-mac爲例來演示如何在mac上安裝. 首先我們找到打包後的release目錄, 然後拖拽進applications即可:
**window **和 **linux **版本的安裝也很簡單, 大家可以親自嘗試一下.
如何快速學習 electron
這裏我來談談如何快速上手使用electron, 首先使用electron前大家最好具備如下知識基礎:
-
html + js + css 基礎
-
熟悉 nodejs 基本 api
有了以上基礎, 我們學習electron將非常迅速. 對於electron本身, 我們只要學習其官網的 api 介紹 (按需學習) 和demo即可. 如果有不懂的地方, 也歡迎隨時和我交流. 畢竟我也在剛入門學習的路上 haha.
Dooring 最新更新指南
最近 H5-Dooring 可視化搭建平臺也在持續推迭代, 數據源已基本搭建完成, 後續還會按照更智能化的方向. 一下即是最近的更新日誌:
-
優化模版庫
-
頁面全局配置添加微信分享 icon
-
組件支持動畫, 添加 10 + 動畫效果
-
接入微信生態, 支持 H5 分享微信好友和朋友圈
-
優化友鏈樣式
國內 lowcode 平臺仍然有很長的路要走, 期待大家一起努力💪!
更多 低代碼 / 可視化 相關的技術分享和實現, 歡迎 微信 搜索 趣談前端 學習探索.
dooring-electron github 地址:
https://github.com/MrXujiang/dooring-electron-lowcode
Dooring 技術文檔
網址：http://h5.dooring.cn/docz
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/swzyz8Kuu6Hv0CAt-hHYyw