文章的开始，先让我们来了解下 Electron 是什么。 1. 什么是 Electron？...简单点讲，就是有了 Electron，我们就可以用前端技术来写 web 页面，它可以转化为一个桌面应用。...应用程序窗口在每个 OS 下有不同的行为，Electron 将在 app 中实现这些约定的责任交给开发者们。 可以使用 process.platform 属性来为不同的操作系统做处理。 3.5.1....关闭所有窗口时退出应用（Windows & Linux） 在 Windows 和 Linux 上，关闭所有窗口通常会完全退出一个应用程序。 ...没有窗口打开则打开一个新窗口（macOS） 用过 macOS 的人应该都知道，一个应用没有窗口打开的时候，也是可以继续运行的，这时如果打开应用程序，就会打开新的窗口。
、文件搜索、批量上传下载和删除文件，复制多种格式文件链接和图片/markdown/文本/视频预览等，另外还有更加强大的相册和多项功能新增或优化。...PicList-Core PicList的内核使用的是原版PicGo-Core基础上修改的PicList-core，为云端删除等功能做了适配，同时，新增了水印添加和图片压缩/缩放/旋转/格式转换等功能，...MacOS: 进入Typora设置界面，选择图像，将上传服务设置为 Custom Command，然后在 Command中填写 /Applications/PicList.app/Contents/MacOS...系统安装完PicList显示「文件已损坏」或者安装完打开没有反应，请升级到PicList V1.4.1以上版本。...mirrors/electron/" 在 Windows 上，则可以使用 set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ （无需引号
3.1 文件路径 在Windows下，文件路径的分隔符为\，而在macOS和Linux下，文件路径的分隔符为/。...我在文件路径上踩的坑是，在平台打包阶段，需要通过github action自动打包，其中某一步是需要删除除了exe/dmg文件之外的所有文件。...(); 3.4 打包应用程序 在将electron应用程序打包成可执行文件时，需要针对不同的操作系统进行不同的处理。...更新 在进行electron应用程序的更新时，需要注意在Windows和macOS平台之间存在较大的差异。...虽然不同平台之间存在着诸多的差异，但只要掌握了相应的技巧和方法，就能够顺利地进行electron开发。希望这些解决方案能够帮助到大家，顺利完成electron开发。
安装 在vscode插件一栏里面搜索：VSC Netease Music，点击Install即可。 ? 使用本插件之前需要自带完整的 ffmpeg 动态链接库。...MacOS： 下载 electron-%version%-darwin-x64.zip 替换 ..../Electron.app/Contents/Frameworks/Electron\ Framework.framework/Libraries/libffmpeg.dylib Linux： 下载 electron.../libffmpeg.so 以上是手动替换，当然也可以自动替换： 默认安装位置下 Linux 和 Windows 需要以管理员身份运行，macOS 不需要 Windows Powershell Invoke-RestMethod...gist.githubusercontent.com/nondanee/f157bbbccecfe29e48d87273cd02e213/raw | python 使用 按下 F1 或 Ctrl Shift P 打开命令面板
，如果说到本质上，肯定还是一回事 在官方的视角里，它们是将捆绑后的 .asar 文件视为一个具有虚拟目录的文件系统，之后官方围绕这个特性，完善了 Node API 和 Web API ，使其支持这种格式的调用...，但可想而知，不可能全部都修改为支持，所以官方列出了一些可以使用的方法 在 MacOS 上，asar 文件位于 /Applications/xxx.app/Contents/Resources/app.asar...ASAR 完整性 ASAR完整性是一项实验性功能，可在运行时验证应用的ASAR归档的内容 目前支持 ASAR 完整性的版本如下 MacOS 上 Electron >= 16.0.0 Windows...上 Electron >= 30.0.0 目前仅支持由 @electron/asar 生成的 ASAR 文件的完整性检查 在asar@3.1.0中引入了支持。...提供此打包哈希的过程对于 macOS 和Windows 是不同的 1) 使用 Electron Forge 和 Electron Packager Electron Forge和Electron Packager
这些工具可以帮助我们将 Electron 应用程序打包为可执行文件，并根据目标平台生成相应的安装程序或应用程序包。...electron-forge：是一个全面的 Electron 开发工具集，提供了打包、调试和发布等功能，并且易于使用。...electron-packager：是另一个常用的打包工具，支持将 Electron 应用程序打包为各个平台的可执行文件，如 Windows、Mac 和 Linux 等。...for macOS out/ ├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip ├── ... └── out/my-electron-app-darwin-x64.../my-electron-app.app/Contents/MacOS/my-electron-app 使用 electron-builder # 安装打包程序 npm i electron-builder
嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验...Electron < 7 该漏洞允许通过在通过 window.open 打开的子窗口上定义不安全窗口选项来读取任意本地文件。...，这就导致如果使用 file:// 协议就可以打开二进制文件，而且还支持远程加载，在 Windows 上打开 smb:\\ 就可以从远程加载 exe 在本地执行，还有很多利用方法 所以测试过程中要检查...本地代码注入 在 MacOS 上，如果按照默认的 fuse ，那么将会允许远程调试和将Electron 程序作为 Nodejs 程序来启动两件事，这两件事对我们攻击来说都十分有利 https://book.hacktricks.xyz...Applications/Yakit.app/Contents/MacOS/Yakit 也就是说这个 fuse 可以让任意一个 Electron 程序成为一个 nodejs shell ，在一些情况下是个不错的工具
image.png 打包成功后，会在根目录下（此处的目录是可在参数中配置的）下生成.exe，运行该文件，并且没有报错，则说明本次打包成功 image.png 「特点：」 1、支持平台有：Windows...(32/64 bit)、OS X (also known as macOS)、Linux (x86/x86_64); 2、进行应用更新时，使用electron内置的autoUpdate进行更新 3、支持...CLI和JS API两种使用方式； 3、使用electron-builder打包 electron-builder比electron-packager有更丰富的的功能，支持更多的平台，同时也支持了自动更新...「特点：」 1、electron-builder 可以打包成msi、exe、dmg文件，macOS系统，只能打包dmg文件，window系统才能打包exe，msi文件； 2、几乎支持了所有平台的所有格式...； 3、支持Auto Update； 4、支持CLI和JS API两种使用方式； 写到最后 整个过程看似很简单，可能也就只有自己知道有多难吧。
嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发...npm Yarn mkdir my-electron-app && cd my-electron-app yarn init init初始化命令会提示您在项目初始化配置中设置一些值 为本教程的目的，有几条规则需要遵循...应用程序窗口在每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者们。 一般而言，你可以使用 进程 全局的 platform 属性来专门为某些操作系统运行代码。...关闭所有窗口时退出应用 (Windows & Linux) 在Windows和Linux上，关闭所有窗口通常会完全退出一个应用程序。...如果没有窗口打开则打开一个窗口 (macOS) 当 Linux 和 Windows 应用在没有窗口打开时退出了，macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口
创建项目 有哪些好用的cli脚手架 什么是Electron 这里借用官方的一句话： Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。...嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许 保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发...这种跨平台的能力使得开发者可以在 Windows、macOS 和 Linux 等操作系统上构建一次代码，多平台运行。...通过结合 HTML5、Canvas 和 WebGL 技术，开发者可以创建高性能的游戏，并利用 Electron 的跨平台特性将其发布到不同的操作系统上。...Electron的优缺点 优点： 跨平台支持：Electron 可以在多种操作系统上运行，包括 Windows、macOS 和 Linux 等。
0x00 简介 大家好，今天和大家讨论的是新窗口创建问题，通常来说，我们打开一个 Electron 程序，映入我们眼帘的就是主窗口，基本上是通过 BrowserWindow创建的 如果我们点击某个功能...) 网址 打开 https 的网址没问题 打开 http 网站没有问题 自签名证书不行 2) file 协议加载本地文件 如果直接加载可执行二进制文件是什么效果呢？...根据 web 技术中对 window.open 的描述，也和之前 web 嵌入章节一样，如果父窗口和子窗口同源，则可以通过对象关系进行访问，不同源则不行 当然，在 features 中也有 noopener...a 标签和 form标签设置 target="_blank" 打开新窗口 其中 a 标签和 form 标签打开新窗口并不能执行 Node.js ，危害不是很大 window.open 则不同，它打开或重用的窗口默认会继承父窗口的权限...事件内部的 will-navigate 监听到，并在其中进行处理 web-contents-created 对 a 标签和 form 标签同样有监听和拦截作用，可以使用 contents.setWindowOpenHandler
---- 在macOS中实现对话表 Electron应用被设计成跨平台的，者意味着它们可以再macOS、Windows和Linux上运行。...图4.6 在Windows中，我们可以在不同类型的文件之间切换。 ? 图4.7 macOS不支持在不同类型的文件之间切换，但允许我们选择filter选项定义的任何符合条件的文件。...图4.8 在macOS中，打开文件对话框现在从菜单的标题栏下拉，而不是作为应用程序窗口前面的附加窗口出现。 ---- 促进进程间通信 我们已经编写了用于在主进程中选择和读取文件的所有代码。...在Electron应用程序中，情况有些不同。正如我们在前几章中讨论过的，Electron应用由多个进程组成: 一个主进程和一个或多个渲染进程。...但是当我们在渲染器进程中想要从主进程中获得功能时，会发生什么呢? Electron的remote模块有它自己的require方法，在我们的渲染器进程中允许它从主进程获取功能。
在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。...在 Electron 中，每个窗口中无论是本地的HTML文件还是远程URL都可以被加载显示。 此教程中，您将采用本地HTML的方式。 在您的项目根目录下创建一个名为index.html的文件： <!...应用程序窗口在每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者们。...# 关闭所有窗口时退出应用 (Windows & Linux) 在Windows和Linux上，关闭所有窗口通常会完全退出一个应用程序。...== 'darwin') app.quit() }) # 如果没有窗口打开则打开一个窗口 (macOS) 当 Linux 和 Windows 应用在没有窗口打开时退出了，macOS 应用通常即使在没有打开任何窗口的情况下也继续运行
--linux", "build-mac": "electron-builder --mac" } … } 在 my-electron 目录下打开终端，运行 npm run dev 即可进入开发模式...关于各平台 Electron 镜像 在有网络的情况下，由于我们设置了 NPM 镜像和 Electron 源，速度还是很快的。...electron-builder 在打包的时候，会根据系统的不同去各自的 NPM 缓存目录下查找对应版本的 Electron 源，当我们将下载好的源放在 NPM 缓存中后，就不需要再去联网拉去了。.../ MacOS: ~/Library/Caches/electron/ Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/Local/electron.../Cache/ 注意：Linux x64 和 Linux arm64 对应的 electron 镜像是不同的， 关于开发模式启动不了的问题 开发模式可能启动不了，其原因或许是 my-electron、
今天就将 MacOS 上使用 electron-builder 打包 Electron 应用的过程做一个记录。...为什么要打包 我上一篇文章《使用 VSCode 调试 Electron 主进程代码》介绍了在开发环境下运行 Electron 程序的方法，既然可以正常运行了，那为什么还需要经过打包的步骤呢？...为了减小跨平台的复杂度，我们需要针对各个不同的平台，将程序代码打包成适配平台的应用程序，达到直接使用的目的。...electron-quick-start 下生成的 dist 文件夹，其文件结构如下： ....大家好，我是〖编程三昧〗的作者 **隐逸王** 你来，怀揣期望，我有墨香相迎！ 你归，无论得失，唯以余韵相赠！ 知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！
原理简化 构建时 首先如果在浏览器端想知道这个组件属于哪个文件，那么不可避免的要在构建时就去遍历代码文件，根据代码的结构解析生成 AST，然后在每个组件的 DOM 元素上挂上当前组件的对应文件位置和行号...开启了 debug 模式之后，鼠标 hover 到你想要调试的组件，就会展现出遮罩框，再点击一下，就会自动在 VSCode 中打开对应的组件文件，并且跳转到对应的行和列。...这个变量，和组件上的相对路径拼接后得到完整路径，这样 VSCode 才能顺利打开。...: 'atom', '/Applications/Visual Studio Code.app/Contents/MacOS/Electron': 'code', ... } 然后在 macOS...比如你的进程里有 /Applications/Visual Studio Code.app/Contents/MacOS/Electron，那说明你用的是 VSCode，就获取了 code 这个指令。
在 macOS 上安装 JDK JDK 支持基于 Intel (x64) 和 Apple Silicon (AArch64) 的 Mac 电脑。...在 macOS 上安装 JDK 的系统要求 有关支持的处理器和浏览器，请参阅 Oracle JDK 认证系统配置 。...从浏览器 下载 窗口或文件浏览器，双击 .dmg文件来启动它。 一个 Finder 出现 窗口，其中包含一个打开框的图标和 .pkg文件。...安装软件后，可以删除 .dmg或者 .tar.gz如果要节省磁盘空间，请使用文件。 在 macOS 上卸载 JDK 在 macOS 上卸载 JDK： 您必须具有管理员权限。.../JavaVirtualMachines/ 按住command键加空格，搜索/Library/Java/JavaVirtualMachines/jdk17.0.2/Contents 打开这个文件夹 在Home
官网的FAQ： https://electronjs.org/docs/faq 二进制文件在asar包中无法访问： 构建时需要在package.json文件中写上"asar":false，原因是electron...，需要根据不同的操作系统进行硬编码。...打包之后如何查看main进程中的日志： 可以通过/Applications/DingTalk\ Develper\ Tools.app/Contents/MacOS/DingTalk\ Develper...理解ipc通信： 在开发的过程中，一定要理解“主进程”和“渲染进程”的概念，并且对ipc通信的方案了解清楚。...如果你使用的React，基本上就像开发Web应用一样，没有什么多少其他的问题存在，最多是注意打包路径的问题。
然而我们从第4章-使用本机文件对话框和帮助进程间通讯的分支开始。 图5.1 在第四章中，我们建立了主进程和一个渲染进程之间的通信。 ?...在这之后，我们修改在第4章中创建的函数,以提示用户选择一个文件并打开它以指向正确的窗口。此外，我们还将处理一些常见的突发情况和沿途出现的其他问题，比如互相遮挡的窗口。...---- 结合macOS 在macOS中,即使所有的窗口都关闭了，许多(但不是所有)应用程序仍然保持打开状态。...在本节中，我们只允许应用程序在macOS中保持打开状态。默认情况下，当Electron触发它的window-all-closed事件时，它将退出应用程序。...activate事件只在macOS上触发，但是有很多原因可以解释为什么您可能选择让您的应用程序在Windows或Linux上保持打开状态，特别是如果应用程序正在运行后台进程，而您希望继续运行这些进程，即使该窗口被关闭
启动 执行npm start即可启动这个项目，可以看到打开了一个窗口，显示index.html的内容。 本地应用网络请求失败 上面可以看到在main.js中是通过loadFile来加载文件的。...，标题栏是24高度，这样也要考虑在height中，也就是说这里的高度是内容的高度+24 菜单栏 默认窗口是有菜单栏的，在mac上因为是在通知栏上而不是窗口上，所以不是很明显，但是在windows上就很明显了...开发者工具 在浏览器中，我们可以通过右键->检查来打开开发者工具，可以看到控制台输出、文件、代码、报错等信息。...但是用Electron打包后就无法看到，尤其控制台输出的日志，没有日志有问题后很难排查。 其实electron也可以开启开发者工具，在main.js文件中加入相关代码。...这是因为Electron有两个进程：主进程 和 渲染进程，main.js是运行在主进程中的，而通过BrowserWindow装载load的文件或网站则运行在渲染进程，上面提到的开发者工具，实际上只能查看渲染进程的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
