基于Electron快速將任意網站打包成跨平臺的桌面端軟件
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 功能及特點：
- 快速轉換：WebDesk可以在幾分鐘內將網頁轉換為桌面應用，無需編碼或復雜的設置。
- 多平臺支持：可以將網頁轉化成 Window 桌面應用、macOs桌面應用。
- 廣泛的應用場景：無論是保存在線課程、工作文檔還是個人網站，WebDesk都是將其轉換為桌面應用的理想選擇。
Webdesk 缺點：
- 無代碼簽名：安裝時可能因未簽名而被系統提示存在安全隱患。
- 體積過大：安裝包體積約為 80MB，相對較大。
- 內存占用高：運行時內存占用較高。
- 無法離線使用：需要網絡連接才能使用，不支持離線模式。
Webdesk 未來規劃：
- 代碼簽名：增加自動或自定義代碼簽名功能，提高安裝安全性。
- 應用平臺上架：實現從構建到平臺分發的完整流程。
- 體積減小：優化安裝包，減小體積，降低內存占用。
- 離線使用：增加離線使用功能，無需網絡即可使用。
- 多語言支持：增加多語言支持。
