Electron环境搭建及HelloWorld

安装Electron

安装nodejs

安装Electron之前需要安装nodejs，访问官网https://nodejs.org，建议下载LTS版本并安装

在命令行输入以下命令，如果出现版本号则安装成功

node -v
npm -v
1
2

使用cnpm

国内因为网络问题npm安装较慢，所以我们改用淘宝源的cnpm（Linux环境下可能要在前面加sudo）

npm install -g cnpm --registry=https://registry.npm.taobao.org
1

Electron安装

全局安装（Linux环境下可能要在前面加sudo）

cnpm install -g electron
1

如果仅仅是在项目内使用electron的话则需要在项目文件夹下执行以下命令(如果你不懂则可忽略此项目)

cnpm install electron
1

VSCode环境搭建

去微软官网https://visualstudio.microsoft.com/zh-hans/下载VSCode并安装

创建项目文件目录，并用VSCode打开项目文件夹

右键VSCode的资源管理器，然后点击在集成终端中打开，下方会弹出终端

执行命令

 cnpm init --yes
1

我们看到会在目录下生成一个package.json文件，其内容大致如下

{
  "name": "test03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
1
2
3
4
5
6
7
8
9
10
11
12

一般我们将main字段的index.js改成main.js

{
  "name": "test03",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
1
2
3
4
5
6
7
8
9
10
11
12

然后创建main.js文件与index.html文件

touch main.js
touch index.html
1
2

HelloWorld

VSCode中打开index.html

输入英文感叹号并敲击Tab键即可生成html模板。在body标签下写如hello,world

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>Documenttitle>
head>
<body>
    hello,world
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12

在main.js写入如下代码

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

//app启动后创建窗口
app.whenReady().then(() => {
    const mainWin = new BrowserWindow({
        width: 600,		//窗口宽
        height: 400		//窗口高
    })

    //加载html
    mainWin.loadFile('index.html')

    //监听关闭事件
    mainWin.on('close', () => {
        console.log('close.....')
    })
    app.on('window-all-closed', () => {
        console.log('all window is closed')
        app.quit()
    })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

保存后在VSCode中的集成终端中执行启动命令，即可看到窗口了

electron .
1

相关阅读:
DSP-FIR滤波器设计
ubuntu安装nvm
详细步骤记录：持续集成Jenkins自动化部署一个Maven项目
SDNUOJ 1301.判断相等
【C语言】刷题训练营 —— 每日一练（十三）
Python 框架学习 Django篇 (十) Redis 缓存
Linux中select poll和epoll的区别
算法D33 | 贪心算法3 | 1005.K次取反后最大化的数组和 134. 加油站 135. 分发糖果
React+Electron快速创建并打包成桌面应用
代码随想录算法公开课！

原文地址：https://blog.csdn.net/qq_42759112/article/details/126541229