hi, 大家好, 我是徐小夕.

之前有些用戶和朋友希望我基于H5-Dooring開發一款桌面端應用, 最近剛好有時間, 就花了小半天時間使用electron開發了桌面端的軟件Dooring-electron.

當然這篇文章不會介紹如何從零使用 electron , 而是會提供一種方案, 幫助大家快速的將線上網站轉化為 electron 應用.

文章最后我也會分享一款我朋友開發的在線工具, 可以不寫一行代碼, 輕松把線上網站轉化為桌面端軟件.

electron的一些知識

熟悉Electron的朋友也許知道, Electron繼承了來自 Chromium 的多進程架構，這使得Electron在架構上非常類似于一個現代的網頁瀏覽器。我們可以控制兩種類型的進程：主進程和渲染器。

每個 Electron 應用都有一個單一的主進程，作為應用程序入口。主進程在 Node 環境中運行，我們可以使用所有 Node 的能力。

那么主進程中我們可以做些什么呢? 主進程的主要目的是使用 Browserwindow 模塊創建和管理應用程序窗口。

BrowserWindow 類的每個實例創建一個應用程序窗口，且在單獨的渲染器進程中加載一個網頁。 我們可從主進程用 window 的 webContent 對象與網頁內容進行交互。

有了以上基礎, 我畫了一張dooring-electron 的簡單架構圖方便大家理解:

想對electron有更多直觀理解的, 也可以參考其官網:

https://www.electronjs.org/

實現將線上網站打包成桌面端軟件

我們知道如果想要加載第三方網絡資源, 可以使用 mainWindow.loadURL(url) 來實現, 所以只需要將網址放到 loadURL 方法中讓 electron 打開即可:

const mainWindow = new BrowserWindow({ maximizable: true, show: false, title: "H5-dooring網站制作平臺", fullscreen: false, center: true, webPreferences: { preload: path.join(__dirname, 'preload.js'), enableRemoteModule: true, nodeIntegration: true, }, }); mainWindow.maximize(); mainWindow.setAutoHideMenuBar(true); mainWindow.loadURL('your website address');

同時如果想要控制網站打開新的頁面時的窗口尺寸, 我們只需要對窗口進行監聽, 來動態設置新窗口的尺寸即可:

mainWindow.webContents.setWindowOpenHandler((details) => { const base = { fullscreen: false, skipTaskbar: true, center: true, maximizable: true, autoHideMenuBar: false,//自動隱藏菜單欄 // icon: iconPath,// 窗口圖標 parent: null ,//指定父窗口 resizable: true, webPreferences: {//網頁功能設置。 webSecurity: false,//禁用同源策略 nodeIntegration: true, nodeIntegrationInWorker: true, enableRemoteModule: true, contextIsolation: false }, } const h5Win = { width: 1200, minWidth: 1200, minHeight: 775, height: 775, y: 60, } const otherWin = { width: 1200, minWidth: 1200, minHeight: 800, height: 800, y: 60, } if (details.url.indexOf('/preview') > -1) { return { action: 'allow',//允許新窗口被創建 overrideBrowserWindowOptions: {//允許自定義創建的窗口參數 ...base, ...h5Win, } } } if (details.url.indexOf('/ide') > -1) { return { action: 'allow',//允許新窗口被創建 overrideBrowserWindowOptions: {//允許自定義創建的窗口參數 ...base, ...otherWin, } } } if (details.url.indexOf('/h5_plus') > -1) { return { action: 'allow',//允許新窗口被創建 overrideBrowserWindowOptions: {//允許自定義創建的窗口參數 ...base, width: 1500, height: 860 } } } return { action: 'allow',//允許新窗口被創建 overrideBrowserWindowOptions: {//允許自定義創建的窗口參數 ...base, ...otherWin, } } })

對于網站打包的配置 electron 文檔上介紹的很詳細, 這里我就不一一介紹了, 大家可以在 github 上參考學習:

• https://github.com/MrXujiang/h5-dooring-electron-demo

不用寫一行代碼, 輕松將你的網站打包成桌面端軟件

在線地址：https://webdesk.pigjs.com/builder

我親自體驗了一下, 使用起來還是相當方便的, 不需要寫一行代碼就可以將網站轉化的桌面端軟件, 以下是一些功能優缺點介紹.

Webdesk 功能及特點：

1. 快速轉換：WebDesk可以在幾分鐘內將網頁轉換為桌面應用，無需編碼或復雜的設置
2. 多平臺支持：可以將網頁轉化成 Window 桌面應用、macOs桌面應用。
3. 廣泛的應用場景：無論是保存在線課程、工作文檔還是個人網站，WebDesk都是將其轉換為桌面應用的理想選擇。

Webdesk 缺點：

1. 無代碼簽名：安裝時可能因未簽名而被系統提示存在安全隱患。
2. 體積過大：安裝包體積約為 80MB，相對較大
3. 內存占用高：運行時內存占用較高
4. 無法離線使用：需要網絡連接才能使用，不支持離線模式

Webdesk 未來規劃：

1. 代碼簽名：增加自動或自定義代碼簽名功能，提高安裝安全性。
2. 應用平臺上架：實現從構建到平臺分發的完整流程
3. 體積減小：優化安裝包，減小體積，降低內存占用
4. 離線使用：增加離線使用功能，無需網絡即可使用
5. 多語言支持：增加多語言支持

更多 前端 / 低代碼 / 可視化 相關的技術分享和實現, 歡迎 微信 搜索 趣談前端 學習探索.