electron桌面端Dooring搭建實(shí)戰(zhàn)
關(guān)注并將「趣談前端」設(shè)為星標(biāo)
每早08:30按時推送技術(shù)干貨/優(yōu)秀開源/技術(shù)思維
之前有朋友希望我基于H5-Dooring開發(fā)一款桌面端應(yīng)用, 最近剛好有時間, 就花了小半天時間從零使用electron開發(fā)了桌面端的離線軟件Dooring-electron.
因?yàn)橹坝?code style="font-size: 14px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);word-break: break-all;">electron比較少, 今天剛好學(xué)了一下, 也基本把前后端打通了, 文末我會放dooring-electron的github地址供大家參考學(xué)習(xí). 如果大家有更好的方案, 可以隨時和我討論.
dooring-electron架構(gòu)介紹
熟悉Electron的朋友也許知道,?Electron繼承了來自?Chromium?的多進(jìn)程架構(gòu)，這使得Electron在架構(gòu)上非常類似于一個現(xiàn)代的網(wǎng)頁瀏覽器。我們可以控制兩種類型的進(jìn)程：主進(jìn)程和渲染器。
每個?Electron?應(yīng)用都有一個單一的主進(jìn)程，作為應(yīng)用程序入口。主進(jìn)程在?Node?環(huán)境中運(yùn)行，我們可以使用所有?Node?的能力。
那么主進(jìn)程中我們可以做些什么呢??主進(jìn)程的主要目的是使用 BrowserWindow 模塊創(chuàng)建和管理應(yīng)用程序窗口。
BrowserWindow?類的每個實(shí)例創(chuàng)建一個應(yīng)用程序窗口，且在單獨(dú)的渲染器進(jìn)程中加載一個網(wǎng)頁。我們可從主進(jìn)程用 window 的 webContent 對象與網(wǎng)頁內(nèi)容進(jìn)行交互。
有了以上基礎(chǔ), 我畫了一張dooring-electron?的簡單架構(gòu)圖方便大家理解:
如果相對electron有更多直觀理解的, 也可以參考其官網(wǎng):
https://www.electronjs.org/
dooring-electron的技術(shù)棧筆者使用的是:
koa2 + electron + react + umi3
接下來我將給大家介紹如何學(xué)習(xí)使用dooring-electron.
dooring-electron安裝與使用
在安裝之前我們先來體驗(yàn)一下.?
(編輯器界面)
(預(yù)覽界面)
(ide界面)
安裝
下載代碼
git?clone[email protected]:MrXujiang/dooring-electron-lowcode.git
安裝依賴包
yarn?install
or
cnpm?install
本地啟動
本地啟動應(yīng)用
yarn?debug:main
項(xiàng)目打包
構(gòu)建測試包
npm?run?pack???//?僅輸出包,方便測試
構(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???//?所有平臺包
各配置規(guī)則可以參考官方文檔：
https://www.electron.build/configuration/configuration
安裝案例
筆者以打包輸出的dist-mac為例來演示如何在mac上安裝. 首先我們找到打包后的release目錄, 然后拖拽進(jìn)applications即可:
window?和?linux?版本的安裝也很簡單, 大家可以親自嘗試一下.
如何快速學(xué)習(xí)electron
這里我來談?wù)勅绾慰焖偕鲜质褂?code style="font-size: 14px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(30, 107, 184);background-color: rgba(27, 31, 35, 0.05);word-break: break-all;">electron, 首先使用electron前大家最好具備如下知識基礎(chǔ):
html + js + css 基礎(chǔ) 熟悉nodejs基本api
有了以上基礎(chǔ), 我們學(xué)習(xí)electron將非常迅速. 對于electron本身, 我們只要學(xué)習(xí)其官網(wǎng)的api介紹(按需學(xué)習(xí))和demo即可. 如果有不懂的地方, 也歡迎隨時和我交流. 畢竟我也在剛?cè)腴T學(xué)習(xí)的路上haha.
Dooring最新更新指南
最近H5-Dooring可視化搭建平臺也在持續(xù)推迭代, 數(shù)據(jù)源已基本搭建完成, 后續(xù)還會按照更智能化的方向. 一下即是最近的更新日志:
優(yōu)化模版庫 頁面全局配置添加微信分享icon 組件支持動畫, 添加10+動畫效果 接入微信生態(tài), 支持H5分享微信好友和朋友圈 優(yōu)化友鏈樣式
國內(nèi)lowcode平臺仍然有很長的路要走, 期待大家一起努力??!
更多?低代碼?/?可視化?相關(guān)的技術(shù)分享和實(shí)現(xiàn), 歡迎?微信?搜索?趣談前端?學(xué)習(xí)探索.
dooring-electron github地址:
https://github.com/MrXujiang/dooring-electron-lowcode
Dooring技術(shù)文檔
網(wǎng)址：http://h5.dooring.cn/docz
Dooring視頻教程
?? 看完三件事
如果你覺得這篇內(nèi)容對你挺有啟發(fā)，我想邀請你幫我三個小忙：
點(diǎn)個【在看】，或者分享轉(zhuǎn)發(fā)，讓更多的人也能看到這篇內(nèi)容
關(guān)注公眾號【趣談前端】，不定期分享?前端工程化?/?可視化?/?低代碼?等技術(shù)文章。
Dooring可視化搭建平臺數(shù)據(jù)源設(shè)計(jì)剖析
canvas圖像識取技術(shù)以及智能化設(shè)計(jì)的思考
點(diǎn)個在看你最好看
