Electron - Hello World

我們已經為專案建立了 package.json 檔案。現在，我們將使用 Electron 建立我們的第一個桌面應用。

建立一個名為 main.js 的新檔案。輸入以下程式碼 −

const {app, BrowserWindow} = require('electron') 
const url = require('url') 
const path = require('path')  

let win  

function createWindow() { 
   win = new BrowserWindow({width: 800, height: 600}) 
   win.loadURL(url.format ({ 
      pathname: path.join(__dirname, 'index.html'), 
      protocol: 'file:', 
      slashes: true 
   })) 
}  

app.on('ready', createWindow)

建立一個另一個檔案，這次是一個名為 index.html 的 HTML 檔案。輸入以下程式碼。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Hello World!</title>
   </head>
   
   <body>
      <h1>Hello World!</h1>
      We are using node <script>document.write(process.versions.node)</script>,
      Chrome <script>document.write(process.versions.chrome)</script>,
      and Electron <script>document.write(process.versions.electron)</script>.
   </body>
</html>

使用以下命令執行這個應用 −

$ electron ./main.js

一個新視窗將開啟。看起來像以下截圖 −

這個應用如何工作？

我們建立了一個主檔案和一個 HTML 檔案。主檔案使用兩個模組——app和BrowserWindow。app 模組用於控制應用的生命週期，而 BrowserWindow 模組用於建立和控制瀏覽器視窗。

我們定義了一個 createWindow 函式，在其中我們建立一個新的 BrowserWindow 並將一個 URL 附加到此 BrowserWindow。這是我們在執行應用時呈現和向我們顯示的 HTML 檔案。

我們已經在我們的 html 檔案中使用了 Electron 原生物件 process。此物件從 Node.js process 物件擴充套件而來，並且包括其所有功能，同時增加了其他許多功能。

列印頁面

上一個

下一個