Electron学习（一）

1. 什么是Electron:
Electron是使用HTML、JavaScript和CSS构建的跨平台桌面应用程序。

2. 特点及优势:

web技术：基于Chromium、Node.js
跨平台：Electron兼容Mac、Windows和Linux
开源：众多贡献者组成活跃社区共同维护的开源项目

3. 需要掌握的知识

HTML、JavaScript、CSS的基础知识
nodejs的基础知识

4. 环境要求

node版本 > 8.0
git

快速启动：

 # 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
cd electron-quick-start
# 安装依赖并运行
npm install && npm start

效果如下：

主进程-Main Process

可以使用和系统对接的ElectronAPI-创建菜单，上传文件等等
创建渲染进程-RendererProcess
全面支持Nodejs
只有一个，作为整个程序的入口点

渲染进程-RendererProcess

可以有多个，每个对应一个窗口
每个都是一个单独的进程
全面支持Nodejs和DOMAPI
可以使用一部分Electron提供的API

第一个程序

点击查看代码

 const {app,BrowserWindow}=require("electron")
//ready：当electron完全加载，准备好创建BrowserWindow的时候
app.on('ready',()=>{
  const win=new BrowserWindow({
    width:800,
    height:600,
    webPreferences:{
      //意思是在man.js中可以使用nodejs的api
      nodeIntegration:true
    }
  })
  win.loadFile("index.html")
  const secondWin=new BrowserWindow({
    width:400,
    height:300,
    webPreferences:{
      //意思是在man.js中可以使用nodejs的api
      nodeIntegration:true
    },
    //加入该属性后，只要关闭win，即主窗口，子窗口也会关闭
    parent:win
  })
  secondWin.loadFile("second.html")
})

index.html内容如下：

点击查看代码

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

second.html内容如下：

点击查看代码

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <link href="./styles.css" rel="stylesheet">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>second html</h1>
  </body>
</html>

运行效果：

posted @ 2022-09-03 01:21 小雄(416731103) 阅读(84) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Electron学习（二）之主进程与渲染进程的通讯

· Electron学习（三）之简单交互操作

· Electron学习（一）之第一个程序

· Electron基础

· 半个前端新手入门Electron的过程

阅读排行：
· 全网最简单！3分钟用满血DeepSeek R1开发一款AI智能客服，零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布，跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像：SSE 如何助力 AI 内容实时呈现？（Typescript篇）

公告

昵称：小雄(416731103)
园龄： 13年
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

小雄(416731103)

Electron学习（一）

主进程-Main Process

渲染进程-RendererProcess

第一个程序

index.html内容如下：

second.html内容如下：

运行效果：

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类 (21)

随笔档案 (16)

阅读排行榜

	# 克隆示例项目的仓库
	git clone https://github.com/electron/electron-quick-start
	# 进入这个仓库
	cd electron-quick-start
	# 安装依赖并运行
	npm install && npm start

	const {app,BrowserWindow}=require("electron")
	//ready：当electron完全加载，准备好创建BrowserWindow的时候
	app.on('ready',()=>{
	const win=new BrowserWindow({
	width:800,
	height:600,
	webPreferences:{
	//意思是在man.js中可以使用nodejs的api
	nodeIntegration:true
	}
	})
	win.loadFile("index.html")
	const secondWin=new BrowserWindow({
	width:400,
	height:300,
	webPreferences:{
	//意思是在man.js中可以使用nodejs的api
	nodeIntegration:true
	},
	//加入该属性后，只要关闭win，即主窗口，子窗口也会关闭
	parent:win
	})
	secondWin.loadFile("second.html")
	})

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
	<link href="./styles.css" rel="stylesheet">
	<title>Hello World!</title>
	</head>
	<body>
	<h1>Hello World!</h1>
	</body>
	</html>