electron入门教程：带你两小时玩转electron轻松实现桌面应用

最新推荐文章于 2024-04-23 13:55:08 发布
最新推荐文章于 2024-04-23 13:55:08 发布
阅读量1.3k 收藏 5
点赞数
分类专栏： 前端 文章标签： vue react web 前端 electron
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41293655/article/details/109598737
版权

electron是使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序, 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。本课程包含electron安装和基本使用及核心api的使用，以及结合react和vue使用electron。

Web 技术：Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。

开源：Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。

跨平台：Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

本课程包含electron安装和基本使用及核心api的使用，以及结合react和vue使用electron。

主讲内容

1. Electron安装和快速上手

2. Electron的渲染进程和主进程

3. 应用窗口菜单的定义

4. 文件读取和展示

5. 应用程序快捷键的定义

6. Electron打包

完整视频：

玩转electron两小时轻松实现桌面应用

qq_1456507655
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Electron实战教程（初级）
10-10
Electron作为一个优秀的跨平台桌面开源框架，吸引了大量从事原生客户端开发和前端开发的同学涉足。Electron学习的过程存在两个门槛，一是入门，二是进阶。据以往的经验，只要你能够入门并适应Electron开发的流程，就能够很快的从事一些简单功能的开发，并且熟悉一段时间后，就能够独立完成大部分PC客户端的开发需求。到了进阶阶段，就要求我们能够熟练的运用Electron的特性完成某些具有一定难度功能的开发，不过这个需要我们大量的实践经验的积累，本课程结合本人多年从事原生客户端开发和Electron开发的经验，对Electron的使用进行介绍，帮助大家迅速入门并快速进入进阶阶段，减少不必要的弯路和踩坑。
electron学习教程 基本教程已测试完成
Lcc的博客
11-03 2676
electron学习教程1.介绍2.五分钟快速上手2.1 先创建index.html文件2.2 再创建main.js文件2.3 再安装electron2.2 配置为入口文件2.5 运行3.自动刷新页面4.主进程和渲染进程5.自定义原生菜单5.1 自定义菜单5.2 给菜单定义点击事件5.3 抽离定义 打开调试5.4 自定义顶部菜单5.5 点击创建新窗口5.6 点页面打开浏览器6 打开对话框读取文件6.1 读取文件6.2 保存文件7 定义快捷键7.1 主线程定义7.2 渲染进程定义8 渲染进程和主线程通讯9 e
全网最全搭建Electron项目的各种方式及错误解决
最新发布
u011296285的博客
04-23 1573
如果你只是想体验下electron，或者测试一些官方文档中示例代码，则可以选择方式一、二创建项目。如果想要打包功能开箱即用，并且不包含过多的其他依赖，那么选择方式四、方式五搭建是最好的。reactvuevitewebpackpiniavue-router等。方式三(官方脚手架)不太推荐，由于大陆网络原因，经常会遇到依赖安装失败，和打包失败的问题，当然，如果你有梯子那就无所谓了。
Electron详解（二）：基本使用与项目打包
Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
06-21 9148
在使用Electron进行开发之前，您需要安装 Node.js，最低工作版本为 14.x，低于 14 的版本在后面的打包过程中可能会报错。（注意，因为 Electron 将 Node.js 嵌入到其二进制文件中，所以在 electron 应用运行时的 Node.js 版本与你本地电脑中运行的 Node.js 版本无关。（虽然您需要在开发环境安装 Node.js 才能编写 Electron 项目，但是 Electron 不使用您系统的 Node.js 环境来运行它的代码。
Electron框架使用入门
cnds123的专栏
05-11 3745
Electron框架使用入门 Electron是一个跨平台的桌面应用开发框架，可以让我们用html css js的技术开发跨平台桌面上可以安装的软件。因为Electron使用JavaScript 调用丰富的原生 APIs 来创造桌面应用，所以你必须掌握JavaScript的知识，Electron 使用 web 页面作为它的 GUI，因此需要你还应掌握Html和SS教程。electron背后是node解释器和chromium浏览器内核，因此体积大。 Electron官网 http://www.elect
基于Electron实现桌面应用开发代码实例
10-15
运行项目时，执行`npm run electron:serve`命令启动Electron应用。这将开启一个热更新的开发服务器，允许实时预览和调试应用。 在Electron应用中，通常会涉及Vue组件与Node.js API或Electron API之间的通信。为了...
vue3+vite+pinia+electron实现桌面端应用-自定义收藏夹功能
11-01
内容概要：通过vue3+electron实现一个基础的桌面端应用——收藏夹功能。使用了部分vue3的基本功能及方法，了解Electron的一下API的使用，开发中的常用的插件及依赖的使用方法。 适合人群：具备一定编程基础，对vue...
electron-vue开发桌面应用界面模板
11-01
标题中的“electron-vue开发桌面应用界面模板”指的是利用Electron和Vue.js框架构建的桌面应用程序的用户界面模板。Electron是一个用JavaScript、HTML和CSS构建跨平台桌面应用的开源库，它允许开发者使用Web技术来...
java-electron-tutorial：如何使用Electron构建Java桌面应用程序
02-04
Java电子教程在这个简短的教程中，我将向您展示如何在Electron，Jetty和Vaadin之上构建自己的Java桌面工具包。入门我们将从Gradle构建系统和Node.js安装开始。 下载并安装Gradle的最新稳定版本： ：//gradle.org/...
使用Electron构建桌面应用
02-24
即使在移动端和云端大行其道而，桌面端日渐落末的现在，我的心中仍然为桌面应用留有一个特殊的位置。...现在，我们可以借助Electron或者NW.js开发一个桌面应用。其实这两者提供的或多或少差不多的特
vue的应用实例2-桌面端electron
08-06
首先要使用express -t ejs app来创建一个名字为app的文件夹。 之后就是npm install把所要用到的模块都载入进来。 然后我们需要安装electron-prubuilt包。可以通过命令npm install --saved-dev electron-prebuilt进行安装。
修改IE进程数及内存释放问题
01-24
修改IE进程数及内存释放问题
Electron 桌面应用开发从基础到进阶
郊眠寺
03-16 2931
本文介绍了一些 Electron 的进阶知识，包括使用主进程和渲染进程、使用模块、使用开发工具、调试、部署和热更新。通过掌握这些知识，你可以更好地管理和开发 Electron 应用程序，提高开发效率，为用户提供更好的体验。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
Electron + nodejs 解决方案
mutouren_abc的博客
12-07 321
electron + vue + nodejs
Electron桌面应用打包流程
qq_36091574的博客
05-09 1万+
一. 准备工作     1.npm的安装需要下载node.js,安装完node.js之后npm自然会有。        参考链接：http://www.runoob.com/nodejs/nodejs-install-setup.html     2.Electron环境搭建       a、安装node.js。node官网地址：https://nodejs.org/en/        ...
Electron新手入门实战
09-29
本课程大喵将手写每一行代码，手把手带着大家从环境搭建开发，逐步开发一个零基础入门级的实战项目；通过基础实战项目来快速学习掌握Electron的相关API知识点，以及掌握使用Electron构建客户端应用程序的流程，体验Electron客户端开发的魅力和强大；本课程最终，会把我们开发的实战项目代码，分别编译打包输出三个平台（windows、mac、linux）系统所支持的PC客户端应用。 本课程的主要内容：01. Electron课程介绍02. Electron项目案例介绍03. Electron Github源码仓库课程分支04. 本地环境搭建及初体验05. 主窗口开发06. 主窗口页面结构搭建07. 顶部文件及新增菜单项08. 开发者工具及刷新菜单项09. 开发及线上环境配置10. 子窗口开发11. 子窗口通信12. 主窗口通信13. 清空信息菜单项14. PC客户端打包（windows、mac、linux）课程章节代码地址：https://github.com/damiao-classroom/electron-primary 为什么要学习掌握Electron呢? 01. 由于Electron是基于Node.js构建的，也就是说，Electron应用可以调用Node.js中的大量API（包括第三方的API）、如网络、加密、存储等。02. Electron具备简单快捷开发、WEB技术栈、非常良好的跨平台性、开源社区等特性，决定了使用Electron开发项目是一个非常不错的选择。
Electron-使用Electron开发第一个应用
热门推荐
flyfish
11-27 1万+
使用Electron开发第一个应用Electron 应用的目录结构如下：app/ ├── package.json ├── main.js └── index.html新建一个app文件夹 将这三个文件都放在里面 package.json的内容{ "name" : "app", "version" : "0.1.0", "main" : "main.js" }注意：如
electron 读取文件夹内容_electron入门教程：带你两小时玩转electron轻松实现桌面应用...
05-25
在 Electron 中读取文件夹的内容可以使用 Node.js 的 fs 模块。以下是一些示例代码： ```javascript const fs = require('fs') // 读取文件夹中的所有文件 fs.readdir('/path/to/folder', (err, files) => { if ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值