Electron使用

最新推荐文章于 2025-03-19 10:51:13 发布
最新推荐文章于 2025-03-19 10:51:13 发布
阅读量195 收藏
点赞数
分类专栏： Electron 踩坑 文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/izhuoo/article/details/103532083
版权
在使用Electron时遇到了安装失败的问题，由于墙的原因，官方源无法访问。尝试使用cnpm和淘宝源，但因版本格式差异导致镜像获取404。经过一系列尝试，包括使用特殊方法，仍无法成功安装。最终，通过特定资源找到了解决方案。同时，文章提到了打包工具electron-packager和electron-builder，并提供了相关学习资源。在加密部分，讨论了如何处理打包后的HTML文件暴露问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Electron安装失败，改用cnpm安装成功，估计某个依赖被墙了

没错，Electron这玩意被墙了，只能换淘宝源

 

换淘宝源也没用了，版本7之后，官方修改为 v7.0.0 格式，但taobao格式为 7.0.0 ，没有那个v符号，所以获取镜像一直404

https://npm.taobao.org/mirrors/electron/v7.0.0/electron-v7.0.0-win32-x64.zip  (官方)

https://npm.taobao.org/mirrors/electron/7.0.0/electron-v7.0.0-win32-x64.zip （taobao）

只有使用魔法才能解决 （2020-2-19 ）

头都大了，用魔法也不行

再加一句：

electron_custom_dir=8.0.0

http://www.mamicode.com/info-detail-2927045.html （electron 无法安装，SEO太低了，过滤时间才找到）

工具：

1.打包工具 electron-packager （或者用electron-builder，这个好用点）

开始

快速开始：https://github.com/electron/electron-quick-start.git

参考：https://blog.youkuaiyun.com/qq_26626113/article/details/81022347

https://segmentfault.com/a/1190000017296201

http://www.mamicode.com/info-detail-2927045.html （electron 无法安装）

https://blog.youkuaiyun.com/cctvcqupt/article/details/87904368 （electron-builder各种依赖报错）

加密

发现打包出来的html直接暴露在 /resources/app 目录下

参考 https://www.cnblogs.com/FHC1994/p/10055698.html 使用asar工具加密（全局安装）

 

