Electron 第一个 Hello world 程序
一、新建index.html文件
新建一个文件夹，比如 ElectronDemo01
在项目的根目录中新建一个 index.html 文件，然后编写如下的代码（可以用快速生成的方式来写这段代码）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello World!
</body>
</html>
二、新建 main.js 文件
在根目录下新建一个 main.js 文件，这个就是 Electron 的主进程文件。
var electron = require('electron') //引入electron模块
var app = electron.app // 创建electron引用
var BrowserWindow = electron.BrowserWindow; //创建窗口引用
var mainWindow = null ; //声明要打开的主窗口
app.on('ready',()=>{
mainWindow = new BrowserWindow({width:400,height:400}) //设置打开的窗口大小
mainWindow.loadFile('index.html') //加载那个页面
//监听关闭事件，把主窗口设置为null
mainWindow.on('closed',()=>{
mainWindow = null
})
})
三、创建package.json文件
写完后直接使用 npm init --yes 来初始化 package.json 文件，文件生成后如下：
{
"name": "ElectronDemo1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
这时候 main 的值为 main.js 就正确了。这时候你就可以打开终端，在终端里输入 electron . 就可以打开窗口了。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论