electron初步入门

最新推荐文章于 2024-08-25 10:52:52 发布
最新推荐文章于 2024-08-25 10:52:52 发布
阅读量618 收藏
点赞数
分类专栏： electron 文章标签： 前端 js node.js html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fire__hero/article/details/108673821
版权

介绍

electron是 GitHub 在2013年开发的一款跨 Mac/Windows/Linux 系统的框架，使用 Html/Css/JavaScript 来构建跨平台桌面应用程序，2014年开始开源，官网请访问 http://www.electronjs.org/

原理

electron 是一个精简版的 Chromium 浏览器，使用 web 页面作为它的 GUI，但是比原生的桌面端应用还是有些不足。从本质上看，electron application 是一个 Node. js 应用程序。

环境依赖

Node.js 和 npm，国内可以使用 cnpm（淘宝镜像）代替 npm

编辑器

使用 GitHub 的 Atom 或者微软的 Visual Studio Code 来编写 electron 应用

应用结构

your-app /
├── package.json（应用的配置）
├── main.js（入口文件）
└── index.html（首页）

新建项目

安装 electron

为每个 app 单独的安装 electron （可以是不同版本）

npm install electron --save-dev

全局安装 electron（省得每次都去安装）

npm install electron -g

官方安装文档

http://www.electronjs.org/docs/tutorial/installation

安装成功检验（全局方式）

使用命令提示符窗口或者命令行工具输入 “electron” 后回车，有以下内容才是成功
在这里插入图片描述


创建 electron 应用

创建项目根目录

在想要存放应用项目文件的地方新建一个文件夹，以项目名称命名，然后打开文件夹，在项目文件夹中启动命令提示符窗口或者命令行工具

初始化项目

npm init

再次确认项目名称（一般都是直接回车）

在这里插入图片描述

初始项目版本（可以在后面修改）

在这里插入图片描述
在这里插入图片描述

项目描述（可以不写直接回车）

在这里插入图片描述

项目启动节点（初始化文件，默认index.js，我这里用main.js）

在这里插入图片描述
在这里插入图片描述

测试参数（看情况设置）

在这里插入图片描述

这里建议配置为 “electron .” ，这个在后面的启动应用步骤会说到原因

git代码管理仓库（看情况设置）

在这里插入图片描述

关键词、作者（看情况设置）

在这里插入图片描述

协议许可证（看情况设置【商业、开源等等】，默认ISC开源）

在这里插入图片描述

后面就是再次确认配置信息（回车确认直接生成package.json配置文件）

在这里插入图片描述

想要修改项目配置也可以在生成的package.json文件中修改在这里插入图片描述

编写应用代码

创建main.js入口文件

在package.json的同级新建main.js文件
在这里插入图片描述

在package.json文件中这个文件就是之前配置的入口文件
在这里插入图片描述

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

function createWindow() {
	// 创建浏览器窗口
	const win = new BrowserWindow({
		width: 800,
		height: 600,
		webPreferences: {
			nodeIntegration: true
		}
	})

	// 并且为你的应用加载index.html
	win.loadFile('index.html')

	// 打开开发者工具
	win.webContents.openDevTools()
}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
		app.quit()
	}
})

app.on('activate', () => {
	// On macOS it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (BrowserWindow.getAllWindows().length === 0) {
		createWindow()
	}
})

// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。

把上面的代码复制到main.js文件中，main.js文件就初步完成了

创建index.html文件

在package.json的同级新建index.html文件
在这里插入图片描述

然后随便写点什么

<!-- index.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
	</head>
	<body>
		你好
	</body>
</html>
启动应用

在项目根目录下（package.json的同级）打开cmd（命令提示符窗口）或者命令行工具，敲写以下命令

electron .

然后应用就启动了
在这里插入图片描述

注意

之前在配置 “test command” 时可以配置为 “electron .” 。配置后package.json中会有启动配置信息
在这里插入图片描述
在这里插入图片描述
然后启动时就可以使用 “npm test” 来启动
在这里插入图片描述

或者直接修改package.json中的内容
在这里插入图片描述
然后启动时就用 “npm start” 来启动
在这里插入图片描述

至此，应用就初步创建完成了，剩下的舔砖加瓦就可以对照官方文档来发挥了。