使用electron-vite搭建一个web桌面应用
qq_46516788的博客
09-27 1329
最近有个业务需要使用到electron这个技术进行搭建web的桌面应用，本人在试坑的路上已经不知道掉了多少坑了，我先开始使用两个框架一起搭的，刚开始使用vite创建了一个vue3的项目然后再安装electron进行综合构建electron-vue项目，但是官方提供了一个electron-vite的脚手架用于搭建，而且是使用vite搭建的，不用之前的两次启动，一键启动，而且热更新，下面是两种搭建方式的区别。
Electron 使用Selenium和WebDriver
天空之外
05-24 3002
本节我们来学习如何在 Electron 下使用 Selenium 和 WebDriver。 Selenium Selenium 是 ThoughtWorks 提供的一个强大的基于浏览器的开源自动化测试工具。 Selenium 是一个用于 Web 应用程序测试的工具，测试直接自动运行在浏览器中，就像真正的用户在手工操作一样。支持的浏览器包括 IE、Chrome Opera、Firefox 等。这个工具的主要功能包括： 测试与浏览器的兼容性，测试应用程序是否能够很好地工作在不同浏览器和操作系统之上。 测试系统
用 Electron 从 0 开发一个桌面软件(二) ffmpeg 在 Electron 中的使用
qq_34164252的博客
03-09 355
今天做了一下调研，发现一个库ffmpeg ，无论是编码格式，视频拼接，裁剪，音频分离，混流，图片处理等等都很方便的进行处理，我用ffmpeg 做了一下测试，发现确实很好用。但是做的时候呢又遇到一个问题，input 上传文件呢，是拿不到文件的真实地址的，而 ffmpeg 是需要真实地址的。后来又折中了一下，拿到file之后呢，传给主进程，主进程生成一个临时文件，在用这个临时文件去转码，OK 完美解决。下一步呢，我准备先美化一下页面，看看别的转码软件都有哪些功能，我再加点类似的功能。问了一下AI，他给我两个。
Electron使用&创建
dupha的博客
02-18 521
Electron 第一步：初始化项目并运行 首先创建一个文件夹并初始化 npm 包 mkdir my-electron-app && cd my-electron-app npm init 将 electron 包安装到应用的开发依赖中（如果npm下载报错，切换cnpm。cnpm安装方式） npm install --save-dev electron 项目根目录下创建一个名为index.html的文件 <!DOCTYPE html> &lt
Electron 使用手册
ErikChan的博客
12-28 322
准备Electron环境 安装 NodeJS 下载地址：https://nodejs.org/zh-cn/download/ 安装完成后查询node和npm的版本，确认安装是否成功。 node -v npm -v 如果上述命令均打印出一个版本号，就说明Node.js已经安装好了！ 注册 npm 镜像 由于 npm 命令在下载模块时速度很慢，可以利用淘宝镜像注册 cnpm 指令，加快下载的速度 npm install -g cnpm --registry=https://registry.n
electron 使用 electron-builder 打包所需工具 winCodeSign-2.6.0.zip
12-25
在使用 `Electron Builder` 进行打包时，如果指定了 `winCodeSign`，它会自动调用这些工具，使用开发者提供的证书对最终的 `.exe` 文件进行签名。 在实际操作中，你可能需要以下步骤来使用 `Electron Builder` 和 `...
electron使用regedit模块时的正确配置方法
01-20
本文将详细介绍如何正确配置`regedit`模块在Electron项目中的使用。 首先，我们需要理解Electron项目的结构。Electron允许我们在一个基于Chromium的环境中运行Node.js代码，这意味着我们可以利用Node.js的全部功能...
Electron 使用electron-packager、electron-builder打包demo
08-03
这个压缩包文件中的"Electron 使用electron-packager、electron-builder打包demo"是一个实例，展示了如何使用两个流行的Electron打包工具——`electron-packager`和`electron-builder`，将Electron应用转化为可以在...
结合使用Python和Electron教程
04-05
你可以使用NPM（Node包管理器）来安装Electron，同时还需要一些辅助库，如`electron-packager`或`electron-builder`用于打包你的应用。例如，通过运行以下命令可以安装Electron： ```bash npm install electron --...
electron的基本使用
weixin_39457424的博客
11-12 1399
Electron是GitHub开发的一个开源框架，它使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的跨平台开发 准备 首先保证电脑上已经安装node.js 1，安装electron npm install -g electron // 推荐使用淘宝镜像安装 cnpm install -g electron 2，检查electron是否安装成功 npm electron -v // 显示版本号 则安装成功 3，新建main.js作为electron的主进程 const
简单使用electron
qq_44309360的博客
08-25 1448
electron学习记录
Electron的入门使用
猫咪老师
07-08 1690
关于我在初次使用Electron客户端框架遇到的一些问题。
electron基础使用
m0_62475892的博客
06-11 1547
代码签名是一种可用于证明桌面应用程序是由已知来源创建的安全技术。Windows 和 macOS 拥有其特定的代码签名系统，这将使用户难以下载或启动未签名的应用程序。代码签名在。
Electron-使用Electron开发第一个应用
weixin_34292402的博客
02-18 123
使用Electron开发第一个应用 Electron 应用的目录结构如下： app/ ├── package.json ├── main.js └── index.html 新建一个app文件夹 将这三个文件都放在里面 package.json的内容 { "name" : "app", "version" : "0.1.0", "main" : "main.j.
前端框架 Electron 使用总结
热门推荐
qq_50909707的博客
11-19 1万+
效果：可以看到此时并无边框自定义的菜单只需要通过html等写到对应的页面中即可！
Electron桌面应用
weixin_57136547的博客
09-18 590
main是主进程，preload是预加载进程，renderer是渲染进程。将图标和上下文菜单添加到系统的通知区域。Tray | Electron 中文网。Menu | Electron 中文网。创建原生应用菜单和上下文菜单。
electron 入门
zru_9602的博客
03-19 1117
Electron是一个由GitHub开发的开源框架，允许开发者利用Web技术（如HTML、CSS和JavaScript）构建跨平台的桌面应用程序。它结合了Node.js和Chromium浏览器的核心功能，使开发者能够创建高性能且具有丰富用户界面的应用程序。通过以上步骤，你可以快速上手Electron，并开始开发自己的跨平台桌面应用。虽然过程中可能会遇到一些挑战，但随着不断的实践和学习，你将能够充分利用Electron的强大功能来构建高质量的应用程序。
electron使用
最新发布
03-29
### 使用 Electron 框架进行开发的方法 Electron 是一种强大的工具，用于利用 Web 技术（如 HTML、CSS 和 JavaScript）构建跨平台桌面应用程序。以下是关于如何使用 Electron 进行开发的具体说明： #### 1. 环境准备 为了开始使用 Electron 开发，需要安装 Node.js 及其包管理器 npm 或 yarn。这些工具可以帮助管理和下载依赖项。可以通过以下命令验证环境是否已准备好： ```bash node -v && npm -v ``` 如果未安装，则可以从官方站点获取并完成安装。 #### 2. 创建项目结构 一个基本的 Electron 应用程序通常具有如下文件夹和文件结构： - `main.js`：这是主进程脚本，负责处理与操作系统的交互。 - `index.html`：这是一个标准的网页页面，作为应用的主要界面。 - `package.json`：定义项目的元数据以及启动配置。 下面是一个简单的例子展示如何设置初始文件[^4]: ```json { "name": "my-electron-app", "version": "1.0.0", "main": "main.js" } ``` #### 3. 编写主进程代码 (Main Process) 在 `main.js` 文件中编写逻辑以初始化窗口和其他核心组件。例如： ```javascript const { app, BrowserWindow } = require('electron'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); win.loadFile('index.html'); } app.whenReady().then(() => { createWindow(); }); ``` 此部分展示了如何创建一个新的浏览器窗口，并加载本地 HTML 页面[^1]。 #### 4. 设计前端界面 设计您的用户界面可以像制作普通的网站一样简单。只需编辑 `index.html` 来定制外观和行为即可。这里提供了一个基础模板： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My First Electron App</title> </head> <body> <h1>Hello from Electron!</h1> <p>This is a simple example of an Electron application.</p> </body> </html> ``` #### 5. 启动应用 当所有的必要文件都就绪之后，在终端执行下列命令来运行该应用： ```bash npm start ``` 确保已经在 package.json 中添加了合适的 script 字段支持上述命令。 #### 6. 打包发布 最后一步就是打包你的应用以便分发给最终用户。推荐使用的工具有 electron-builder 或者 electron-packager 。它们能够帮助生成适合不同目标平台的应用二进制文件[^2]。 --- ### 总结 通过以上步骤可以看出，Electron 提供了一种简便的方式让开发者无需学习新的编程语言就能快速上手开发多平台桌面软件。无论是个人爱好者还是企业级产品都可以从中受益匪浅[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值