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

之前有些用戶和朋友希望我基于H5-Dooring開發(fā)一款桌面端應(yīng)用, 最近剛好有時(shí)間, 就花了小半天時(shí)間使用electron開發(fā)了桌面端的軟件Dooring-electron。

當(dāng)然這篇文章不會(huì)介紹如何從零使用 electron , 而是會(huì)提供一種方案, 幫助大家快速的將線上網(wǎng)站轉(zhuǎn)化為 electron 應(yīng)用。

文章最后我也會(huì)分享一款我朋友開發(fā)的在線工具, 可以不寫一行代碼, 輕松把線上網(wǎng)站轉(zhuǎn)化為桌面端軟件。

electron的一些知識(shí)

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

每個(gè) Electron 應(yīng)用都有一個(gè)單一的主進(jìn)程，作為應(yīng)用程序入口。主進(jìn)程在 Node 環(huán)境中運(yùn)行，我們可以使用所有 Node 的能力。

那么主進(jìn)程中我們可以做些什么呢? 主進(jìn)程的主要目的是使用 BrowserWindow 模塊創(chuàng)建和管理應(yīng)用程序窗口。

BrowserWindow 類的每個(gè)實(shí)例創(chuàng)建一個(gè)應(yīng)用程序窗口，且在單獨(dú)的渲染器進(jìn)程中加載一個(gè)網(wǎng)頁。我們可從主進(jìn)程用 window 的 webContent 對(duì)象與網(wǎng)頁內(nèi)容進(jìn)行交互。

有了以上基礎(chǔ), 我畫了一張dooring-electron 的簡(jiǎn)單架構(gòu)圖方便大家理解:

想對(duì)electron有更多直觀理解的, 也可以參考其官網(wǎng):

https://www.electronjs.org/。

實(shí)現(xiàn)將線上網(wǎng)站打包成桌面端軟件

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

const mainWindow = new BrowserWindow({
    maximizable: true,
    show: false,
    title: "H5-dooring網(wǎng)站制作平臺(tái)",
    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');

同時(shí)如果想要控制網(wǎng)站打開新的頁面時(shí)的窗口尺寸, 我們只需要對(duì)窗口進(jìn)行監(jiān)聽, 來動(dòng)態(tài)設(shè)置新窗口的尺寸即可:

mainWindow.webContents.setWindowOpenHandler((details) => {
    const base = {
      fullscreen: false,
      skipTaskbar: true,
      center: true,
      maximizable: true,
      autoHideMenuBar: false,//自動(dòng)隱藏菜單欄
      // 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, 
      }
    }
 })

對(duì)于網(wǎng)站打包的配置 electron 文檔上介紹的很詳細(xì), 這里我就不一一介紹了, 大家可以在 github 上參考學(xué)習(xí):

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

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

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

我親自體驗(yàn)了一下, 使用起來還是相當(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è)置。
• 多平臺(tái)支持：可以將網(wǎng)頁轉(zhuǎn)化成 Window 桌面應(yīng)用、macOs桌面應(yīng)用。
• 廣泛的應(yīng)用場(chǎng)景：無論是保存在線課程、工作文檔還是個(gè)人網(wǎng)站，WebDesk都是將其轉(zhuǎn)換為桌面應(yīng)用的理想選擇。

Webdesk 缺點(diǎn)：

• 無代碼簽名：安裝時(shí)可能因未簽名而被系統(tǒng)提示存在安全隱患。
• 體積過大：安裝包體積約為 80MB，相對(duì)較大。
• 內(nèi)存占用高：運(yùn)行時(shí)內(nèi)存占用較高。
• 無法離線使用：需要網(wǎng)絡(luò)連接才能使用，不支持離線模式。

Webdesk 未來規(guī)劃：

• 代碼簽名：增加自動(dòng)或自定義代碼簽名功能，提高安裝安全性。
• 應(yīng)用平臺(tái)上架：實(shí)現(xiàn)從構(gòu)建到平臺(tái)分發(fā)的完整流程。
• 體積減小：優(yōu)化安裝包，減小體積，降低內(nèi)存占用。
• 離線使用：增加離線使用功能，無需網(wǎng)絡(luò)即可使用。
• 多語言支持：增加多語言支持。