电子-Hello World - 芒果文档

📌 相关文章

📜 电子-Hello World

📅 最后修改于: 2020-10-25 10:53:54 🧑 作者: Mango

我们已经为我们的项目创建了一个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文件。在其中输入以下代码。


      Hello World!
   
   
   
      Hello World!
      We are using node ,
      Chrome ,
      and Electron .

使用以下命令运行此应用程序-

$ electron ./main.js

将会打开一个新窗口。它看起来像下面的样子-

电子你好世界

这个应用程式如何运作？

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

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

我们在html文件中使用了原生的Electron对象过程。该对象是从Node.js流程对象扩展而来的，它包括所有t =其功能，同时还添加了更多功能。