当前位置：网站首页>2.Electron之HelloWorld

2.Electron之HelloWorld

2022-04-23 17:07:00 【好奇的菜鸟】

官方教程：https://www.electronjs.org/docs/latest/tutorial/quick-start

极速体验：

# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库并运行应用
$ npm install && npm start

自己编写

一、HelloWorld界面编写

1、新建工作目录：F:\study\electron\helloworld

2、使用编辑器(VScode)打开工作目录新建index.html文件

3、编写界面内容

html:5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloWorld</title>
</head>
<body>
    HelloWorld
</body>
</html>

二、编写main.js，引入electron工作

var electron = require('electron') //引入electron组件

var app = electron.app //引入组件app

var BrowserWindow = electron.BrowserWindow //窗口引用

var mainWindow = null //申明打开窗口

app.on('ready', () => { //app初始化参数
    mainWindow = new BrowserWindow({ windth: 800, height: 800 })
    mainWindow.loadFile('index.html') //打开窗口加载的页面
    mainWindow.on('close', () => { //窗口关闭时，释放页面
        mainWindow = null
    })
})