Electron踩坑日記-2

Mr、Kr發表於2024-09-02

Electron踩坑日記-2

Electron + vue專案渲染程序如何與邏輯程序互動?

假設有這樣一個需求,在頁面上有一個A按鈕,我現在需要點選A,然後執行某段nodejs的程式碼.
我們知道,在瀏覽器環境下是無法執行nodejs程式碼的,因此我們需要呼叫到electron給予的能力.下文,我將演示如何編寫相關程式碼.

在main.js設定

function createWindow() {
  const win = new BrowserWindow({
    transparent: true,
    frame: false,
    titleBarStyle: "hidden",
    ......其他設定

    webPreferences: {
      nodeIntegration: true, // 允許在渲染程序中使用 Node.js
      contextIsolation: false,
      devTools: false, // 禁用開發者工具
      extensions: false, // 如果有這個選項，可以設定為 false 禁用擴充套件
    },
  });
}

可以看到,我將 nodeIntegration: true, 允許在渲染程序中使用 Node.js將 contextIsolation: false,允許上下文,只有先這樣設定,vue專案才可以使用electron渲染程序和邏輯程序的通訊的能力

然後我們只需要在main.js中註冊相關的函式例如

ipcMain.handle("get-user-data-path", async () => {
  return app.getPath("userData");
});

那麼我們該怎麼在vue專案中呼叫到呢
很簡單

const { ipcRenderer } = window.require("electron"); //引入ipcRenderer

const deleteFile = async (type, file) => {
  const userDataPath = await ipcRenderer.invoke ("get-user-data-path"); //觸發main.js中編寫的函式
};

這樣,就實現了vue檔案和electron的通訊,只需要在

ipcMain.handle("get-user-data-path", async () => {
  return app.getPath("userData");
});

這個函式中進一步引入執行nodejs的xxx.js檔案.然後呼叫他即可實現了

相關文章