使用Electron写HelloWorld-技术分类-默谷资源网

Electron是一个使用javascript进行跨平台桌面应用开发的解决方案。

首先在webstorm里面新建一个nodejs项目。

接着运行

npm i --save-dev electron

添加对项目的依赖。这一步会下载electron的二进制，时间会比较长。

国内可以设置淘宝镜像：

Windows上设置环境变量

set ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/

新建一个index.js文件。

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

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

    win.loadFile('index.html');
}

app.whenReady().then(() => {
    createWindow()
})

然后添加一个index.html，用于Electron里面的浏览器窗口加载。既然是HelloWorld，就写个最简单的html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    HelloWorld
</body>
</html>

条件npm运行脚本到package.json里面：

在WebStorm里面新建一个Configuration

点击运行：

可以看到HelloWorld窗口了。

默谷资源网

专业网站建设资源库

使用Electron写HelloWorld