Electron 在 BrowserWindow 中展示文件

2023-02-16 17:15 更新

概覽

在 macOS 上，您可以為應(yīng)用程序中的任何窗口設(shè)置一個代表文件。 代表文件的圖標(biāo)將顯示在標(biāo)題欄中，當(dāng)用戶 Command-單擊 或 Control-單擊，一個帶有文件路徑的彈出窗口將會顯示。


注意：上面的屏幕截圖是一個示例，其中此功能用于指示 Atom 文本編輯器中當(dāng)前打開的文件。

您還可以設(shè)置窗口的編輯狀態(tài)，以便文件圖標(biāo)可以指示該窗口中的文檔是否已修改。

要設(shè)置窗口的代表文件，您可以使用 BrowserWindow.setRepresentedFilename 和 BrowserWindow.setDocumentEdited API。

示例

 main.js index.html  
const { app, BrowserWindow } = require('electron')
const os = require('os');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  const win = new BrowserWindow()

  win.setRepresentedFilename(os.homedir())
  win.setDocumentEdited(true)
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
    <h1>Hello World!</h1>
    <p>
      Click on the title with the <pre>Command</pre> or <pre>Control</pre> key pressed.
      You should see a popup with the represented file at the top.
    </p>
  </body>
</body>
</html>

啟動 Electron 應(yīng)用程序后，在按下 Command 或 Control 鍵時單擊標(biāo)題。您應(yīng)該會看到一個彈出窗口，頂部有代表的文件。在本指南中，這是當(dāng)前用戶的主目錄：



以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號