electron-创建一个hello world应用

最新推荐文章于 2025-09-07 01:02:55 发布

weixin_33743661

最新推荐文章于 2025-09-07 01:02:55 发布

阅读量88

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/215677/blog/1506542

本文介绍如何使用Electron创建一个简单的桌面应用。包括创建package.json文件、安装Electron、编写main.js和index.html等步骤。并通过命令行启动应用。

2019独角兽企业重金招聘Python工程师标准>>>

在进行该章内容之前，我们假设你已经正确的创建了一个package.json文件以及安装完成electron.现在我们通过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,并且在该文件里面写入下面的语句。

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <h1>Hello World</h1>
    We are using node
    <scrip>document.write(process.versions.node)</scrip>
    Chrome
    <script>
        document.write(process.versions.chrome)
    </script>
    and Electron
    <script>
        document.write(process.versions.electron)
    </script>

</body>

</html>

我们之后我们通过命令行输入如下的命令，却可运行应用。