electron初体验

小仓桑

已于 2023-03-17 16:02:19 修改

阅读量125

点赞数

分类专栏： Electron 文章标签： electron javascript 前端 Powered by 金山文档

于 2023-03-16 22:46:07 首次发布

本文链接：https://blog.csdn.net/qq_43462019/article/details/129602465

版权

Electron 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一步：初始化项目

新建一个空文件运行命令创建package.json文件

npm init

第二步：安装electron

npm install --save-dev electron

第三步：通过命令符查看版本

npx electron -v

第四步：创建main.js文件

var electron = require('electron')

var app = electron.app // 引用app
var BrowserWindow = electron.BrowserWindow // 控制窗口引用

var mainWindow = null // 声明要打开的主窗口

app.on('ready', () => {
    mainWindow = new BrowserWindow({width: 300, height: 300}) // 窗口的高度宽度
    mainWindow.loadFile('index.html') // 引入需要加载的页面
    mainWindow.on('close', () => {
        mainWindow = null
    })
})

注：在package.json中的main属性默认为index.js记得修改为您设置好的文件名

第五步：创建html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello world</title>
</head>
<body>
<div>
    <h2>Hello world</h2>
</div>
</body>
</html>

在main.js中的mainWindow.loadFile()方法中引入