1.electron初体验，写个Hello World的demo

最新推荐文章于 2024-05-26 00:43:50 发布

秀聚

最新推荐文章于 2024-05-26 00:43:50 发布

阅读量233

点赞数

分类专栏： electron简单使用文章标签： js nodejs electron

本文链接：https://blog.csdn.net/weixin_43852058/article/details/119842733

版权

electron简单使用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

安装

electron的使用首先需要安装node.js。
node.js官网下载地址

然后使用npm安装electron

# 全局安装 electron 模块
npm install electron -g

可能会安装失败，安装失败的话，可能是网络问题，可以尝试如下解决办法：
使用cnpm进行安装

# 使用淘宝镜像 全局安装cnpm 
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 使用cnpm全局安装electron
cnpm install -g electron

检查是否安装成功

npx electron -v

输入该命令，然后回车，若出现版本号，则表示安装成功。

demo

1. 项目结构

在这里插入图片描述

2.运行效果

在这里插入图片描述

3.具体实现

创建文件夹
我这里的项目文件夹名字叫做：1.helloworld

创建html文件，我这里叫做index.html
说明：html中要展示的内容，其实就是界面要展示的内容。其中可以直接引用css 、js文件。跟正常的web中的html是一样的。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello World</title>
		<link rel="stylesheet" href="index.css">
	</head>
	<body>
		<div>
			Hello World!
		</div>
	</body>
</html>

css代码

div {
	width: 200px;
	height: 200px;
	background-color: aquamarine;
}

主进程代码 main.js
说明：这里的js 文件与普通的js文件就不太一样了。因为这个文件要作为项目的主进程使用。

// 依赖的模块
let electron = require('electron')

// 窗口程序主程序
let app = electron.app
// 窗口
let BrowserWindow = electron.BrowserWindow
// 声明窗体
let mainWindow = null

// 监听主程序准备就绪
app.on('ready', () => {
// 新建窗口，声明窗口初始属性
mainWindow = new BrowserWindow({
		width: 500,
		height: 300
	})
	// 加载要显示的页面
	mainWindow.loadFile('index.html')
	// 监听关闭按钮，当关闭时，删除窗体
	mainWindow.on('closed', () => {
		mainWindow = null;
	})
})

写完之后，现在还不能运行，需要初始化该项目
在建好的文件夹里打开cmd窗口，使用如下命令
```
npm init
```
可以直接全部回车。或使用：
```
npm init --yes
```
初始化之后，使用如下命令启动
```
electron .
```

这样就Hello World的demo就完成了。

秀聚

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1.electron初体验，写个Hello World的demo

目录安装demo1. 项目结构2.运行效果3.具体实现先奉上node.js的文档链接：node.js的中文api文档安装electron的使用首先需要安装node.js。node.js官网下载地址然后使用npm安装electron# 全局安装 electron 模块npm install electron -g可能会安装失败，安装失败的话，可能是网络问题，可以尝试如下解决办法：使用cnpm进行安装# 使用淘宝镜像全局安装cnpm npm install -g cnpm --reg
复制链接

扫一扫

专栏目录