fjy_1012
关注
专栏目录
electron入门之简介
蛐蛐的博客
12-12 561
文档：简介 | Electron 1.简介 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制 Electron 允许保持一个 JavaScript 代码库 并创建 在Windows、macOS和Linux上运行的跨平台应用 不需要原生开发经验。 1.1 Fiddle Electron Fiddle是由Electron开发并由其维护者支持的沙盒程序。 强烈建议将其作为一个学
Electron入门—Hello world
Meskjei的博客
02-22 409
不论是学习语言亦或是各种框架，最开始上手都必然是"Hello World"类型的简单编程。那么我作为一个Electron的初学者自然也不例外。 Electron应用从开发的角度来看可以视作是一个Node.js应用。所以一个基本的Electron应用的文件目录应该会是下面这个样子的（当然了，除了package.json其他文件的文件名都不一定）： Hello World/ ├── package.j...
electron入门
qq_27685463的博客
05-22 1393
详细文档：https://www.electronjs.org/docs/api/menuconst {label : "文件" , submenu : [ {label : "新建窗口" , } , ] , } , {label : "编辑" , submenu : [ {label : "新建窗口" , } , ] , } , ];1、点击打开新窗口label : "新建窗口" , click :() => {} , } , ];2、点击打开浏览器shell。
【Electron】Electron入门实现
Python、Golang、大数据
06-27 1355
Electron是一个开源框架，允许开发者使用网页技术来构建跨平台的桌面应用程序。它由GitHub开发并维护，最初是为了支持开发Atom编辑器。Electron结合了Chromium（用于呈现网页内容）和Node.js（用于与操作系统交互），因此开发者可以利用大量现有的网页开发技术和工具来构建桌面应用。
Electron 入门
GitChat
05-09 1408
Electron 是一个使用 JavaScript、 HTML 和 CSS 等 Web 技术创建跨平台桌面应用程序的框架，它负责比较难搞的部分，你只需把精力放在你的核心业务开发上即可。说到把精力放到核心业务开发上，这听起来特别诱人，但是很多初学者在第一个 Hello World 上被各种拦路虎挡住了，我这篇文章的目标就是帮助大家跳过去，把精力放在核心业务上。 这篇 Electron 入门教程，让大...
Electron入门
weixin_42883164的博客
07-18 556
electron 入门练习
Electron基础入门教程
10-26
这个基础入门教程针对初学者，旨在教会那些对Electron不熟悉的开发者如何从零开始创建自己的桌面应用。 **教程内容概览** 1. **01 Electron 跨平台桌面应用开发介绍 学习前的准备工作（11分28秒）** - 了解...
electron入门篇
02-27
这个“electron入门篇”很可能是为初学者准备的一份教程资料，涵盖了Electron的基础概念以及一些常见的开发技巧。 首先，我们来了解一下Electron的核心概念。Electron是由Node.js和Chromium浏览器引擎组成的。Node....
Electron入门示例
08-14
这个入门示例可能包含了一些基本的组件和功能，适合初学者学习和理解Electron的工作原理。 描述中的"源代码"表明提供的压缩包包含了可运行的代码，用户可以下载并研究这些代码以了解Electron应用的构建过程。博文...
Electron 初学
mmuhua的博客
05-14 632
一.安装    1.安装nodejs    由于electron是基于nodejs的，所以我们首先要安装nodejs    官网地址:https://nodejs.org/en/     直接下载安装即可;看安装是否成功命令:node -v,npm -v ;出现版本号即表示安装成功    2.安装electron        2.1由于直接访问国外服务器缓慢,我选择先安装淘宝镜像的包命令行管理工...
Electron快速入门
路漫漫其修远兮，吾将上下而求索
06-29 3721
Electron是由GitHub众多开发者开发的一个开源项目，能够使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。当然了，它也可以与vue和react相结合。前端的小伙伴们，学习它应该很快，是很容易上手的一门技术。文档编写不易，还请各位耐心观看。另外本人能力有限，如有不足之处，还请不吝批评指正！Electron 运行的main脚本的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。
Electron入门 01：快速入门
Naisu的各种笔记
10-28 9475
文章目录目的总结 目的 总结
Electron学习指南（一）--- 初识Electron
sinat_37066308的博客
03-25 2384
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。
electron学习笔记：electron入门
hai200501019的专栏
07-31 813
1.关于electron electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将chromium和node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。   2.最基础的electron程序 基础的Electron程序三个文件：package.j...
Electron 入门第一篇
weixin_30843605的博客
05-21 219
官网：http://electronjs.org/docs/tutorial/application-architecture 转载：https://blog.csdn.net/qq_33323731/article/details/80492191(第一个demo和安装依赖的包) 一、简介 Electron 可以让你使用纯JavaScript调用丰富的原生 API...
一小时快速上手Electron，前端Electron开发教程，笔记。一篇文章入门Electron
最新发布
weixin_41978174的博客
08-25 80
1.后面有的bug可能与Electron Forge配置有关。有时间试试，找个解决方案。2.也有可能与main.js写法有关。3.打包时删除main.js里的win.openDevTools() //自动打开调试窗口否则软件会自动打开调试窗口。4. 代码仓库位置终于完成，虽然有bug,但能运行起来了。后续找个更好的解决方案。
Electron 快速入门
Yana's Blog
05-06 344
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。以上三个命令执行完后，会创建一个 out 文件夹，文件夹下包含安装包。若安装失败，设置一下 electron 下载镜像。
electron入门教程
zai329979994639的博客
04-05 1140
效率进程和 Node 生成的进程之间的主要区别.js child_process模块是实用程序进程可以建立通信 通道与使用MessagePort的渲染器进程。特别是 DOM 对象（例如 Element，Location 和 DOMMatrix），Node.js 中由 C++ 类支持的对象（例如 process.env，Stream 的一些成员）和 Electron 中由 C++ 类支持的对象（例如 WebContents、BrowserWindow 和 WebFrame）无法使用结构化克隆序列化。
Electron入门：动手开发首个Windows记事本应用
本文旨在通过实践创建一个简单的记事本应用，帮助初学者理解Electron的工作原理和开发流程，适合那些对 Electron 具有兴趣但未曾接触过该技术的人。 首先，要进行开发，你需要确保安装了Node.js。访问Node.js官网...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值