基于Electron快速將任意網(wǎng)站打包成跨平臺的桌面端軟件
hi, 大家好, 我是徐小夕.
之前有些用戶和朋友希望我基于H5-Dooring開發(fā)一款桌面端應(yīng)用, 最近剛好有時間, 就花了小半天時間使用electron開發(fā)了桌面端的軟件Dooring-electron。
當(dāng)然這篇文章不會介紹如何從零使用 electron , 而是會提供一種方案, 幫助大家快速的將線上網(wǎng)站轉(zhuǎn)化為 electron 應(yīng)用。
文章最后我也會分享一款我朋友開發(fā)的在線工具, 可以不寫一行代碼, 輕松把線上網(wǎng)站轉(zhuǎn)化為桌面端軟件。
electron的一些知識
熟悉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 類的每個實例創(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/。
實現(xiàn)將線上網(wǎng)站打包成桌面端軟件
我們知道如果想要加載第三方網(wǎng)絡(luò)資源, 可以使用 mainWindow.loadURL(url) 來實現(xiàn), 所以只需要將網(wǎng)址放到 loadURL 方法中讓 electron 打開即可:
const mainWindow = new BrowserWindow({
maximizable: true,
show: false,
title: "H5-dooring網(wǎng)站制作平臺",
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');同時如果想要控制網(wǎng)站打開新的頁面時的窗口尺寸, 我們只需要對窗口進(jìn)行監(jiān)聽, 來動態(tài)設(shè)置新窗口的尺寸即可:
mainWindow.webContents.setWindowOpenHandler((details) => {
const base = {
fullscreen: false,
skipTaskbar: true,
center: true,
maximizable: true,
autoHideMenuBar: false,//自動隱藏菜單欄
// icon: iconPath,// 窗口圖標(biāo)
parent: null ,//指定父窗口
resizable: true,
webPreferences: {//網(wǎng)頁功能設(shè)置。
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',//允許新窗口被創(chuàng)建
overrideBrowserWindowOptions: {//允許自定義創(chuàng)建的窗口參數(shù)
...base,
...h5Win,
}
}
}
if (details.url.indexOf('/ide') > -1) {
return {
action: 'allow',//允許新窗口被創(chuàng)建
overrideBrowserWindowOptions: {//允許自定義創(chuàng)建的窗口參數(shù)
...base,
...otherWin,
}
}
}
if (details.url.indexOf('/h5_plus') > -1) {
return {
action: 'allow',//允許新窗口被創(chuàng)建
overrideBrowserWindowOptions: {//允許自定義創(chuàng)建的窗口參數(shù)
...base,
width: 1500,
height: 860
}
}
}
return {
action: 'allow',//允許新窗口被創(chuàng)建
overrideBrowserWindowOptions: {//允許自定義創(chuàng)建的窗口參數(shù)
...base,
...otherWin,
}
}
})對于網(wǎng)站打包的配置 electron 文檔上介紹的很詳細(xì), 這里我就不一一介紹了, 大家可以在 github 上參考學(xué)習(xí):
- https://github.com/MrXujiang/h5-dooring-electron-demo。
不用寫一行代碼, 輕松將你的網(wǎng)站打包成桌面端軟件
在線地址：https://webdesk.pigjs.com/builder。
我親自體驗了一下, 使用起來還是相當(dāng)方便的, 不需要寫一行代碼就可以將網(wǎng)站轉(zhuǎn)化的桌面端軟件, 以下是一些功能優(yōu)缺點(diǎn)介紹.
Webdesk 功能及特點(diǎn)：
- 快速轉(zhuǎn)換：WebDesk可以在幾分鐘內(nèi)將網(wǎng)頁轉(zhuǎn)換為桌面應(yīng)用，無需編碼或復(fù)雜的設(shè)置。
- 多平臺支持：可以將網(wǎng)頁轉(zhuǎn)化成 Window 桌面應(yīng)用、macOs桌面應(yīng)用。
- 廣泛的應(yīng)用場景：無論是保存在線課程、工作文檔還是個人網(wǎng)站，WebDesk都是將其轉(zhuǎn)換為桌面應(yīng)用的理想選擇。
Webdesk 缺點(diǎn)：
- 無代碼簽名：安裝時可能因未簽名而被系統(tǒng)提示存在安全隱患。
- 體積過大：安裝包體積約為 80MB，相對較大。
- 內(nèi)存占用高：運(yùn)行時內(nèi)存占用較高。
- 無法離線使用：需要網(wǎng)絡(luò)連接才能使用，不支持離線模式。
Webdesk 未來規(guī)劃：
- 代碼簽名：增加自動或自定義代碼簽名功能，提高安裝安全性。
- 應(yīng)用平臺上架：實現(xiàn)從構(gòu)建到平臺分發(fā)的完整流程。
- 體積減小：優(yōu)化安裝包，減小體積，降低內(nèi)存占用。
- 離線使用：增加離線使用功能，無需網(wǎng)絡(luò)即可使用。
- 多語言支持：增加多語言支持。
