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

一个新窗口将打开。看起来像以下截图 −

Electron Hello World

这个应用如何工作？

我们创建了一个主文件和一个 HTML 文件。主文件使用两个模块——app和BrowserWindow。app 模块用于控制应用的生命周期，而 BrowserWindow 模块用于创建和控制浏览器窗口。

我们定义了一个 createWindow 函数，在其中我们创建一个新的 BrowserWindow 并将一个 URL 附加到此 BrowserWindow。这是我们在运行应用时呈现和向我们显示的 HTML 文件。

我们已经在我们的 html 文件中使用了 Electron 原生对象 process。此对象从 Node.js process 对象扩展而来，并且包括其所有功能，同时增加了其他许多功能。

打印页面
上一个
下一个
广告