Electron

插件开发api: https://code.visualstudio.com/api 官网api示例: https://github.com/microsoft/vscode-extension-samples

代码只在window下可用间接上代码:代码摘抄过程中可能有脱漏或谬误，欢送指出 electron: "25.2.0"，低于此版本的 protocol 写法不同，请自行处理 须要的npm包: npm install gm须要的第三方开源软件:GraphicsMagickextracticon.exe GraphicsMagick 的效率不错，70MB｜4961 × 7016 × 32 BPP的png图片生成300px左右的缩略图耗时大概2sextracticon 能够提取exe图标里最大的那个为png图片，所以图片大小不肯定对立，最大尺寸为 256×256，最小 16×16img_load: const spawn = require("child_process").spawnconst os = require("os")const path = require("path")const fs = require("fs")// 我装置GraphicsMagick后无奈间接调用，但控制台能够，理由不晓得，这里就间接指定程序门路const gm = require("gm").subClass({ appPath: "d:/GraphicsMagick/App/",})const tempDir = os.tmpdir()const exeRoot = process.cwd()console.log(tempDir, exeRoot)function isExists(filepath) { try { fs.accessSync(filepath, fs.constants.F_OK | fs.constants.R_OK) return true } catch (error) { return false }}function getExtracticonPath() { // 我放在了根目录下的utils文件夹里 const p = path.join(exeRoot, "/utils/Image/extracticon.exe") console.log(p) if (isExists(p)) { return p } return ""}export function getIcon(filepath) { return new Promise((resolve, reject) => { if (!isExists(filepath)) { reject("file not found!") } const pngname = path.parse(filepath).name + ".png" const pngpath = path.join(tempDir, pngname) if (isExists(pngpath)) { resolve(gm(pngpath).stream("png")) } const extracticon = getExtracticonPath() if (extracticon == "") { reject("extracticon.exe not found!") } const child = spawn(extracticon, [filepath, pngpath]) child.on("close", (code) => { if (code == 0) { resolve(gm(pngpath).stream("png")) } reject("error") }) })}export function getThumbnail(url, width = 240, height = 400, option = ">") { if (!isExists(url)) { throw new Error("file not found!") } return gm(url).thumbnail(width, height, option).stream("png")}electron: ...

下载 npm i electron-reloadernpm i electron-reloader在main.js中最底部 try { require("electron-reloader")(module, {});} catch (_) {}重启一下我的项目就能够了

0.根底环境类别：笔记本型号：中国长城 NF14C硬件平台：飞腾处理器（ArmV8 指令集）零碎：河汉麒麟操作系统 V10 SP1(2203) 关键词：信创,麒麟零碎,linux,c++,c,飞腾,arm,electron,npm,nvm,nodejs 1.背景目前，为了反对国产软件、硬件平台，在抉择跨平台技术时，次要可能的抉择是QT、基于web技术的electron等。特地是electron使得前端人员也能够很好的进行跨一台的软件开发，无论是打包成deb，还是exe都通过electron-builder做了很好的反对。但在理论的实际流动中，在飞腾ARM平台打包时，会呈现谬误。本文以electron-egg 3.0为打包案例，为大家提供一个能够参考的electron在麒麟零碎和飞腾处理器下展示一个较为残缺的教程。 2.nodejs多版本治理思考到nodejs降级较快，不同开发人员可能依赖的node版本不统一。咱们将应用nvm-cli来进行版本治理，能够依据工程须要切换版本。我的项目主页：https://github.com/nvm-sh/nvm 2.1 官网用法举例$ nvm use 16Now using node v16.9.1 (npm v7.21.1)$ node -vv16.9.1$ nvm use 14Now using node v14.18.0 (npm v6.14.15)$ node -vv14.18.0$ nvm install 12Now using node v12.22.6 (npm v6.14.5)$ node -vv12.22.62.2 装置1.执行装置脚本装置nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash或者() wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash2.装置并切换node nvm install 18 #要装置的版本，能够指定18.5.0，只写18会拉18系列的最新版本nvm use 18 #将node切换至须要的版本2.3 检测node -v 2.4 装置一些全局组件npm install --location=global yarn #装置yarn，也能够间接在后续只用npm install,但yarn的机制更先进，后续就以yarn为主了。 3. 运行electron-egg假如你装了git，没有就本人筹备一下。#sudo apt-get install git ...

Electron的自动更新机制并不算简单，但团队内仿佛没有相干文档，正好笔者搞明确了，就简略阐明一下，以MacOS的arm平台为例阐明，具体代码能够参考Postcat的相干配置，本篇文章就不以具体代码举例了。 这里是以Mac arm平台为例，对于不同平台，包名不一样、更新文件名不一样、压缩包后缀不一样，但总体上都是围绕这三样货色。配置了自动更新后，构建后，会有以下几个要害文件： 安装包：Postcat-1.0.0-arm64.dmg更新/指引文件：latest-mac.yml压缩包：Postcat-1.0.0-arm64-mac.zip三者是对应的，要顺利完成自动更新，三者缺一不可。当运行Postcat时，应用程序会尝试拜访更新文件，从更新文件中获取最新的版本号和一个相对路径，相对路径指向.zip压缩包。 如果更新文件latest.yml中的最新版本号和以后运行的应用程序版本号统一，则不会再去拜访压缩包。 如果不统一，则回去尝试拜访压缩包，去将压缩包下载到本地，主动进行更新（更新过程是主动的，笔者也不理解外部运行的机理）。 待下一次重启利用时，运行的即是最新的应用程序，大抵流程模型如下： 由此可知，latest.yml文件的地位是相当重要的，它必须始终指向最新的压缩包，因为在每一次公布新版本后，须要将latest.yml文件替换掉。对于这一点，Github平台曾经帮咱们做得很好了，但如果你的安装包须要公布在其余平台上，这一步操作须要退出到规范流程中。 当然，因为咱们有本人的需要，因而在两头加了一层Nginx，Electron对于自动更新对外的拜访，都会通过Nginx，由此变成： 须要留神的是，更新文件latest.yml中的门路是相对路径，而Electron拜访压缩包时走的是http协定，绝对路径，因而当自动更新呈现问题时，能够查看latest.yml中的相对路径是否正确。 这个机制我有利用到目前我参加的开源我的项目中，Postcat 开源的 API 管理工具，纯国产，收费的，主打插件生态，适宜中小团队以及集体开发者应用，有 API 相干的外围性能。 目前在 Github 上 1.3k star，如果你感觉这个我的项目还不错的话，无妨点个 star 反对一下~ Github： https://github.com/Postcatlab... Demo:https://postcat.com/zh/?utm_s...

本文作者：linusflow背景在一个中大型的客户端研发团队中，会应用诸如 Ruby、Shell、Python 等脚本语言编写的脚本、命令行和 GUI 工具来实现各项任务。比方 iOS、Android 开发人员想在一台新电脑上开发一个新 App ，那么须要先在本地配置好开发环境，之后能力通过 Xcode 或 Android Studio 进入开发。 在 App 的初期，开发人员可能只须要简略的几行命令即可实现环境的配置。随着 App 规模变大，配置环境所需执行的命令越来越多，此时能够应用一种或多种脚本语言将这些命令聚合到脚本文件外面，这样执行该脚本文件即可疾速执行繁多的命令。当 App 规模进一步变大，散落的脚本文件会越来越多，变得难以使用和保护，此时能够将这些散落的脚本文件捆绑到一起，造成一个或多个 CLI 工具集，CLI 工具集能够创立一个或多个新的命令的形式给开发人员应用。随着工夫的推移和倒退，App 的规模会进一步变大，此时会发现 CLI 工具集越来越简单，提供的命令的调用时的参数和选项会变得复杂又多样，开发人员难以记忆这些又长又多的参数和选项。此时能够将这些 CLI 工具集聚合到 GUI 上，让开发人员仅通过点击按钮即可实现环境的配置，极大的进步了开发人员的应用体验和效率。上面剖析出了命令行迭代（执行）的 4 个阶段示意图，并在后续的篇幅中将只叙述第 3 阶段和第 4 阶段。文章后续的形容中，无关「CLI」和「CLI 工具集」的形容是等同的，「命令行」是针对 CLI 中 3 个阶段的另外一种形容。 一个中大型 App 的 DevOps 会同时用到 CLI 和 GUI 来实现研发过程中的工作，其中 GUI 和 CLI 之间是存在交互通信，最终开发人员和 GUI、CLI 的交互示意图如下所示： 笔者在 iOS 团队，故选取了以后热门的桌面端技术 Electron 作为 GUI，相熟的脚本语言 Ruby 作为 CLI ，聚焦命令行迭代的第 3 和第 4 阶段，给出 Electron 的 GUI 和 Ruby 的 CLI 的一种交互实际。 ...

windows墙内打包失败方法在网络环境不好(无迷信上网)的条件下，我的项目可能能够启动胜利却无奈打包，留神查看报错信息，如下图所示： 这种都是短少相干包导致的问题，依据报错信息手动下载相应的资源，放入 C:\Users\你的用户名\AppData\Local\electron\Cache 目录下即可。 淘宝镜像：https://npm.taobao.org/mirrors/electron/ NSIS下载：https://nsis.sourceforge.io/Download 我这里windows打包短少了nsis，下载后放入目录如下： 之后再运行打包即胜利： any-note-book Setup 0.1.0.exe 为安装包，win-unpacked 为间接关上运行的程序。 <img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7051881eca8642679f813b51cf94f488~tplv-k3u1fbpfcp-watermark.image?" alt="image.png" width="30%" /> windows下因网络问题无奈打包可参考我上述的做法。Mac我目前打包没有翻车过。 Node版本问题打包失败最近装 Vite4 的时候提醒 Node 版本过低，手贱就间接降级了最新版 Node (原版本 14.17，的确太低了)，一下干到了 18.12 的版本，接着一堆奇怪的事件就产生了，比方 Electron 打包时就报错： .......opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'......还好很快在官网Git仓库下搜到了相干 issues: nodejs 17: digital envelope routines::unsupported #14532 大略意思就是 Node 不讲武德，在 v17 之后删除了之前的某个什么 OpenSSL 规定啥的，所以我啪的一下，很快啊，关上了 Node.js下载官网，发现以后的稳固版本是 16.18.1 所以 Node.js 装置肯定要留神版本治理，当前我的项目中最好也备注下以后的环境，省得过段时间就发现运行不起来了~ By the way 我的 Node 版本治理应用的是比拟小众的 n，比较简单，命令行输出 n 即可抉择版本切换。 ...

IPCWebview内被动触发异步音讯告诉// preload.js - 在畫面轉譯處理序中 (網頁)。const { ipcRenderer } = require('electron')ipcRenderer.on('need-clean-reply', (event, arg) => { console.log(arg) // 印出 "貓咪肚子餓"})ipcRenderer.send('take-cat-home-message', '帶小貓回家')// main.js - 在主處理序裡。const { ipcMain } = require('electron')ipcMain.on('take-cat-home-message', (event, arg) => { console.log(arg) // prints "帶小貓回家" event.reply('need-clean-reply', '貓咪肚子餓')})// preload.js - 在畫面轉譯處理序中 (網頁)。const { ipcRenderer } = require('electron')ipcRenderer.invoke('take-cat-home-handle', '帶小貓回家') // then 回傳前能够做其余事，例如打掃家裡 .then(msg => console.log(msg)) // prints "小貓肚子餓，喵喵叫"// main.js - 在主處理序裡。const { ipcMain } = require('electron')ipcMain.handle('take-cat-home-handle', async (event, arg) => { console.log(arg) // prints "帶小貓回家" return '小貓肚子餓，喵喵叫'})同步音讯告诉// preload.js - 在畫面轉譯處理序中 (網頁)。const { ipcRenderer } = require('electron')const message = ipcRenderer.sendSync('take-cat-home-message', '帶小貓回家')console.log(message) // prints "小貓肚子餓"// main.js - 在主處理序裡。const { ipcMain } = require('electron')ipcMain.on('take-cat-home-message', (event, arg) => { console.log(arg) // prints "帶小貓回家" // event 回傳前你始终關注著小貓 event.returnValue = '小貓肚子餓'})主线程告诉// main.js - 在主處理序裡。mainWindow.webContents.send('switch-cat', number);// preload.js - 在畫面轉譯處理序中 (網頁)。const { ipcRenderer } = require('electron')ipcRenderer.on('switch-cat', (event, args) => switchCat(args));获取webContents的形式主线程ipcMain.on('notify:new-msg', (event, chat) => { const mainWindow = BrowserWindow.fromWebContents(event.sender); // 利用 event.sender 获得 currentWindow const isFocused = mainWindow.isFocused(); // 確認 mainWindow 是否在最下面 const myNoti = new Notification({ title: `${chat.name}有新的對話`, subtitle: chat.msg }); myNoti.on('click', () => mainWindow.show()); // 將 mainWindow 帶到最下面 myNoti.on('close', () => mainWindow.show()); // 將 mainWindow 帶到最下面 myNoti.show(); if (!isFocused) { // 工作列按鈕閃爍 mainWindow.flashFrame(true); }});const mainWindow = BrowserWindow.fromWebContents(event.sender); // 利用 event.sender 获得 currentWindowBrowserWindow.fromId(this.winId).webContents.send('update-badge', this.badgeCount);渲染线程// preload.js https://www.npmjs.com/package/@electron/remoteimport { remote } from "electron"remote.getCurrentWindow()remote.getCurrentWebContents()Clipboard// @/utils/clipboardUtils.jsconst read = clipboard => { const aFormats = clipboard.availableFormats(); const isImageFormat = aFormats.find(f => f.includes('image')); const isHtmlFormat = aFormats.find(f => f.includes('text/html')); const isTextFormat = aFormats.find(f => f.includes('text/plain')); const isRtfFormat = aFormats.find(f => f.includes('text/rtf')); if (isImageFormat) { const nativeImage = clipboard.readImage(); // 获得 clipboard 中的圖片 return nativeImage.toDataURL(); // data:image/png; } // 获得 clipboard 中的文字 else if (isTextFormat) return clipboard.readText(); // 获得 clipboard 中的 html 文字 else if (isHtmlFormat) return clipboard.readHTML(); // 获得 clipboard 中的 rtf 文字 else if (isRtfFormat) return clipboard.readRTF(); else return null;}module.exports = { read,}下载Electron内置模块实现在 electron 中的下载行为，都会触发 session 的 will-download 事件。在该事件外面能够获取到 downloadItem 对象，通过 downloadItem 对象实现一个简略的文件下载管理器 ...

背景前段时间，我司我有一批产品须要工厂加工、测试、包装、发货， 次要分为以下几个流程 将组装成品，贴标 - 在对应的地位粘贴Logo和二维码及阐明激活ICCID绑定 - 应用码枪将二维码、IMEI、批次、RFID卡等信息绑定测试装盒，发货技术选型APP & 小程序绑定环节，须要用到码枪，应用手机操作不不便必要的时候，还须要连贯串口线排查问题BO我司的BO平台须要在白名单下操作，工厂应用咱们平台须要新增白名单我司不心愿对外颁布咱们的治理平台地址该工厂和该行业的多家公司处于单干关系，其中几家公司还是竞争关系，基于此，咱们不心愿咱们的API对外颁布是时候展现一波Electron了Electron简介 总结起来，Chromium 负责页面 UI 渲染，Node.js 负责业务逻辑，Native API 则提供跨平台计划。 开发基于 PanJiaChen/electron-vue-admin 做二次开发 技术选型Vue + ElementUI + Axios + Vuex + Wepback还是相熟的配方，相熟的滋味 创立并管制浏览器窗口const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), },})mainWindow.loadURL("index.html");过程间通信在 Electron 中，过程应用 ipcMain 和 ipcRenderer 模块，通过开发人员定义的“通道”传递音讯来进行通信。 您能够应用 ipcRenderer.send API 发送音讯，而后应用 ipcMain.on API 接管。 ipcMain.on('set-title', (event, title) => { const webContents = event.sender const win = BrowserWindow.fromWebContents(webContents) win.setTitle(title)})简评毛病陈词滥调的： 体积大，性能差，冷启动慢简略的几个单页面，就能打出几十M的包，内存间接飙升到1G 多端的兼容这一点是最烦的，你永远保障不了你的新性能都是OK的蹩脚的API和版本差别本地测试没有问题，打包运行各种问题，长时间的周而复始，间接给我整吐了～～长处上手容易，简直零难度随用随走，丰盛的Web生态系统大厂背书，不必放心微软最终放弃Electron？理论状况只是微软旗下的Teams产品打算把Electron框架换成WebView2而已。 第一：Electron是GitHub的产品，GitHub是微软的子公司，WebView2是Edge团队的产品（是Edge的副产物），Edge团队是微软直属的团队，所以事件就是：Teams打算切换一下本人的底层框架，而且这两个框架都是本人公司的产品，并不是放弃本人公司的框架，用了其余公司的框架。 第二：微软外部有很多软件都是基于Electron开发的，比方VSCode和GitHubDesktop，不仅仅是只有Teams这么一个产品在用它，非但微软外部，包含Facebook、MongoDB、twitch、Slack、迅雷、字节跳动、阿里、拼多多、京东等大企业都在用这个框架，这么一个好货色，微软怎么会放弃它呢？ 第三：Teams之所以要把Electron换成WebView2，并不是因为Electron不好，而是因为Electron不称手，就像一个木匠换个锤子敲钉子一样一般，对于那些Electron的从业者，或者想进入Electron这个畛域的开发者，没什么好放心的。 第四：Electron更新版本分频繁，大厂保障，不须要放心提桶跑路 参考文献微软要放弃Electron了

electron利用中，不须要放心跨域问题。因为在electron利用中，咱们能够通过上面两种形式发送网络申请，完满躲避跨域问题： 通过nodejs发送网络申请通过electron的net模块发送网络申请这两种发送申请的形式，都不受浏览器同源策略的影响。

vivo 互联网前端团队-Yang Kun一、背景在团队中，咱们因业务倒退，须要用到桌面端技术，如离线可用、调用桌面零碎能力。什么是桌面端开发？一句话概括就是：以 Windows 、macOS 和 Linux 为操作系统的软件开发。对此咱们做了具体的技术调研，桌面端的开发方式次要有 Native 、 QT 、 Flutter 、 NW 、 Electron 、 Tarui 。其各自优劣势如下表格所示： 咱们最终的桌面端技术选型是 Electron ，Electron 是一个能够应用 Web 技术来开发跨平台桌面利用的开发框架。 其技术组成如下： Electron = Chromium + Node.js + Native API各技术能力如下图所示： 整体架构如下图所示： Electron 是多过程架构，架构具备以下特点： 由一个主过程和 N 个渲染过程组成主过程承当主导作用，用于实现各种跨平台和原生交互渲染过程能够是多个，应用 Web 技术开发，通过浏览器内核渲染页面主过程和渲染过程通过过程间通信来实现各种性能这里说下 Electron 过程间通信技术原理： electron 应用 IPC （interprocess communication） 在过程之间进行通信，如下图所示： 其提供了 IPC 通信模块，主过程的 ipcMain 和渲染过程的 ipcRenderer。 从 electron 源码中能够看出， ipcMain 和 ipcRenderer 都是 EventEmitter 对象，源码如下图所示： 看到源码实现，是不是感觉 IPC 不难理解了。知其本质，方可熟能生巧。 ...

Electron装置装置问题 npm或者yarn装置electron就算是配置了淘宝源还是会呈现超时。所以我的解决方案是装置cnpm，应用cnpm去装置。 全局装置cnpm npm i cnpm -G复制代码 新建我的项目 cnpm init // 一路Enter而后到最初一步输出yes // 装置dev相干依赖cnpm i electron -D //装置electroncnpm i electron-builder -D // 用来打包客户端安装包 -- 须要下一步下一步装置来实现点击关上cnpm i electron-packager -D // 用来打包客户端可执行文件 -- 间接点击打包后的可执行文件即可运行// 装置生产相干依赖cnpm i electron-log // 用于调试时的log输入，dev环境会间接在终端打印日志同时会在我的项目跟目录的logs文件夹生成logcnpm i electron-updater //用户我的项目自动更新cnpm i express // 因为应用的是history路由模式所以咱们应用node来启动前端我的项目cnpm i http-proxy-middleware // 用于代理前端我的项目拜访服务器接口复制代码 相干依赖的版本如下生产 "electron-log": "^4.4.8", "electron-updater": "^5.0.5", "express": "^4.18.1", "http-proxy-middleware": "^2.0.6"复制代码开发 "electron": "^19.0.6", "electron-builder": "^23.1.0", "electron-packager": "^15.5.1"复制代码我的项目架构详解├── build // 用于寄存前端打包后的文件├── desk // 用于寄存打包后的exe安装文件或者dmg├── logs // 用于寄存我的项目调试log文件├── main.js // electron的主过程文件├── media // 我的项目的多媒体文件诸如.mp3 .mp4 .ico .icns文件├── node_modules // 我的项目依赖├── package.json // 配置文件├── preload.js ├── renderer.js└── server // 须要打包进我的项目的后端可执行文件复制代码对于preload.js 和 renders.js的详解 ...

首先package.json，scripts外面要新增 --arch x64代表64位，--platform win32 代表windows包 "package2": "electron-forge package --arch x64 --platform win32","make2": "electron-forge make --arch x64 --platform win32", "scripts": { "start": "electron-forge start", "package": "electron-forge package", "package2": "electron-forge package --arch x64 --platform win32", "make": "electron-forge make", "make2": "electron-forge make --arch x64 --platform win32", "publish": "electron-forge publish", "lint": "echo \"No linting configured\"" },报错 An unhandled rejection has occurred inside Forge:Error: Wrapper command 'wine64' not found on the system. Run `brew install --cask wine-stable` to install 64-bit wine on macOS via Homebrew.Wine is required to use the appCopyright, appVersion, buildVersion, icon, and win32metadata parameters for Windows targets.See https://github.com/electron/electron-packager#building-windows-apps-from-non-windows-platforms for details.Electron Forge was terminated. Location:起因是mac没有windows环境，须要运行brew install --cask wine-stable装置一下 ...

明天钻研Electron的时候，在Mac下运行全局装置运行 sudo npm install electron -g时侯，报上面的谬误： Error: EACCES: permission denied, mkdir '/User/**/Electron/electron-quick-start/node_modules/electron/dist'找了很多的博客，都是什么用cnpm啦，加sudo啦，千篇一律，都是错的，归根结底就是权限不够，不晓得是不是因为Electron是开发客户端的起因啊，其实解决办法很简略，在命令后增加这样的后缀即可： sudo npm install electron -g --unsafe-perm=true --allow-root完满解决！

本文由Super-Ps发表于TesterHome论坛，点击原文链接可查看作者的更多文章并与ta在线交换。继上一篇分享解决了局部问题，本次分享残缺的 Macaca 集成 Eletron APP 测试计划。 Macaca 交付过程剖析为了使 Macaca 有测试 Electron 的能力，回顾之前试验的计划 selenmiu-webdriver ，其形式是：传递 chromeDriver 9515 服务端口，启动该端口建设连贯，传递 binary 参数，指明 app 的路劲，传递 forBrowser 参数，指明平台类型，所以当初思考的问题是，Macaca 是否通过传递同样的参数能实现？通过 Macaca 官网示例来 剖析 1 下原理,精简一下代码 const wd = require('macaca-wd');var browser = process.env.browser || 'electron' || 'puppeteer';browser = browser.toLowerCase();describe('macaca-test/desktop-browser-sample.test.js', function() { this.timeout(5 * 60 * 1000); var driver = wd.promiseChainRemote({ host: 'localhost', port: process.env.MACACA_SERVER_PORT || 3456 }); before(() => { return driver .init({ platformName: 'desktop', browserName: browser, userAgent: `Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0 Safari/537.36 Macaca Custom UserAgent`, deviceScaleFactor: 2 }) .setWindowSize(800, 600); });下面代码是 Macaca web 端的示例，对应 macaca 服务端的包就是 macaca-chrome ，为什么用它，因为它是基于 chromedriver 的，与我要做的 electron 集成计划底层服务雷同。依据以上一段脚本来简要剖析 1 下 macaca 交互过程 ...

错误代码：• electron-builder version=22.10.4• writing effective config file=distbuilder-effective-config.yaml• no native production dependencies• packaging platform=win32 arch=x64 electron=12.2.3 appOutDir=distwin-unpackedError: Application entry file “dist\electron\main.js” in the “D:\electronWork\electron-egg\build\win-unpacked\resources\app.asar” does not exist 异样体现:electron-builder打包失败 解决办法：electron我的项目根目录中，如果有app文件目录，则该目录必须是个一般文件目录，比方，app/目录内，不能有 .git、 package.json、node_modules等文件。 如果你应用的是 electron-egg 框架，那么前端我的项目默认的文件夹名称为：frontend，请不要改变这个文件名称。

错误代码： error:angle_platform_impl.cc[44] renderegl_utils.cpp:188 (ClearErrors): Preexisring GL error 0x00000500 as of ../../third_party/angle/src/libangle/renderer/gl/textureGl.cpp, setImageHelper :256. error:gpu_memory_buffer_support_x11.cc(44) dri3 extension not supported. 异样体现 electron 的硬件加速性能，在 win7 或者 Linux 零碎上，容易呈现黑屏或者卡死。 解决办法： app.disableHardwareAcceleration () 禁用以后应用程序的硬件加速。 这个办法只能在应用程序准备就绪（ready）之前调用。 如果你应用的是 electron-egg 框架 那么，在 main.js 文件的 ready () 办法中增加 伪代码： const isWin7 = os.release ().startsWith ('6.1'); const isLinux = true; if (isWin7 || isLinux) { app.disableHardwareAcceleration (); }

Versionelectron: 18.2.0electron-forge: 6.0.0-beta.63 Description在应用preload.ts的时候，以下代码能够失常打包但并不能失常的加载到preload.ts文件。 // index.tsdeclare const MAIN_WINDOW_WEBPACK_ENTRY: string;const mainWindow = new BrowserWindow({ height: 600, width: 800, webPreferences: { preload: MAIN_WINDOW_WEBPACK_ENTRY } })//package.json"plugins": [ [ "@electron-forge/plugin-webpack", { "mainConfig": "./webpack.main.config.js", "renderer": { "config": "./webpack.renderer.config.js", "entryPoints": [ { "html": "./src/index.html", "js": "./src/renderer.ts", "name": "main_window", "preload": { "js": "./src/preload.ts" } } ] } } ] ]Solution问题的本源在于package.json中的preload门路仅在打包过程中被应用而打包后的index.js代码如下所以其并不能失常的读出preload 解决办法如下 // preload必选为绝对路径，且其必选为打包后门路 const mainWindow = new BrowserWindow({ height: 600, width: 800, webPreferences: { preload: "D:\\***\\electron-app\\.webpack\\renderer\\main_window\\preload.js" } });// package.json不变

Tauri 是什么Tauri 是一个跨平台 GUI 框架，与 Electron 的思维根本相似。Tauri 的前端实现也是基于 Web 系列语言，Tauri 的后端应用 Rust。Tauri 能够创立体积更小、运行更快、更加平安的跨平台桌面利用。为什么抉择 Rust？Rust 是一门赋予每个人构建牢靠且高效软件能力的语言。它在高性能、可靠性、生产力方面体现尤为杰出。Rust 速度惊人且内存利用率极高，因为没有运行时和垃圾回收，它可能胜任对性能要求特地高的服务，能够在嵌入式设施上运行，还能轻松和其余语言集成。Rust 丰盛的类型零碎和所有权模型保障了内存平安和线程平安，让您在编译期就可能打消各种各样的谬误。Rust 也领有杰出的文档、敌对的编译器和清晰的谬误提示信息，还集成了一流的工具——包管理器和构建工具……基于此，让 Rust 成为不二之选，开发人员能够很容易的应用 Rust 扩大 Tauri 默认的 Api 以实现定制化性能。Tauri VS Electron DetailTauriElectronInstaller Size Linux3.1 MB52.1 MBMemory Consumption Linux180 MB462 MBLaunch Time Linux0.39s0.80sInterface Service ProviderWRYChromiumBackend BindingRustNode.js (ECMAScript)Underlying EngineRustV8 (C/C++)FLOSSYesNoMultithreadingYesYesBytecode DeliveryYesNoMultiple WindowsYesYesAuto UpdaterYesYesCustom App IconYesYesWindows BinaryYesYesMacOS BinaryYesYesLinux BinaryYesYesiOS BinarySoonNoAndroid BinarySoonNoDesktop TrayYesYesSidecar BinariesYesNo环境装置macOS因为装置过程比较简单，作者应用的是 macOS，本文只介绍 macOS 装置步骤， Windows 装置步骤可自行查看官网。 确保 Xcode 曾经装置$ xcode-select --install复制代码Node.js倡议应用 nvm 进行 node 版本治理：$ curl -o- https://raw.githubusercontent... | bash复制代码$ nvm install node --latest-npm$ nvm use node复制代码强烈推荐装置 Yarn，用来代替 npm。3.Rust 环境装置 rustup：$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh复制代码验证 Rust 是否装置胜利：$ rustc --versionrustc 1.58.1 (db9d1b20b 2022-01-20)复制代码tips：如果 rustc 命令执行失败，能够重启一下终端。至此，Tauri 开发环境已装置结束。我的项目搭建1.创立一个 Tauri 我的项目$ yarn create tauri-app复制代码按一下回车键，持续……能够看出，目前支流的 Web 框架 Tauri 都反对，咱们抉择 create-vite……此处抉择 Y，将 @tauri-apps/api 装置进来，而后抉择 vue-ts……查看 Tauri 相干的设置，确保所有就绪……$ yarn tauri info复制代码yarn run v1.22.17$ tauri info ...

背景一个electron的利用想打包成跨平台的利用，反对windows与mac的应用，并且公布到steamOS：Macos big sur 11.2.3Hardware：M1 8g我的项目脚手架：https://github.com/umbrella22... 坑mac利用打包当前发给别人会呈现无奈应用的状况，提醒无奈验证开发者届时表明apple须要验证开发者，天然的理解到须要对代码进行签名(code-signing) 1.申请证书必须：developer id applicationcsr -> cer -> download 查看证书是否无效：security find-identity -v -p codesigning，有第二个就示意能够了 如果发现没有刚装置的证书，从零碎自带的钥匙串拜访内查看是否是证书不被信赖下载并装置红框内两个证书即可解决。 2.electron build签名感激这些大佬的文章：https://oldj.net/article/2019... 跟着一步一步设置即可，胜利签名 3.上传公证跟着上述步骤进行上传公证时，兴许上传失败搜了半天没方法绕过xcode，还是须要装置一个xcode ⨯ Failed to upload app to Apple's notarization serversxcrun: error: unable to find utility "altool", not a developer tool or in PATH

EE框架2.1.2一个入门简略、跨平台的桌面软件开发框架。 为什么应用？桌面软件（办公方向、 集体工具），依然是将来十几年PC端需要之一，进步工作效率简略：只需懂 JavaScript愿景：所有开发者都能学会桌面软件研发gitee：https://gitee.com/wallace5303...github：https://github.com/wallace530... 码云最有价值开源我的项目 文档教程文档文档进行了从新编写，更加直观，肯定要看！！！个性跨平台：一套代码，能够打包成windows版、Mac版、Linux版简略高效：只需学习 js 语言，同时反对vue、react、html等前端技术前端独立：实践上反对任何前端技术，编写出精美的UI成果工程化：能够用服务端的开发思维，来编写桌面软件高性能：事件驱动、非阻塞式IO功能丰富：前端、服务端的技术场景等性能demo：桌面软件常见性能，后续逐渐集成或提供demo更多功能请看文档本次更新ipc通信减少 invoke/handle 模型ipcRender减少 invoke异步/sendSync同步办法优化ee-core代码优化storage demo优化ipc通信 同步、异步、双向通信demo替换所有前端ipcCall为ipcInvoke修复ipc并发申请问题修复托盘窗口敞开问题修复ee-core窗口事件优化mac零碎利用坞点击显示优化单利用模式优化代码加密应用场景1. 惯例桌面软件windows平台 macOS平台 linux平台 (ubuntu) 2. vue、react、angular、web 转换成桌面软件vue-ant-design（本地） 禅道项目管理（web我的项目地址） 3. 游戏（h5相干技术开发）忍者100层 开始应用装置文档我的项目案例查看交换qq群：735532437 (备注：ee框架)您的star，是我的能源，感激反对

Tauri什么是 Tauri ?Tauri 是一个为所有支流桌面平台构建小型、疾速二进制文件的框架。开发人员能够集成任何编译成 HTML、 JS 和 CSS 的前端框架来构建他们的用户界面。应用程序的后端是一个 Rust 二进制文件，具备前端能够与之交互的 API。装置形式Xcode$ xcode-select --installRust$ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh装置过程中如果报错 curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused 须要开启代理： # 7890 和 789 须要换成你本人的代理端口$ export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890 all_proxy=socks5://127.0.0.1:789要确保 Rust 已胜利装置，请运行以下命令 $ rustc --version$rustc 1.59.0 (9d1b2106e 2022-02-23)启动一个新的 Tauri$ yarn create tauri-app创立我的项目的时候，如果报错 An unexpected error occurred: "https://registry.yarnpkg.com/create-vite: tunneling socket could not be established 同样的，须要开启代理，应用： $ yarn config set proxy http://username:password@host:port$ yarn config set https-proxy http://username:password@host:port依照阐明抉择您喜爱的 Web 前端框架，create-tauri-app 依据您的输出创立模板我的项目，之后你能够间接去查看 tauri info ...

这里指主过程与渲染过程之间的通信。 就像官网文档说的那样：Electron Docs -> Best Practices -> Security Only load secure contentDisable the Node.js integration in all renderers that display remote contentEnable context isolation in all renderers that display remote content新版本的要求是，渲染过程不再倡议开启 nodeIntegration 和 allowRunningInsecureContent 开关，并且对于内部近程内容，强烈建议关上 sandbox 开关。 那么，对于咱们日常开发的本地渲染过程，如何优雅地和主过程之间进行通信，就须要咱们去另辟蹊径了。 好在，Electron 尽管关上了一扇窗户，然而又关上了另一扇新的窗户，在 preload 中预加载的 js 环境中，就给咱们留下一条后路，因为在预加载 js 外面，require('electron') 是被容许的，而且还提供了一个工具，能够使咱们将这个文件里定义好的变量或办法不便地“挪移”到渲染过程的一般 js 环境里去，这个工具就是 —— contextBridge。 一段官网示例如下： // Preload (Isolated World)const { contextBridge, ipcRenderer } = require('electron')contextBridge.exposeInMainWorld('electron', { doThing: () => ipcRenderer.send('do-a-thing')});在渲染过程里这样应用： // Renderer (Main World)window.electron.doThing()其中，'electron' 只是轻易起的名称，并不意味着整个 electron 对象“挪移”到了渲染过程。 ...

PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库，由 Mozilla 主导开源。 本文旨在介绍 PDF.js 于 Electron 里如何开始应用，理论尝试了用其 API 或嵌入 HTML 的几种形式。 代码: https://github.com/ikuokuo/el...从零筹备我的项目我的项目采纳 Electron React Antd PDF.js 来实现，以下是从零筹备我的项目的过程。 Electron React这里用 electron-react-boilerplate 模板开始 Electron React 我的项目。 # 获取模板git clone --depth=1 \https://github.com/electron-react-boilerplate/electron-react-boilerplate \electron-pdf-viewercd electron-pdf-viewer# 设定仓库git remote set-url origin git@github.com:ikuokuo/electron-pdf-viewer.git# 如果想合并成一个初始提交# https://stackoverflow.com/a/23486788git config --global alias.squash-all '!f(){ git reset $(git commit-tree HEAD^{tree} -m "${1:-A new start}");};f'git squash-all "first commit"git push -u origin main# 依赖npm install# 运行npm start# 打包npm run package筹备编辑器（VSCode）： ...

Electron 中能够应用html来开发其中展现的内容，一些菜单也能够以html的模式来绘制，点击时调用相干api即可，尽管构建不便，款式可任意调整。但其理论是模仿的菜单，并非利用原生的菜单。这种模仿的菜单有如下有余： html模仿生成，非原生。每个性能均需自行代码调用或实现，而理论原生菜单有很多预设行为可间接应用。Mac 和 Linux 中模仿的菜单无奈显示到最上方的菜单栏中去。html 模仿菜单无奈生成系统托盘的菜单。上面将介绍一下 Electron 中的原生菜单。 菜单类型在 Electron 中有三种类型的菜单：利用菜单、上下文菜单及托盘菜单。 利用菜单利用菜单即利用上方的那一条菜单。 构建菜单只须要一个数组即可，其中每个成员即为一个菜单项，每个菜单项均有一些指定的配置。以如下代码为例： const myMenuTemplate = [ { // 设置菜单项文本 label: '文件', // 设置子菜单 submenu: [ { label: '对于 Electron', // 设置菜单角色 role: 'about', // about （对于），此值只针对 Mac OS X 零碎 // 点击事件 role 属性能辨认时 点击事件有效 click: () => { var aboutWin = new BrowserWindow({ width: 300, height: 200, parent: win, modal: true }); aboutWin.loadFile('about.html'); } }, { // 设置菜单的类型是分隔栏 type: 'separator' }, { label: '敞开', // 设置菜单的热键 accelerator: 'Command+Q', click: () => { win.close(); } } ] }, { label: '编辑', submenu: [ { label: '复制', click: () => { win.webContents.insertText('复制'); } }, { label: '剪切', click: () => { win.webContents.insertText('剪切'); } }, { type: 'separator' }, { label: '查找', accelerator: 'Command+F', click: () => { win.webContents.insertText('查找'); } }, { label: '替换', accelerator: 'Command+R', click: () => { win.webContents.insertText('替换'); } } ] }];以上就是一个菜单的配置，罕用的有如下配置： ...

浏览器下载地址 GitHUb源码 1.Webview空白问题问题形容：一下代码webview显示为空白页 <webview class="indexWebview" width='200' height='300' style="display: inline-flex;" src='http://www.baidu.com'></webview>解决方案 const mainWindow = new BrowserWindow({ webPreferences: { webviewTag: true, } })2.Webview引入的网页无奈失常跳转页面<template> <div class='indexInndex'> <webview class="indexWebview" ref="webViews" style="display: inline-flex;" src='http://www.baidu.com'></webview> </div></template><script>export default { data(){ return { webViews: null } }, mounted(){ this.goLink() }, methods:{ async goLink(){ this.webViews = this.$refs.webViews this.webViews.addEventListener('new-window', async (e) => { const { protocol } = require('url').parse(e.url) this.webViews.src = e.url // 通过这种形式 管制页面跳转 }); } }}</script>3. 在Vue实例上挂载Electron对象vue+electron我的项目，在vue中应用electron的模块呈现：Uncaught ReferenceError: __dirname is not defined解决方案 // vue.config.jsmodule.exports = { pluginOptions: { electronBuilder: { nodeIntegration: true } }}4.Webview 加载程序1.did-start-loading 页面开始加载 ...

只容许一个实例// Only one instance can run at a timeif (!app.requestSingleInstanceLock()) { process.exit(0);}统计分析模块设置菜单MenuItemRolesrole的值能够是以下： undoaboutredocutcopypastepasteAndMatchStyleselectAlldeleteminimize 最小化以后窗口close 敞开以后窗口quit 退出程序reload 从新载入以后窗口forceReload 从新加载以后窗口，疏忽缓存toggleDevTools 切换开发者工具togglefullscreen 切换全屏resetZoom 将页面缩放级别重置为原始大小zoomIn 将页面放大10%zoomOut 将页面放大10%fileMenu 默认的“文件”菜单editMenu 默认的“编辑”菜单viewMenu 默认的视图菜单windowMenu 默认的窗口菜单实用于macOS appMenuhide 映射“hide”动作unhide 映射“unhideAllApplications”动作startSpeaking 映射“startSpeaking”动作front 映射“arrangeInFront”动作 // 置顶？zoom 映射“performZoom”动作toggleTabBar 映射“toggleTabBar”动作selectNextTab 映射“selectNextTab”动作selectPreviousTab 映射“selectPreviousTab”动作nativeImage在Electron中，对于获取图像的api，您能够传递文件门路或NativeImage实例。当传入null时，将应用一个空图像。 例如，在创立托盘或设置窗口图标时，能够将图像文件门路作为String传递 const { BrowserWindow, Tray } = require('electron')const appIcon = new Tray('/Users/somebody/images/icon.png')const win = new BrowserWindow({ icon: '/Users/somebody/images/window.png' })console.log(appIcon, win)或者从剪贴板读取图像，这将返回一个NativeImage: const { clipboard, Tray } = require('electron')const image = clipboard.readImage()const appIcon = new Tray(image)console.log(appIcon)shell应用默认应用程序管理文件和url过程: Main,Renderer ...

https://github.com/mozilla/pdf.js 版本：2.9 装置 npm i pdfjs-dist引入 import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.js'pdfjsLib.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')

前言因为要实现剪贴板历史记录性能，通过查阅electron剪贴板文档。没有发现有剪贴板变动的钩子事件，于是决定本人实现一个。 electron 中有读取剪贴板内容API，能够借助此API封装监听定时器办法。具体逻辑如下： 应用定时器一直判断内容是否雷同，如不雷同。执行剪贴板扭转回调 编写一剪贴板观察者类，实例化时传入监听的音讯/图片变动回调、因为频繁获取剪贴板内容可能会带来性能累赘，所以还须要反对传入自定义监听间隔时间。 返回的实例应该反对暂停和持续监听的办法。 编写剪贴板观察者类首先定义结构函数参数的接口 import { clipboard, NativeImage } from 'electron';interface Options { // 定时器获取内容判断的距离 duration?: number; // 文本变动回调 textChange?: (text: string, beforeText: string) => void; // 图片变动回调 imageChange?: (image: NativeImage, beforeImage: NativeImage) => void;}接着定义类，编写结构器中解决传参的逻辑与裸露的api class ClipboardObserver { // 定时器 timer: NodeJS.Timeout; // 变动前的文本（用于比照新获取的剪贴板文本） beforeText: string; // 变动去的图片（用于比照新获取的剪贴板图片） beforeImage: NativeImage; duration = 500; textChange: (text: string, beforeText: string) => void; imageChange: (image: NativeImage, beforeImage: NativeImage) => void; constructor(options: Options) { // 获取传入配置并保留到属性中 const { duration, textChange, imageChange } = options; this.duration = duration; this.textChange = textChange; this.imageChange = imageChange; // 判断传入回调，默认开始执行定时器 if (this.textChange || this.imageChange) { this.start(); } } /** * 开始 */ start(): void { // 记录剪贴板目前的内容 this.setClipboardDefaultValue(); // 设置定时器 this.setTimer(); } /** * 暂停 */ stop(): void { // 革除定时器 this.setTimer(); }}clearTimer负责调用clearInterval来革除定时器，setClipboardDefaultValue负责设置实例中记录上一次变动的内容。 ...

本文将简述如何将Electron利用打包为windows安装程序。 事后筹备Node环境装置wix (打包成msi安装程序的工具): https://wixtoolset.org/， 装置实现后，将wix的bin文件夹退出PATH环境变量。例如C:\Program Files (x86)\WiX Toolset v3.11\bin\。关上cmd，输出candle查看wix是否被退出到环境变量。装置electron-wix-msi（调用wix将electron利用打包为msi安装程序的工具）：新建一个空的文件夹，并初始化npm环境：npm init，再输出npm i --save-dev electron-wix-msi装置好之后在文件夹中新建一个名为pack.js的node脚本，内容为：const {MSICreator} = require('electron-wix-msi');async function main(){ const msiCreator = new MSICreator({ appDirectory: '', description: '形容', exe: '', name: '', cultures: 'zh-cn', shortName: "test", manufacturer: 'test', version: '1.0.0', outputDirectory: '', ui: { chooseDirectory: true }, }); const supportBinaries = await msiCreator.create(); await msiCreator.compile();}main().catch(err => {console.log(err)})其中MSICreator结构器的参数请见electron-wix-msi的文档 开始打包应用electron-packager将electron利用进行打包。在electron利用的目录下，应用指令（以64位零碎为例，如果为32位零碎，将--arch去掉即可） npx electron-packager ./ appname --platform=win32 --arch=x64 --asar --asar参数是为了将node_modules/文件夹打包为一个文件，防止node_modules/中有过长的路径名导致打包失败，感兴趣可见参考资料。 打包胜利后，electron目录下应该有appname-win32-x64字样的文件夹，其中就蕴含有.exe程序，这个程序就是能够间接运行的。关上之前写好的pack.js，复制appname-win32-x64的绝对路径，而后将门路粘贴到appDirectory项。outputDirectory填写的是安装程序的绝对路径，例如要把安装程序放在桌面上C:\Users\ASUS\Desktop\installer。如果没有installer文件夹，脚本会主动创立。运行node pack.js即可打包胜利

这两天折腾electron-builder;的确的被虐了.文档看的云里雾里的,只能靠google.上面进入主题. 超时问题 • electron-builder version=22.9.1 os=10.0.19042 • description is missed in the package.json appPackageFile=G:\_personal\lasa-project-client\dist_electron\bundled\package.json • author is missed in the package.json appPackageFile=G:\_personal\lasa-project-client\dist_electron\bundled\package.json • writing effective config file=dist_electron\builder-effective-config.yaml • rebuilding native dependencies dependencies=sqlite3@5.0.0 platform=win32 arch=x64 • rebuilding native dependency name=sqlite3 version=5.0.0 • packaging platform=win32 arch=x64 electron=9.3.3 appOutDir=dist_electron\win-unpacked • default Electron icon is used reason=application icon is not set ⨯ Get "https://github-releases.githubusercontent.com/65527128/f73f2200-5d53-11ea-8264-ddd345f11ee4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYAX4CSVEH53A%2F20210716%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20210716T015308Z&X-Amz-Expires=300&X-Amz-Signature=d1a508b2e0e7ed18229f10842c8a3cc105b83307d3e6750b81622f0713a91dab&X-Amz-SignedHeaders=host&actor_id=0&key_id=0&repo_id=65527128&response-content-disposition=attachment%3B%20filename%3DwinCodeSign-2.6.0.7z&response-content-type=application%2Foctet-stream": read tcp 172.17.7.151:64211->185.199.111.154:443: wsarecv: An existing connection was forcibly closed by the remote host. 这是控制台的报错,而后对应的文件夹的确没有货.看起来就是下载 winCodeSign这个玩意超时了,而后报错了.我想着,我不是开了代理的吗,怎么还报错.于是开始填坑. ...

上面是 Electron 中主过程和渲染过程都能够应用的模块： 模块形容clipboard提供办法来供复制和粘贴操作crashReporter开启发送利用解体报告nativeImage在 electron 中获取图片能够通过文件的门路或是应用 nativeImage 对象screen检索屏幕的大小，显示，鼠标地位等的信息shell提供了集成其余桌面客户端的关联性能clipboard模块clipboard 模块提供办法来供复制和粘贴操作 。 示例：例如将一个字符串写到 clipboard 上： const clipboard = require('electron').clipboard;clipboard.writeText('xkd');clipboard 模块有以下办法： 办法形容readText以纯文本模式从 clipboard 返回内容readText以纯文本模式从 clipboard 返回内容writeText以纯文本模式向 clipboard 增加内容readHtml返回 clipboard 中的标记内容readHtml返回 clipboard 中的标记内容writeHtml向 clipboard 增加 markup 内容writeHtml向 clipboard 增加 markup 内容readImage从 clipboard 中返回 NativeImage 内容writeImage向 clipboard 中写入 imagereadRtf从 clipboard 中返回 RTF内容writeRtf向 clipboard 中写入 RTF 格局的 textclear清空 clipboard 内容availableFormats返回 clipboard 反对的格局数组has返回 clipboard 是否反对指定 data 的格局read读取 clipboard 的 datawrite向 clipboard 写入 datacrashReporter模块crashReporter 模块开启发送利用解体报告。 示例：例如主动提交解体报告给服务器 : const crashReporter = require('electron').crashReporter;crashReporter.start({ productName: 'my_electron', companyName: 'shushuo', submitURL: 'https://9xkd.com/url-to-submit', autoSubmit: true});crash-reporter 模块有如下办法： ...

我的项目介绍vite2-electron-macui 一款轻量级的桌面端仿mac big sur桌面治理框架。应用最新技术栈electron13+vue3+element-plus开发实现。反对多窗口、可拖拽桌面+dock菜单等性能。 性能个性✅经典的图标+dock菜单模式✅晦涩的操作体验✅可拖拽桌面+dock菜单✅合乎macOS big sur操作窗口治理✅丰盛的视觉效果，自定义桌面壁纸✅可视化创立多窗口，反对拖拽/缩放/最大化，可传入自定义组件页面。 实现技术技术框架：vite^2.3.4+vue^3.0.11+vuex@4+vue-router4.x跨端框架：electron^13.0.1组件库：element-plus^1.0.2图表组件：echarts^5.1.1拖拽排序：sortablejs^1.13预处理器：sass^1.34弹窗组件：maclayer滚动条：macscroll 我的项目构造目录 整个我的项目均是应用vue3最新语法编码开发而成。 package.json依赖信息{ "name": "electron-macui", "version": "0.1.0", "description": "基于Electron13+Vite2+ElementPlus仿Mac桌面UI后盾框架", "author": "andy ：282310962", "copyright": "MIT License(MIT) ©2021 Andy", "scripts": { "dev": "vite", "build": "vite build", "electron:serve": "vue-cli-service electron:serve", "electron:build": "vue-cli-service electron:build" }, "main": "background.js", "dependencies": { "element-plus": "^1.0.2-beta.45", "echarts": "^5.1.1", "element-resize-detector": "^1.2.2", "mockjs": "^1.1.0", "sortablejs": "^1.13.0", "sass": "^1.34.0", "sass-loader": "^10.1.1", "vue": "^3.0.11", "vue-i18n": "^9.1.6", "vue-router": "^4.0.6", "vuex": "^4.0.0", "wangeditor": "^4.7.1" }, "devDependencies": { "@vitejs/plugin-vue": "^1.2.1", "@vue/cli-service": "^4.5.12", "@vue/compiler-sfc": "^3.0.5", "electron": "^13.0.1", "electron-devtools-installer": "^3.1.0", "vite": "^2.3.4", "vue-cli-plugin-electron-builder": "~2.0.0-rc.6" }}electron自定义无边框导航 ...

上面是 Electron 中渲染过程可用的模块： 模块形容desktopCapturer用来获取可用资源，这个资源可通过 getUserMedia 捕捉失去ipcRenderer是一个 EventEmitter 类的实例，它提供了无限的办法，能够从渲染过程向主过程发送同步或异步音讯，也能够收到主过程的相应remote提供了一个简略的跨过程之间通信的办法webFrame用来定制以后网页的渲染desktopCapturer模块desktopCapturer 模块用来获取可用的资源，能够用 getUserMedia 来获取。 示例：// 在渲染过程中var desktopCapturer = require('electron').desktopCapturer;desktopCapturer.getSources({types: ['window', 'screen']}, function(error, sources) { if (error) throw error; for (var i = 0; i < sources.length; ++i) { if (sources[i].name == "Electron") { navigator.webkitGetUserMedia({ audio: false, video: { mandatory: { chromeMediaSource: 'desktop', chromeMediaSourceId: sources[i].id, minWidth: 1280, maxWidth: 1280, minHeight: 720, maxHeight: 720 } } }, gotStream, getUserMediaError); return; } }});function gotStream(stream) { document.querySelector('video').src = URL.createObjectURL(stream);}function getUserMediaError(e) { console.log('getUserMediaError');}上述代码中，当调用 navigator.webkitGetUserMedia 时创立一个束缚对象，如果应用 desktopCapturer 的资源，必须设置 chromeMediaSource 为 "desktop" ，并且 audio 为 false。 ...

上面是 Electron 中主过程可用的模块： 模块形容app负责控制应用程序的整个生命周期autoUpdater该模块提供了一个到 Squirrel 自动更新框架的接口BrowserWindow能够用于创立一个新的浏览器窗口contentTracing用来收集 Chromium 内容模块产生的跟踪信息dialog用来显示原生零碎对话框，比方关上文件对话框global-Shortcut用来注册和登记全局的键盘快捷方式ipcMain该模块是 EventEmitter 的一个实例对象，在主过程中应用，能够发送同步或是异步的音讯和渲染过程进行交互Menu用来创立一个原生的菜单，比方上下文菜单MenuItem用来往菜单中增加菜单子项powerMonitor用来显示电池电量变动，只能是在主过程中应用，而且只能是在ready事件曾经收回的状况下powerSaveBlocker用来阻止零碎进入省电模式，休眠模式protocol用来注册一个定制的协定或是申明应用一个曾经存在的协定session用来创立新的 Session 对象，保留本地对象等操作webContents这是一个 EventEmitter，负责渲染和管制一个网页，是一个 BrowserWindow 的属性Tray一个 Tray 代表着一个操作系统告诉区域的一个 icon，通常状况下是和一个上下文菜单绑定的app模块app 模块是为了管制整个利用的生命周期设计的。 示例：例如在最初一个窗口被敞开时退出利用： const app = require('app');app.on('window-all-closed', function(){ app.quit();});app 对象能够收回以下事件： 事件形容will-finish-launching当程序实现根本的启动，相似于 ready 事件ready当 Electron 实现初始化时被触发window-all-closed当所有的窗口都曾经敞开的时候触发。仅在当程序将要推退出的时候触发。如果调用了 app.quit() 则不会触发before-quit当程序开始敞开窗口的时候收回，调用 event.prevertDefault() 将会阻止应用程序的默认的行为will-quit当窗口都曾经敞开，程序行将退出的时候收回该事件quit当应用程序正在退出时触发autoUpdater模块autoUpdater 模块提供了一个到 Squirrel 自动更新框架的接口。 autoUpdater 对象会触发以下的事件： 事件形容error当更新产生谬误的时候触发checking-for-update当开始查看更新的时候触发update-available当发现一个可用更新的时候触发，更新包下载会主动开始update-not-available当没有可用更新的时候触发update-downloaded在更新下载实现的时候触发BrowserWindow模块BrowserWindow 模块用于创立一个新的浏览器窗口。 示例：// 在主过程中const BrowserWindow = require('electron').BrowserWindow;// 在渲染过程中const BrowserWindow = require('electron').remote.BrowserWindow;var win = new BrowserWindow({ width: 800, height: 400, show: false });win.on('closed', function() { win = null;});win.loadURL('https://github.com');win.show();BrowserWindow 对象可触发下列事件： ...

本节咱们来学习常常在 Electron 开发中应用的专业术语。 ASARASAR 示意 Atom Shell Archive Format（Atom外壳存档格局），一个 ASAR 档案就是一个简略的 .tar 文件，也就是说是那些有关联的文本文件格式化到一个独自的文件中。并且 Electron 可能任意读取其中的文件而不须要解压整个文件。 创立 ASAR 格局次要是为了晋升 Windows 平台上的性能而创立。 Brightray简略的将libchromiumcontent利用到利用中的一个动态库，该术语是专门开发给 Electron 应用。 DMGDMG 指在 MacOS 上应用的苹果零碎的磁盘镜像打包格局。DMG 文件通常被用来散发利用的安装包（installers）。 electron-builder 反对应用 dmg 来作为编译的指标。 IPCIPC 示意 Inter-Process Communication（过程间通信）。Electron 应用 IPC 在主过程和渲染过程之间发送序列化的 JSON 音讯。 CRTCRT（即 C 运行时库）是蕴含 ISO C99 规范库的 C++ 规范库的一部分，实现它的 Visual C++ 库反对本机代码开发以及混合的本机代码和托管代码，它还用于 .NET 开发的纯托管代码。 IME输入法编辑器，是一个容许用户在输出键盘上没有找到存在的字符和符号的程序。例如，使用户能够用拉丁语键盘输入中文，日文，韩文和印度文字。 libchromiuncontent一个独自的开源库，蕴含了 Chromium 的模块以及全副的依赖。 main process主过程，个别是指 main.js 文件，是每个 Electron 利用的入口文件。它管制着整个 App 的生命周期，从开始到完结。 它也治理着零碎原生元素，比方菜单、菜单栏、Dock 栏、托盘等。主过程次要负责创立 APP 的每个渲染过程，并且整个 Node API 都集成在外面。 ...

本节咱们学习 Electron 中的键盘快捷键。在 Electron 中，键盘快捷键被称作加速器，它们可能分派到使用程序菜单中的操纵上，也可能全局分派，所以纵然你的使用程序没有获得键盘外围，它们也可能被触发。 Electron 中有主过程和渲染过程这两种进行，所以咱们能够别离在主过程中注册快捷键和在渲染过程中注册快捷键。 主过程注册快捷键在主过程注册快捷键有两种形式，一种是利用 Menu 模块来模仿快捷键，二就是全局快捷键。 本地快捷键咱们能够应用 Electron 中的 Menu 模块来配置键盘快捷键，只有在 app 处于焦点状态时才能够触发快捷键，应用比拟少。咱们在创立 Menuitem 时必须指定一个 accelerator 属性。 示例：const { Menu, MenuItem } = require('electron');const menu = new Menu();menu.append(new MenuItem({ label: 'Print', accelerator: 'Ctrl+P', click: () => { console.log('打印材料') }}))咱们还能够依据用户的操作系统配置不同的组合键： accelerator: process.platform === 'darwin' ? 'Alt+Ctrl+I' : 'Ctrl+Shift+I'全局快捷键在应用程序没有键盘焦点时，咱们能够应用 globalshortcut 模块检测键盘事件。咱们来看上面这个例子。 示例：上面代码中，咱们将开发者工具的快捷键设置为 Alt+B： // 引入electronconst {app, BrowserWindow,globalShortcut} = require('electron');let win;function createWindow() { // 创立浏览器窗口 win = new BrowserWindow({ width: 800, height: 400, webPreferences: { nodeIntegration: true, }, }); // 加载index.html文件 win.loadFile('../html/index.html'); // 主动关上开发者工具// win.webContents.openDevTools(); // 当 window 被敞开，这个事件会被触发 win.on('closed', () => { win = null; });}// Electron 会在初始化后并筹备，创立浏览器窗口时，调用这个函数app.on('ready', createWindow);// 当全副窗口敞开时退出app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); }});app.on('activate', () => { if (win === null) { createWindow(); }});// 注册快捷键app.on('ready', async () => { globalShortcut.register('Alt+B', function () { win.webContents.openDevTools(); }) createWindow();})而后咱们运行 npm start 启动程序，只须要按下 Alt+B 键就能够关上开发者工具啦。 ...

在 Electron 中 ，咱们能够应用 Widevine CDM 插件装载 Chrome 浏览器 。 获取插件Electron 没有为 Widevine CDM 插件配制许可 reasons，为了取得它，首先须要装置官网的 chrome 浏览器，这匹配了体系架构和 Electron 构建应用的 chrome 版本 。 留神 Chrome 浏览器的次要版本必须和 Electron 应用的版本一样，否则插件不会无效，尽管 navigator.plugins 会显示你曾经装置了它 。 Windows & OS X在 Chrome 浏览器中关上 chrome://components/ ，找到 WidevineCdm 并且确定它更新到最新版本，而后就能够从 APP_DATA/Google/Chrome/WidevineCDM/VERSION/_platform_specific/PLATFORM_ARCH/ 门路找到所有的插件二进制文件 。 APP_DATA 是零碎存放数据的地位，在 Windows 上为 %LOCALAPPDATA%。在 OS X 上为 ~/Library/Application Support。 VERSION 是 Widevine CDM 插件的版本字符串，相似 1.4.8.866。PLATFORM 是 mac 或 win。ARCH 是 x86 或 x64。 在 Windows 中，必要的二进制文件是 widevinecdm.dll 和 widevinecdmadapter.dll。在 OS X 中，则是 libwidevinecdm.dylib 和widevinecdmadapter.plugin。咱们能够将它们复制到任何中央，然而它们必须要放在一起。 ...

Electron 中反对 Pepper Flash 插件的应用。想要在 Electron 外面应用 Pepper Flash 插件，咱们须要手动设置 Pepper Flash 的门路，并且在应用程序中启用 Pepper Flash。 保留一份 Flash 插件的正本在 macOS 和 Linux 上，咱们能够在 Chrome 浏览器的 chrome://plugins 页面上找到 Pepper Flash 的插件信息。插件的门路和版本会对 Election 对其的反对有帮忙。你也能够把插件复制到另一个门路以保留一份正本。 增加插件在 Electron 里的开关咱们能够间接在命令行中用 --ppapi-flash-path 和 ppapi-flash-version 或者在 app 的筹备事件前调用 app.commandLine.appendSwitch 这个办法。同时增加 browser-window 的插件开关。例如： const { app, BrowserWindow } = require('electron')const path = require('path')// 指定flash门路，假设它与main.js放在同一目录中。let pluginNameswitch (process.platform) { case 'win32': pluginName = 'pepflashplayer.dll' break case 'darwin': pluginName = 'PepperFlashPlayer.plugin' break case 'linux': pluginName = 'libpepflashplayer.so' break}app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, pluginName))// 可选：指定flash的版本，例如v17.0.0.169app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169')app.on('ready', () => { let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { plugins: true } }) win.loadURL(`file://${__dirname}/index.html`) // ...})或者也能够尝试加载零碎装置的 Pepper Flash 插件，而不是装运 插件，其门路能够通过调用 app.getPath('pepperFlashSystemPlugin') 获取。 ...

概述在基于Umi搭建Electron App——从0到1中，应用webpack+electron-builder打包之后，最终生成的dist包体积过大，利用下载或更新时会影响用户体验。 electron-builder版本在此文章提到的electron-builder版本均为^22.10.15。 打包文件剖析——简略工程在对打包文件进行优化之前，首先须要剖析一下打包后的文件都有什么，各自占多大空间，找到优化的突破点。为了避免其余因素的烦扰，咱们先用最简略的electron工程来试一下。 electron-quick-start感激由electron官网提供的疾速启动模板electron-quick-start，这个模板的构造和内容非常简单，没有集成第三方dependencies。目录构造以及package.json如下图所示：在这个模板的根底上引入electron-builder作为打包工具，并做简略配置，如下图所示： 通过两种打包命令比照打包体积electron-builder --dir、electron-builder首先应用electron-builder --dir命令构建unpacked dir，应用这个命令构建出的包相较于间接应用electron-builder命令打出的包会少生成几个文件，其中占用空间最大的是.exe安装程序。比照图如下：从图中能够看进去.exe程序大小达到了55.9MB。再来比照一下dist包整体的大小：从下面两张比照图能够看进去，这两种形式打包后包的体积差距在56MB，次要是差在安装程序Setup.exe文件上了。ps：electron-builder 命令行接口请参考官网文档：Command Line Interface (CLI)。 一个最最最根本的electron工程打包后的体积未然达到了231MB，那么理论的我的项目恐怕只多不少。 打包文件的目录构造次要看.exe文件和asar文件。 .exe文件咱们运行的 electron.exe 可执行程序，实际上是早就曾经编译好的文件。他的性能就是加载 resources/app.asar 文件中的内容，包含入口文件的地位，也是从 app.asar 中打包的 package.json 的 main 字段来获取加载。打包工具须要做的事件只是把这个 electron.exe 文件批改下图标、作者、版本等信息即可。（你不晓得的 Electron (二)：理解 Electron 打包）这个最最最简略的electron工程的.exe文件大小为125MB asar文件asar是对源代码进行了打包封装。默认状况下，这些源代码是搁置在resources/app目录下明文可见的。asar就是对源代码进行最最根底的加密，让他人没有那么容易的就找到你的源代码。从图中看到，这个简略的eletron工程的asar文件才54KB。理论我的项目的代码逻辑会比这个空我的项目多，所以asar的体积也会变大。应用asar extract app.asar ./app 命令能够解压asar文件，解压之后的目录构造如下图：asar中node_modules里只蕴含dependencies，不蕴含devDependencies，开发依赖是不会被打包进去的。如下图：再来跟开发目录比照一下：主过程、渲染过程的代码文件都是原样复制到asar包里的。须要明确一点的是：asar并不会对代码进行混同加密，解压之后还是可能看到原始的代码逻辑。 打包文件剖析——简单工程basic-electron-umi-app这个工程和electron-quick-start不同的是这个工程集成了umi、ant-design、react等等dependencies。而且打包形式相较于electron-quick-start也有很大的不同，如下图所示：（更多内容详见基于Umi搭建Electron App——从0到1） web利用打包体积应用umi内置的打包命令umi dev对web利用进行打包，最终生成的打包文件夹build大小如下图所示：从上图中能够看进去web利用打包体积为3.73MB。 electron-builder --dir打包先应用electron-builder --dir命令构建unpacked dir，最终生成的打包文件夹dist大小如下图所示：从上图中看出应用electron-builder --dir打包后的dist文件夹大小为347MB。electron-builder打包时，是间接将web利用打包后的文件夹build复制到dist文件夹中的。去除掉web利用打包文件的3.73MB，dist包的大小为343.27MB，比electron-quick-start应用electron-builder --dir打包后的文件整整多出了100+MB。 electron-builder打包应用electron-builder打包后的dist大小如下图所示：生成的.exe文件大小如下图所示：与electron-quick-start工程应用electron-builder打包后比照：Setup.exe文件多出20+MB，dist包多出100+MB。 打包文件的目录构造次要看.exe文件和asar文件。 .exe文件没有想到。。。basic-electron-umi-app跟electron-quick-start的.exe文件的大小竟然一毛一样的。。。都是125MB。 asar文件（找到优化突破口了！！）basic-electron-umi-app的asar包大小为171MB，比electron-quick-start的asar包大了170+MB，这么多是差在哪块了？？？应用asar extract app.asar ./app 命令解压asar文件，解压之后的目录构造如下图：asar包中蕴含：web利用打包文件build、electron主过程文件、node_modules、package.json。build包和main.js一共占用空间3MB+。node_modules大小166MB！！看来asar包体积大的起因找到了。node_modules里的目录构造如下图：太长了截不全，来看一下package.json吧：这些dependencies依赖包其实在应用webpack对web利用进行打包的时候曾经打到build包里了，并进行了压缩和混同。看来electron-builder打包的时候把web利用的dependencies又打包了一遍，而且没做任何的解决。 electron-builder打包输入信息从图中能够看出loaded configuration时是读取package.json中的配置。如果能将web利用和electron的package.json离开，就能够避免出现这个问题。electron-builder刚好反对双package.json构造。 优化之路参考electron-builder官网文档Two package.json Structure（中文版本：双package.json构造），批改basic-umi-electron-app工程的构造及相干配置。 新建app文件夹在工程根目录新建app文件夹。 public/main.js——>app/main.js将之前放在public目录下的main.js文件挪动到app文件夹下。 app/package.json在app文件夹中新建package.json文件。 参考electron-builder官网文档configuration在package.json文件中增加一些形容信息装置electron、electron-builder作为开发依赖配置electron app主入口文件、主页、脚本命令对electron-builder做简略配置。具体配置如下图所示： app/package.json中增加electron-builder配置和之前相比增加了一处配置： main.js：之前的main.js是放到了public文件夹下，webpack打包时会将public文件夹下的所有文件复制到build包中，其实这样做也是能够的。然而为了将electron和web利用的构造分的更分明，所以将main.js挪到app文件夹下，并配置files，electron-builder打包时会将files中配置的文件复制到asar文件中。 webpack打包配置批改 outputPath：将electron-builder的配置挪到了app文件夹下的package.json中，所以同样须要将web利用的打包输入门路改成app文件夹下，不然electron-builder打包的时候找不到build文件夹会报错 ...

为了使调试更容易，Electron 原生反对 Chrome DevTools 扩大。对于大多数 DevTools 的扩大，咱们能够间接下载源码，而后通过 BrowserWindow.addDevToolsExtension 加载它们。Electron 会记住曾经加载了哪些扩大，所以不须要每次创立一个新 window 时都调用 BrowserWindow.addDevToolsExtension。 如何加载一个DevTools扩大程序要在 Electron 中加载一个扩大，须要在 Chrome 浏览器中下载它，找到它在系统目录中地位，而后调用BrowserWindow.addDevToolsExtension(extension) 来加载它。 示例：上面以 React Developer Tools 为例： 首先咱们须要在 Chrome 中装置 React Developer Tools 。关上 chrome://extensions，找到扩大程序的 ID，形如 fmkadmapgofadopljbjfkapdkoienihi 的 hash 字符串。找到 Chrome 扩大程序的寄存目录： 在 Ｗindows 下为 %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions在 macOS 下为 ~/Library/Application Support/Google/Chrome/Default/Extensions在 Linux 下为：~/.config/google-chrome/Default/Extensions/~/.config/google-chrome-beta/Default/Extensions/~/.config/google-chrome-canary/Default/Extensions/~/.config/chromium/Default/Extensions/将扩大的地址传递给 BrowserWindow.addDevToolsExtension，例如： const path = require('path') const os = require('os') BrowserWindow.addDevToolsExtension( path.join(os.homedir(), '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.3.0_0') )如何移除一个DevTools扩大程序要移除一个 DevTools 扩大，能够传递扩大程序的名称到 BrowserWindow.removeDevToolsExtension 中，扩展名的名称由 BrowserWindow.addDevToolsExtension 返回，咱们能够应用 BrowserWindow.getDevToolsExtensions 应用程序编程接口。 ...

本节咱们来学习如何在 Electron 下应用 Selenium 和 WebDriver。 SeleniumSelenium 是 ThoughtWorks 提供的一个弱小的基于浏览器的开源自动化测试工具。Selenium 是一个用于 Web 应用程序测试的工具，测试间接主动运行在浏览器中，就像真正的用户在手工操作一样。反对的浏览器包含 IE、Chrome Opera、Firefox 等。这个工具的次要性能包含： 测试与浏览器的兼容性，测试应用程序是否可能很好地工作在不同浏览器和操作系统之上。测试零碎性能，创立回归测试测验软件性能和用户需要。反对主动录制动作和主动生成 .NET、Perl、Python、Ruby 和 Java 等不同语言的测试脚本。Selenium 测试间接在浏览器中运行，就像实在用户所做的一样。Selenium 测试能够在 Windows、Linux 和 Macintosh 上的 Internet Explorer、Chrome 和 Firefox 中运行。其余测试工具都不能笼罩如此多的平台。 WebDriverWebDriver 是一款开源的反对多浏览器的自动化测试工具。 它提供了操作网页、用户输出、JavaScript 执行等能力。 ChromeDriver 是一个实现了 WebDriver 与 Chromium 联接协定的独立服务。 它也是由开发了 Chromium 和 WebDriver 的团队开发的。 配置SpectronSpectron 是 Electron 官网反对的 ChromeDriver 测试框架。 它是建设在 WebdriverIO 的顶层，并且帮忙咱们会在测试中拜访 Electron API 和绑定 ChromeDriver。 spectron 的装置命令如下所示： $ npm install --save-dev spectron示例：下述代码用于测试验证是否关上了一个带题目的可视窗口： const Application = require('spectron').Applicationconst assert = require('assert')const myApp = new Application({ path: '/Applications/MyApp.app/Contents/MacOS/MyApp'})const verifyWindowIsVisibleWithTitle = async (app) => { await app.start() try { // 查看窗口是否可见 const isVisible = await app.browserWindow.isVisible() // 验证窗口是否可见 assert.strictEqual(isVisible, true) // 获取窗口题目 const title = await app.client.getTitle() // 验证窗口题目 assert.strictEqual(title, 'my_electron') } catch (error) { // 记录任何故障 console.error('测试失败', error.message) } // 进行利用 await app.stop()}verifyWindowIsVisibleWithTitle(myApp)Spectron 导出一个 Application 类，该类在配置后能够启动和进行 Electron 应用程序。path 字段示意要启动的 Electron 应用程序可执行文件的字符串门路。 ...

背景构想一个场景，当咱们在浏览一个网页并且须要下载某个资源时，你的电脑可能常常会跳出一个提示框，询问你是否须要关上“迅雷”。当咱们点击“是”，则会唤醒该本地利用进行下载工作。针对这个场景产生了一个疑难，网页是如何关上PC端利用的呢？ 本文针对Electron利用在Windows零碎和Mac零碎如何唤醒进行探讨。 Electron 基础架构Electron 是一个能够用 JavaScript、HTML 和 CSS 构建桌面应用程序的库。这些应用程序能打包到 Mac、Windows 和 Linux 零碎上运行，也能上架到 Mac 和 Windows 的 App Store。 Electron 联合了 Chromium、Node.js 以及 操作系统本地的 API（如关上文件窗口、告诉、图标等）。 Electron 与 Chromium 在架构上很类似。Chromium运行时有一个 Browser Process，以及一个或者多个 Renderer Process。 Renderer Process 顾名思义负责渲染Web页面。Browser Process 则负责管理各个 Renderer Process 以及其余局部（比方菜单栏，收藏夹等等），如下图： 在 Electron中，构造依然相似，不过这里是一个 Main Process 治理多个 Renderer Process。 而且在 Renderer Process 能够应用 Node.js 的 API，这就赋予来 Electron 极大的能力，以下是主过程以及渲染过程能够拜访到的API： 如何将 Chromium 与 Node 整合 Electron 最让人兴奋的中央在于 Chromium 与 Node 的整合。艰深的讲，咱们能够在 Chromium 的管制台上做任何 Node 能够做的事。 ...

本节咱们来看一下 Chrome 浏览器和 Electron 中反对的命令行开关。咱们能够将这些命令行开发在 app 模块的 ready 事件收回之前应用 app.commandLine.appendSwitch 来增加它们到利用的 main 脚本中。 示例：例如增加一个 remote-debugging-port 到利用的 main 脚本： const app = require('electron').app;// 增加命令行开关到脚本app.commandLine.appendSwitch('remote-debugging-port', '8315');app.on('ready', function() { // ...});命令行开关上面咱们是一些 Electron 反对的罕用的命令行开关。 --auth-server-whitelist=url启用了集成身份验证的以逗号分隔的服务器列表。 例如： --auth-server-whitelist='*example.com, *9xkd.com, *jswui'上述代码示意任何以 example.com、 9xkd.com、 jswui 结尾的 url, 都须要思考集成验证。如果没有 * 前缀，url 必须齐全匹配。 --enable-api-filtering-logging为以下 API 启用调用方堆栈日志记录（筛选事件）： desktopCapturer.getSources() / desktop-capturer-get-sourcesremote.require() / remote-requireremote.getGlobal() / remote-get-builtinremote.getBuiltin() / remote-get-globalremote.getCurrentWindow() / remote-get-current-windowremote.getCurrentWebContents() / remote-get-current-web-contents--client-certificate=path此命令行开关用于设置客户端的证书文件 path 。 --ignore-connections-limit=domains此命令行开关能够疏忽用逗号 , 分隔的 domains 列表的连贯限度。 --disable-http-cache用于禁止申请 HTTP 时应用磁盘缓存。 ...

本节咱们学习如何在 Electron 中应用 Node 原生模块。 Electron 反对原生的 Node 模块，但因为和官网的 Node 相比，Electron 有可能应用一个和咱们零碎上所装置的 Node 不同的 V8 引擎，所以应用的模块须要从新编译能力应用。如果咱们想编译原生模块，则须要手动设置 Electron 的 headers 的地位。 如何装置原生模块有三种装置原生模块的办法，别离是 ： 为 Electron 装置并从新编译模块。通过 npm 装置原生模块。为 Electron 手动编译。为Electron装置并从新编译模块最简略的形式就是通过 electron-rebuild 包为 Electron 重建模块，该模块能够主动确定 Electron 的版本，并解决下载 headers、为应用程序重建本机模块等步骤。 示例：例如要通过 electron-rebuild 来重建模块，首先须要装置 electron-rebuild： npm install --save-dev electron-rebuild每次运行 npm install 时，也会同时运行上面这条命令： ./node_modules/.bin/electron-rebuild在 windows 下如果上述命令遇到了问题，能够尝试执行如下命令： .\node_modules\.bin\electron-rebuild.cmd通过npm装置咱们还能够通过 npm 来间接装置原生模块。大部分步骤和装置一般模块时一样，然而须要本人设置一些零碎环境变量。 示例：例如要装置所有 Electron 的依赖： # Electron的版本export npm_config_target=1.2.3# Electron的指标架构export npm_config_arch=x64export npm_config_target_arch=x64# 下载Electron的headersexport npm_config_disturl=https://electronjs.org/headers# 通知node-pre-gyp咱们是在为Electron生成模块export npm_config_runtime=electron# 通知node-pre-gyp从源代码构建模块export npm_config_build_from_source=true# 装置所有依赖，并缓存到 ~/.electron-gypHOME=~/.electron-gyp npm install为Electron手动编译原生模块的开发人员如果想要在 Electron 中进行测试，可能要手动编译 Electron 模块。能够应用 node-gyp 来间接编译。 ...

为舒缓 Windows 下路径名过长的问题 issues，略微放慢 require 的速度以及简略隐匿源代码，咱们能够抉择把利用打包成 asar 档案文件，这只须要对源代码做一些很小的改变。大部分用户能够轻松实现这个性能，因为它在 electron-packager、electron-forge 和 electron-builder 中都失去了反对，开箱即用。 生成asar包asar 是一种将多个文件合并成一个文件的类 tar 格调的归档格局。Electron 无需解压整个文件，就能够从其中读取任意文件内容。能够按如下步骤来将利用打包成 asar ： 装置 asar：$ npm install -g asar应用 asar pack 打包：$ asar pack your-app app.asar应用asar包在 Electron 中有两类 APIs，别离是 Node.js 提供的 Node API 和 Chromium 提供的 Web API。这两种 API 都反对从 asar 包中读取文件。 Node API因为 Electron 中打了特地补丁， Node API 中如 fs.readFile 或者 require 之类的办法能够将 asar 视之为虚构文件夹，读取 asar 外面的文件就和从实在的文件系统中读取一样。 示例：例如假如咱们在 /path/to 文件夹下有个 example.asar 包： $ asar list /path/to/example.asar/app.js/file.txt/dir/module.js/static/index.html/static/main.css/static/jquery.min.js从 asar 包读取一个文件： ...

本节咱们学习 Electron 的利用部署。如果咱们要应用 Electron 部署咱们的应用程序，则须要进行打包和重塑。能够应用上面几个第三方打包工具来实现： electron-forgeelectron-builderelectron-packager这些打包工具将笼罩公布一个 Electron 利用所需采取的所有步骤，例如打包应用程序，重组可执行程序，设置图标和可配置的创立安装程序。 手动公布咱们能够抉择手动公布咱们的 app，为了应用 Electron 部署你的应用程序，须要下载 Electron 的 prebuilt binaries 。而后寄存应用程序的文件夹须要叫做 app ，并且须要放在 Electorn 的资源文件夹 Resources 下。留神，Electron 的预制二进制文件的地位用 electron/示意。 示例：Linux 和 Windows 中的目录构造如下所示： electron/resources/app├── package.json├── main.js└── index.html在 macOS 中的目录构造如下所示： electron/Electron.app/Contents/Resources/app/├── package.json├── main.js└── index.html而后运行 Electron.app，或者 Linux 中的 electron，Windows 中的 electron.exe，接着 Electron 就会以应用程序的形式启动。electron 文件夹将被部署并能够分发给最终的使用者。 将应用程序打包成一个文件除了通过拷贝所有的资源文件来散发应用程序之外，咱们还能够通过打包应用程序为一个 asar 库文件以防止裸露源代码。 为了应用一个 asar 库文件代替 app 文件夹，咱们须要批改这个库文件的名字为 app.asar ，而后将其放到 Electron 的资源文件夹下，而后 Electron 就会试图读取这个库文件并从中启动。 示例：如下所示，在 Windows 和 Linux 中： electron/resources/└── app.asar在 macOS 中则为： ...

本节咱们来学习什么是主过程和渲染过程，主过程与渲染过程之间有什么区别，主过程和渲染过程之间的通信。上面咱们先来看一下过程的概念。 过程（Process）是计算机中的程序对于某数据汇合上的一次运行流动，是零碎进行资源分配和调度的根本单位，是操作系统构造的根底。 什么是主过程在 Electron 中，启动我的项目时运行的 main.js 脚本就是咱们说的主过程。在主过程运行的脚本能够以创立 web 页面的模式展现 GUI。 一个 Electron 利用有且只有一个主过程。并且创立窗口等所有零碎事件都要在主过程中进行。 什么是渲染过程因为 Electron 应用 Chromium 来展现页面，所以 Chromium 的多过程构造也被充分利用。每个 Electron 的页面都在运行着本人的过程，这样的过程咱们称之为渲染过程。 也就是说每创立一个 web 页面都会创立一个渲染过程。每个 web 页面都运行在它本人的渲染过程中。每个渲染过程是独立的，它只关怀它所运行的页面。 主过程与渲染过程的区别主过程应用 BrowserWindow 实例创立网页。每个 BrowserWindow 实例都在本人的渲染过程中运行。当一个 BrowserWindow 实例被销毁后，相应的渲染过程也会被终止。 主过程治理所有页面和与之对应的渲染过程。每个渲染过程都是互相独立的，并且只关怀他们本人的网页。 应用Electron的APIElectron 在主过程和渲染过程中提供了大量 API 去帮忙开发桌面应用程序， 在主过程和渲染过程中，能够通过require() 办法将其蕴含在模块中，以此获取 Electron 的 API。 引入 electron： const electron = require('electron');所有 Electron 的 API 都被指派给一种过程类型。许多 API 只能被用于主过程或渲染过程中，但其中一些 API 能够同时在上述两种过程中应用。 每一个 API 的文档都将申明咱们能够在哪种过程中应用该 API 。 Electron 中的窗口是应用 BrowserWindow 类型创立的一个实例， 它只能在主过程中应用，如下所示： const { BrowserWindow } = require('electron')const win = new BrowserWindow()主过程和渲染过程之间通信Electron 的主过程是在后盾运行，对应 main.js 文件。而渲染过程是前端看到的，对应 index.html 文件。这个两个过程之间的通信首选 ipc 形式，因为它会在实现时返回，而不会阻止同一过程中的其余操作。 ...

本节咱们来学习 Electron 中的环境变量，环境变量次要是用来控制应用程序配置和行为而不必更改代码。某些 Electron 行为是由它管制的，因而它们比命令行标记和应用程序的代码更早初始化。 咱们能够将环境变量分为两种：生产环境相干变量和开发环境相干变量。 生产环境相干变量生产环境相干变量罕用于在打包后的 Electron 利用程序运行时应用。有上面几种： NODE_OPTIONS：Electron 包含对 Node 的 NODE_OPTIONS 的子集反对，除与 Chromium 应用 BoringSSL 相冲突的状况外，大多数都失去了反对。GOOGLE_API_KEY：Electron 蕴含一个硬编码 API 明码，用于向谷歌的天文编码 web 服务发送申请。ELECTRON_NO_ASAR：禁用 ASAR 反对，该变量只在 set 的派生子过程和衍生子过程中受反对。ELECTRON_RUN_AS_NODE：作为失常的 Node.js 过程启动。在这种模式下，咱们能够像运行一般的 Node.js 可执行文件时一样将 cli 选项传递给 Node.js，但以下标记除外：--openssl-config--use-bundled-ca--use-openssl-ca--force-fips--enable-fipsELECTRON_NO_ATTACH_CONSOLE：不要附加到以后控制台会话。ELECTRON_FORCE_WINDOW_MENU_BAR：不要在 Linux 上应用全局菜单栏。ELECTRON_TRASH：在 Linux 上设置垃圾回收实现，默认为 gio。开发环境相干变量开发环境相干变量罕用于开发和调试目标。有上面几种： ELECTRON_ENABLE_LOGGING：将 Chrome 的外部日志记录打印到控制台。ELECTRON_LOG_ASAR_READS：当 Electron 从 ASAR 文件读取时，咱们须要读取偏移量和文件门路记录到零碎 timdir。将后果文件提供给 ASAR 模块以优化文件排序。ELECTRON_ENABLE_STACK_DUMPING：Electron 解体时，将堆栈跟踪打印到控制台。如果 crashReporter曾经启动了, 则此环境变量将不起作用。ELECTRON_DEFAULT_ERROR_MODE：当 ELectron 解体时显示 Windows 的解体对话框。如果 crashReporter曾经启动了, 则此环境变量将不起作用。ELECTRON_OVERRIDE_DIST_PATH：当 electron 包运行时，该变量告知 electron 命令应用指定 Electron 的构建代替由 npm install 下载的构建。

环境筹备在开发之前须要筹备Node环境，能够去Node官网下载安装包，装置Node环境以及Npm工具。我本地应用nvm治理三个版本的Node，搭建Umi+Antd+Electron框架时应用的Node版本及Npm版本如下图所示。 Tips: 如果感觉npm下载依赖包的速度过慢能够思考应用淘宝镜像或者换成yarn，然而不倡议应用cnpm，因为cnpm下载的依赖包都是扁平化的，会导致打包的过程十分慢且Node内存溢出的问题。 应用Umi创立React我的项目因为想要应用Ant Design作为UI库，所以能够参考Ant Design Pro的搭建步骤。（如果参考UmiJS的搭建步骤，还须要本人再去集成Ant Design，所以还不如间接参考Ant Design Pro的搭建步骤）如果你的电脑和我的一样是Windows零碎，那么依照Ant Design Pro提供的步骤搭建框架会呈现下图的问题： 依据上图中的提醒，找到D:\front_end_environment\node\node_global\bin\create-umi这个文件关上看一下： 在Windows零碎下，盘符前不须要‘%~dp0’符号。将上图红框圈出的局部删掉后保留该文件并执行create-umi命令（注：不要再执行yarn create umi命令，否则这会重新安装create-umi，这样会把之前改过的文件笼罩掉。）如果执行create-umi命令报错“不是外部或外部命令”，那么须要将“D:\front_end_environment\node\node_global\bin”门路增加至零碎变量path中。 create-umi配置步骤执行create-umi命令之后须要依据提醒抉择配置： 抉择模板类型： 这里回车抉择第一个ant-design-pro。 抉择ant-design-pro版本： 这里回车抉择V4版本。 抉择语言 尽管TS很火，但我还是喜爱JS（TS还不咋会呢~~~） 抉择装置Ant Design Pro的所有模块还是安装简单的脚手架 对Ant Design比拟相熟的话，抉择complete。 创立胜利 最终胜利搭建好的React我的项目目录构造如下： 关上WS，运行npm install、npm run start，界面如下： 为了直观地区分对 第四步“抉择装置Ant Design的所有模块还是安装简单的脚手架” 进行不同抉择的区别，我也进行了简略脚手架的装置，界面如下： 比照两种抉择的后果，显然装置Ant Design Pro的所有模块会看到Ant Design官网提供的丰盛的页面样例，外面涵盖了大部分的Ant Design组件。而简略的脚手架中就只有简略的两个页面，然而两个工程除了pages文件夹下的内容不一样之外，其余内容简直没有什么不同。所以理论利用中依据理论需要做出适合的抉择即可。 Web利用——>Electron利用引入Electron依赖参考Electron官网文档，执行npm install electron --save-dev命令装置Electron作为开发依赖。 编写Electron主过程文件参考Electron官网文档，编写Electron主过程文件main.js。临时先将main.js放在工程根目录。main.js文件内容如下： 注：图片中所示代码的17行，mainWindow.loadURL(url); 这里的参数url应该与webpck的devServer配置项的host和port统一。应用Umi创立的我的项目内置了webpack devServer配置，默认配置见devServer或间接看下图： 如果你本地的8000端口被占用了，能够在package.json中指定PORT，就像这样： 或者，你也能够在工程根目录下新建.env文件，在.env文件中配置PORT，就像这样： Umi中内置的环境变量配置项还有很多，详见：env-variables。 运行Electron Appmain.js配置好之后，开始尝试把Electron App run 起来~~~在package.json中配置程序主入口main.js，并且增加运行Electron的脚本命令，如下图： 而后。。。看到electron脚本命令后面的绿色小三角了吗？点它点它！或者间接在Terminal输出npm run electron，就能把electorn利用run起来了，如下图： ...

Electron 的开发并不是非常死板的，也就是说开发、编译、打包与公布 Electron 应用程序的办法中， 没有一个是能够称为 "唯一标准" 的办法。Electron 的编译和运行时相干额定性能通常能够在 npm 的独立安装包中找到，这样开发者就能够依据本人的需要同时编译利用和 build pipeline。 模板与命令行界面一个模板就像是一张空白的画布，咱们能够以它为根底来搭建利用。 个别咱们能够从一个代码仓库克隆一个模板，而后批改成本人想要的样子。 命令行工具在开发和散发过程中能够给咱们提供很大的帮忙，然而同样的，它们对代码构造和构建我的项目有着硬性的要求。对于初学者来说，命令行工具是非有用。 electron-forgeElectron Forge 是一个用来构建现代化 Electron 利用的欠缺的工具。Electron Forge 能够将多个现有的 Electron 构建工具整合为一个简略易用的工具包，所有人都能够用它来疾速地搭建 Electron 开发环境。 Forge 将一些风行框架整合为“开箱即用”的模板，例如 React、Vue、Angular 等。Forge 的一些外围模块来自于下层的 Electron 社区，因此 Electron 次要保护人员提交的 Electron 更新也会使 Forge 的用户受害。 装置命令如下所示： npm install -g electron-forgeelectron-builderElectron Builder 是一个齐备的 Electron 利用打包和散发解决方案，它致力于软件开发的集成体验。 electron-builder 出于简化的目标增加了一个依赖项，能够在外部治理所有更多的要求。 electron-builder 会将 Electron 维护者应用的模块和性能(例如: auto-updater) 替换为自定义的. Electron Builder打包的利用内组件的集成度会更高，同时与支流的Electron利用共同点也就更少了。 装置命令如下所示： npm install -g electron-builderelectron-react-boilerplate如果咱们不心愿应用任何工具，而想要简略地从一个模板开始构建，那么能够应用 electron-react-boilerplate 。它在社区中很受欢迎，并在外部应用了 electron-builder。 链接：https://www.9xkd.com/

Electron 能够应用纯 JavaScript 调用丰盛的原生 APIs 来发明桌面利用。咱们能够把它看作一个 Node. js 的变体，它专一于桌面利用而不是 Web 服务器端。 从开发的角度来看，Electron 利用实质上是一个 Node. js 应用程序。 与 Node.js 模块雷同，利用的入口是 package.json 文件。 一个简略的 Electron 我的项目蕴含三个根本文件：package.json，index.hmtl，main.js 。 package.json 是 Node.js我的项目的配置文件。index.html 是桌面利用的界面页面。main.js 是利用的启动入口文件。创立我的项目咱们在指定门路中新建一个名为 my_electron 的文件夹作为我的项目根目录，而后在命令工具中应用 cd 命令，将当前目录更改为我的项目根目录： >cd C:\Users\lu\Desktop\my_electron如下图所示： 而后执行 npm init 命令进行我的项目初始化，如下图所示： 命令执行胜利后，我的项目根目录下会创立一个 package.json 文件，如果全副抉择默认配置，则能够间接执行 npm init -y 命令。 批改package.json咱们能够批改创立好的 package.json 文件，在 scripts 中增加脚本命令，如下所示： { "name": "blogs", "version": "1.0.0", "description": "", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron ./src/main.js" }, "keywords": [], "author": "Silenzio", "license": "ISC", "devDependencies": { "electron": "^10.1.2" }}咱们在这个文件中指定了一个启动脚本，之后能够通过这个脚本来启动程序，它将用 electron 来启动 src 目录下的 main.js 文件。 ...

本节咱们来学习 Electron 的装置。要装置 Electron ，首先须要保障本地曾经装置好了 Node.js。 Node.js的装置Node.js 的官网地址为：https://nodejs.org/en/，进入... 举荐下载 LTS 版本，下载好后，执行安装程序，依据疏导实现装置即可。 装置实现后，咱们须要确认 Node.js 是不是能够失常工作。能够通过在命令行工具中输出如下命令来检测是否装置胜利： $ node -v$ npm -v如下图所示，如果这两个命令均显示版本号则示意装置胜利，因为 Node.js 的版本始终在更新，大家能够在官网下载最新版本： Electron的装置要装置预编译好的的二进制文件，咱们能够应用 npm 命令进行装置。 装置命令如下所示： npm install electron --save-dev这个装置命令中，--save-dev 示意将模块装置到我的项目目录下，并在 package.json 文件的 devDependencies 节点写入依赖。 或者咱们也能够抉择全局装置，全局装置则须要在命令中加一个 -g： npm install electron -g如下图所示： 应用 npm 得速度速度超慢，举荐能够把 npm 的仓库切换到国内淘宝仓库，注册 cnpm 命令： npm install -g cnpm --registry=https://registry.npm.taobao.org而后应用 cnpm 进行装置： cnpm install electron -g检测是否装置胜利装置好后，咱们能够通过 -v 命令检测 electron 是否装置胜利，命令如下所示： > electron -v如图所示： 装置打包输入工具为了不便最终成绩输入，倡议装置 electron-packager 工具，装置也很简略，倡议以上面的命令全局装置： ...

本教程咱们来学习 Electron 的基础知识，上面咱们先来学习一下什么是 Electron。 Electron是什么Electron 是是 GitHub 开发的一个开源框架。它容许应用 Node.js（作为后端）和 Chromium（作为前端）实现桌面 GUI 应用程序的开发。 Electron 能够用于构建具备 HTML、CSS、JavaScript 的跨平台桌面应用程序，它通过将 Chromium 和 node.js 合同一个运行的环境中来实现这一点，应用程序能够打包到 Mac、Windows 和 Linux 零碎上。 倒退历程2013 年的时候，Atom 编辑器问世，作为实现它的底层框架 Electron 也逐步被熟知，到 2014 年秋季被开源，那时它还是叫 Atom Shell。接下来的几年，Electron 在一直的更新迭代，简直每年都有一个重大的里程碑： 2013年4月，Electron 以 Atom Shell 为名起步。2014年5月，Atom 以及 Atom Shell 以 MIT 许可证开源。2015年4月，我的项目被重命名为 Electron。2016年5月11日，电子版公布 v1.0.0 版本。2016年5月20日，容许向Mac利用商店提交软件包。2016年8月2日，反对Windows商店2018年5月2号公布的2.0.0反对平台目前反对 Electron 的平台有 OS X、Windows、Linux： OS X：对于 OS X 零碎仅有 64 位的二进制文档，反对的最低版本是 OS X 10.8。Windows：仅反对 Windows 7 及其当前的版本，之前的版本中是不能工作的。对于 Windows 提供 x86 和 amd64 (x64) 版本的二进制文件。须要留神的是 ARM 版本的 Windows 目前尚不反对。Linux：预编译的 ia32(i686) 和 x64(amd64) 版本 Electron 二进制文件都是在 Ubuntu 12.04 下编译的，arm 版的二进制文件是在 ARM v7（硬浮点 ABI 与 Debian Wheezy 版本的 NEON）下实现的。预编译二进制文件是否可能运行，取决于其中是否包含了编译平台链接的库，所以只有 Ubuntu 12.04 能够保障失常工作，然而 Ubuntu 12.04+ 、Fedora 21、Debian 8 等平台也被证实能够运行 Electron 的预编译版。Electron的优缺点Electron 的长处如下所示： ...

前言：在应用electron的自动更新的时候，有时候呈现BUG时想回退版本时却只能向上降级，非常之无奈。因为看官网文档和百度搜寻(我的搜寻技巧比拟水)都是在教人如何更新降级，却没有人讲降级，所以由我率领各位理解下如何回退版本! (如何在线更新请自行百度) 如何Downgrade不废话先上后果 autoUpdater.allowDowngrade = true嗯这样子就完结了看源码的过程中我发现对于检测更新的函数里有一个叫 allowDowngrade aync isUpdateAvailable(){// .... const isLatestVersionNewer = (0, _semver().gt)(latestVersion, currentVersion); const isLatestVersionOlder = (0, _semver().lt)(latestVersion, currentVersion); if (isLatestVersionNewer) { return true; } return this.allowDowngrade && isLatestVersionOlder;}虽说翻译过去意思曾经很明确，但眼见为实，而后找到这个属性的解释嗯应该是我想要的后果了，但还是不确定能不能胜利所以我设置了 autoUpdater的allowDowngrade位true 并且上测试服务器上搁置了一个 1.3.9本地为1.3.10 胜利回退！我的配置如下 // 在autoUpdater有一个属性是allowDowngrade是用来判断是否能够回退的属性autoUpdater.allowDowngrade = trueautoUpdater.setFeedURL(downloadUrl);autoUpdater.on('error', function (error) { console.log('err', error); sendUpdateMessage(message.error);});autoUpdater.on('checking-for-update', function (info) { console.log('checking-for-update', JSON.stringify(info)); sendUpdateMessage(message.checking);});autoUpdater.on('update-available', function (info) { console.log('update-available', JSON.stringify(info)); sendUpdateMessage(message.updateAva);});autoUpdater.on('update-not-available', function (info) { console.log('update-not-available', JSON.stringify(info)); // sendUpdateMessage(message.updateNotAva);});// 更新下载进度事件autoUpdater.on('download-progress', function (progressObj) { mainWindow.webContents.send('downloadProgress', progressObj);});autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) { ipcMain.on('isUpdateNow', (e, arg) => { // 退出并装置 autoUpdater.quitAndInstall(); }); mainWindow.webContents.send('isUpdateNow');});ipcMain.on('checkForUpdate', () => { // 查看是否须要更新 autoUpdater.checkForUpdates();});心愿能帮忙到大家！ ...

原文地址：https://webfe.kujiale.com/ele...酷家乐客户端：下载地址https://www.kujiale.com/activ...概述目前存在两种架构芯片的 macbook，别离是 x86 和 arm 架构，对应了 Intel 芯片和 Apple M1 芯片。 旧版本酷家乐客户端，是通过 Rosetta 2 运行在 M1 芯片的 macbook 设施上的。新版本12.2.0之后的酷家乐客户端原生反对了 M1 芯片，本文次要阐明酷家乐客户端是如何原生反对 M1 芯片的。 名词解释酷家乐客户端：酷家乐官网基于Electron开发的桌面客户端，反对 windows 和 macos。 Rosetta：苹果提供的用于转译利用的工具。Rosetta 最后是用于将 PowerPC 的利用转译成 Intel 的利用，这次苹果公布 M1 芯片设施的同时公布了 Rosetta 2，用于将 Intel 的利用转译为能够在 arm 架构的 M1 芯片上运行的利用（相干文档：https://zh.wikipedia.org/wiki... 、https://support.apple.com/zh-... ） 为什么须要反对 M1 芯片回顾苹果上一次的芯片架构替换，也就是从 PowerPC 换成 intel x86，在刚开始的2005年零碎默认装置了 Rosetta 用于转译，而2009年零碎不在默认装置 Rosetta，到2011年零碎彻底不在反对 Rosetta。 也就是说目前提供的 Rosetta 2 也应该会在3、4年后不在默认提供，5、6年后彻底不在反对，所以反对 M1 芯片必须是要实现的。 x64 的安装包酷家乐客户端之前公布的 macos 安装包是针对 x64 构建的，通过 Rosetta 是能够运行的。 ...

更新-增量更新（二）不好意思，鸽了挺久了，上一期咱们应用app.asar.unpacked实现了electron的增量更新，本期咱们介绍的是如何应用exe替换asar来实现增量更新。 本期内容是基于上一期的内容来解说的，且次要针对于Windows零碎（mac零碎能够对app.asar批改） 替换难点在应用了asar后，Windows零碎的Electron利用启动后其app.asar会被占用，不能对其进行批改和删除，必须完结Electron利用的过程后才能够对其进行批改。因为Windows的uac限度，如果装置在C盘的话，批改app.asar会有权限问题。解决思路其实呢子线程也能够跑node，然而呢因为主过程完结了咱们并没有node环境运行node命令，所以此办法不通，当然你也可增加一个编译好的node运行子线程js，然而体积问题得失相当。在Windows下咱们能够用批处理文件bat来解决文件，然而bat还是有uac以及执行时会有cmd窗口，咱们能够把写好的bat文件转换为exe文件来解决这些问题。 咱们能够应用node衍生独立存在的子过程，把子过程和主过程分来到，完结掉Electron利用的过程，用这个子过程进行替换。uac限度能够应用exe文件来获取管理员权限进行解决。解决方案1. 打包批改咱们这里去除之前的app.asar.unpacked打包，把之前vue.config的正文掉，这样咱们打包就只有asar文件了 // extraResources: [{// from: "dist_electron/bundled",// to: "app.asar.unpacked",// filter: [// "!**/icons",// "!**/preload.js",// "!**/node_modules",// "!**/background.js"// ]// }],// files: [// "**/icons/*",// "**/preload.js",// "**/node_modules/**/*",// "**/background.js"// ],2. 构建增量zip上一期构建增量zip时应用了afterPack钩子，这里咱们对其批改，把新版本的app.asar重命名为update.asar，放入增量的app.zip包里，不理解的能够看看上一期的内容 const path = require('path')const AdmZip = require('adm-zip')const fse = require('fs-extra')exports.default = async function(context) { let targetPath if(context.packager.platform.nodeName === 'darwin') { targetPath = path.join(context.appOutDir, `${context.packager.appInfo.productName}.app/Contents/Resources`) } else { targetPath = path.join(context.appOutDir, './resources') } const asar = path.join(targetPath, './app.asar') fse.copySync(asar, path.join(context.outDir, './update.asar')) var zip = new AdmZip() zip.addLocalFile(path.join(context.outDir, './update.asar')) zip.writeZip(path.join(context.outDir, 'app.zip')) fse.removeSync(path.join(context.outDir, './update.asar'))}3. 模仿接口同上一期，咱们这里批改了upDateUrl和upDateExe，upDateUrl是增量zip，upDateExe是咱们用来替换asar的exe文件。 ...

应用electron开发是很难不必到electron的模块，这样咱们就没法在浏览器中来实时预览成果了。在electron中想要察看vue的状态怎么办？在elctron我的项目中集成vue-devtools工具如果你会集成vue-devtools那么react的也不在话下。 本地编译vue-devtools1.github传送门vue-devtools2. 留神默认dev分之，须要切到master分之装置依赖编译咱们须要的是 /vue-devtools/shells/chrome 把这个文件加考到咱们后面几章搭建好的electron我的项目中的自建devtools目录中 main线程中用插件加载vue-devtools(十分重要)在main.js中这样加载vue-devtools let uri = path.resolve(process.cwd(), './devtools/chrome');try { await electron.session.defaultSession.loadExtension(uri, {allowFileAccess: true});}catch (e) { //}产出一份dev模式的代码 npm run start 胜利加载，完满！！！

最近做一个Electron直播的我的项目，记录一下我的项目中的播种与心得与大家独特成长。electrion的弱小之处大家都有所耳闻，这里有不再赘述了。最典型的胜利案例非VS Code家喻户晓咱们搭建环境是老本很高的，在尝试了各种计划当前播种了很多。首先咱们从官网的教程开始一步步实现一个electron我的项目。 1.装置electron间接应用npm i electron的话有速度慢，卡死等多种问题。咱们装置electron须要一些技巧! 计划1(官网计划)ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"ELECTRON_CUSTOM_DIR="{{ version }}"npm i electron 计划2（举荐计划）npm i cnpm -gcnpm i electron 运行 electron electron 看到以上画面即示意胜利！！！ 应用计划2能够100%保障胜利，已验证！ 2.应用 @electron-forge/cli 能够疾速搭建electron利用。npm i -g @electron-forge/cli2.1 转化已有我的项目如果想要把曾经存在的我的项目转化为electron我的项目，只需在该我的项目内运行 npx electron-forge importnpx electron-forge 会批改你的package.json增加必要的库和script命令，主线程的main.js须要本人增加，参考官网即可。 2.2 创立新的electron我的项目mkedir test && cd testnpx electron-forge init通过漫长的装置，我的项目终于创立好了。~~~~ 如果安装时间过长，一般来说是在本我的项目中装置eletron卡住了，此时能够强行推出，运行npm run start 如果是这个谬误，执行 cnpm i electron -Dnpm run start胜利后electron会主动启动我的项目，看到这个界面即示意electron新我的项目初始化胜利。 a. src/main.js 是main线程的入口文件。 b. src/main.js 中的index.html 是renderer线程的入口文件。 我的项目的目录构造如下

我的项目介绍Vite2-ElectronDouYin 基于vite2+electron12跨端开发vue3我的项目之仿造抖音小视频应用程序。反对键盘高低键切换短视频、新开多窗口模式等性能。 应用技术编码/技术：vscode / vue3.0+vuex4+vue-router@4跨端框架：electron^12.0.1组件库：vant3 (有赞挪动端vue3组件库)滑动组件：swiper^6.5.0弹窗组件：v3popup（基于vue3.0自定义弹层）打包工具：vue-cli-plugin-electron-builder 我的项目构造目录 渲染过程主入口main.js应用vite构建工具搭建的我的项目，根目录有个main.js文件，是渲染过程的主入口配置文件。 /** * 渲染过程入口配置 */ import { createApp } from 'vue'import App from './App.vue' // 引入Router及Vueximport Router from './router'import Store from './store' // 引入专用组件import Plugins from './plugins' import { winCfg, loadWin } from './module/actions' // 引入Jsimport '@/assets/js/fontSize' // 引入专用款式import '@/assets/fonts/iconfont.css'import '@/assets/css/reset.css'import '@/assets/css/layout.css' loadWin().then(args => { winCfg.window = args createApp(App) .use(Router) .use(Store) .use(Plugins) .mount('#app')})主过程入口background.js应用vite构建的我的项目，根目录同样有个background.js，用来配置一些主过程。 ...

我的项目简介Vue3-ElectronQchat 应用vue3.x+electron+antdv+v3layer等技术实现的一款跨桌面端仿造QQ界面聊天实例。能够反对新建多窗口模式、换肤等性能。 技术框架编码器：VScode应用技术：Vue3.0+Electron11.2.3+Vuex4+VueRouter@4组件库：Ant-design-vue^2.0.0 (蚂蚁金服pc端vue3组件库)打包工具：vue-cli-plugin-electron-builder按需引入：babel-plugin-import^1.13.3弹窗插件：V3layer（基于vue3自定义dialog组件）滚动条插件：V3scroll（基于vue3自定义虚构滚动条） 我的项目构造 vue3+electron自定义弹窗性能我的项目中应用到的弹窗分为vue3自定义组件和electron新开窗体两种模式。 vue3自定义弹窗，之前有过一篇分享，大家能够去看下。vue3.x全局自定义pc桌面端dialog组件 electron新建多窗口，反对如下参数配置： // 窗口参数配置export const winConfig = { id: null, // 窗口惟一id background: '#fff', // 背景色 route: '', // 路由地址url title: '', // 题目 data: null, // 传入数据参数 width: '', // 窗口宽度 height: '', // 窗口高度 minWidth: '', // 窗口最小宽度 minHeight: '', // 窗口最小高度 x: '', // 窗口绝对于屏幕左侧坐标 y: '', // 窗口绝对于屏幕顶端坐标 resize: true, // 是否反对缩放 maximize: false, // 最大化窗口 isMultiWin: false, // 是否反对多开窗口（为true则会反对创立多个窗口） isMainWin: false, // 是否主窗口（为true则会代替之前主窗口） parent: '', // 父窗口（传入父窗口id） modal: false, // 模态窗口（需设置parent和modal选项） alwaysOnTop: false, // 是否置顶窗口}通过调用如下办法，传入下面的参数疾速生成一个新窗体。 ...

在过来，每个操作系统的利用需用特定的编程语言来编写，每个客户端都须要独自开发，而当初咱们能够利用多种工具、框架进行跨平台开发。Flutter 就是其中最热门的一个，也是在线教育、社交泛娱乐、在线金融等行业场景中开发必不可少的。 Flutter 是 Google推出的挪动框架，应用 Flutter 能够疾速构建跨平台、高质量的客户端利用。Pano 提供的语音通话、视频通话、互动白板、互动直播、云端录制能力，笼罩了 iOS、Android、Windows、macOS、Electron、Web 等多个平台。现在，Pano SDK 再添新成员，正式反对 Flutter，开发者通过一套代码即可轻松集成 iOS、Android 双平台实时互动音视频、互动白板等能力。 Pano Flutter SDK 是基于 Pano SDK 封装的 Flutter Plugin，齐全开源，并且为了让开发者在应用时领有与应用 Native SDK 类似的开发体验，大部分接口的名称与 Native SDK 放弃了统一。本文将给大家介绍一下如何疾速接入 Pano Flutter SDK。 筹备工作拍乐云开发者账户（通过拍乐云官网注册：https://www.pano.video/）Flutter 开发环境(SDK 版本 >= 1.20.0)开始接入获取一个 App ID 和长期 Token首先咱们须要应用开发者账户登陆Pano控制台，创立利用，获取 App ID 和长期 Token，前面将会用到。（创立利用获取长期Token请参考文档：创立第一个利用：https://developer.pano.video/getting-started/firstapp/） 在利用中集成 Pano Flutter SDK为了应用此插件, 增加 pano_rtc 到你的 pubspec.yaml 文件中： dependencies: ... pano_rtc: ">=0.9.0"在我的项目目录中运行 packages get 命令: flutter packages get在 main.dart 中增加如下代码导入 pano_rtc： import 'package:pano_rtc/pano_rtc.dart';应用下面获取的 App ID 初始化 RtcEngineKit： ...

一、Electron介绍 Electron 是一个由 GitHub 及泛滥贡献者组成的沉闷社区独特保护的开源我的项目. 应用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序 1. 特点跨平台 能够打包成Mac、Windows 和 Linux三个平台的应用程序简化桌面端开发 （1）Electron 基于 Chromium 和 Node.js,能够应用 HTML, CSS 和 JavaScript 构建利用 （2）提供Electron api 和 NodeJS api社区沉闷2. 兼容性xp无缘了, 可能须要应用nwjs等计划 二、我的项目搭建1. 应用 vue cli 创立vue我的项目vue create electron-test复制代码2. 装置插件 vue-cli-plugin-electron-buildervue add electron-builder复制代码 3. 装置完插件后, 我的项目中的一些变动① package.json 新增了几个scripts npm run electron:serve electron开发模式npm run electron:build electron打包复制代码postinstall 和 postuninstall 是为了确保装置或者移除依赖时, 始终跟electron匹配 ② 新增了background.js文件主过程相干操作, 写在这个文件中 ③ 新增了一个环境变量能够用来判断是否在electron状态 process.env.IS_ELECTRON复制代码三、开发总结1. 配置我的项目图标应用electron-icon-builder, 生成合乎Electron的图标 ...

思路主过程监听一个事件渲染过程触发事件向主过程发送音讯主过程收到渲染过程的音讯，给予渲染过程以响应渲染过程收到主过程的响应代码实现主过程监听一个事件, 并且响应渲染过程const {ipcMain} = require("electron")ipcMain.on("sendMessage", (event, args) => { console.log("收到渲染过程的音讯", args); win.webContents.send("receiveMessage", "我是主过程已收到音讯" + args); // 响应渲染过程});渲染过程触发主过程事件，并且监听主过程响应事件<body> <button id="btn">发送告诉</button> </body><script> const { ipcRenderer } = require("electron"); const oBtn = document.getElementById("btn"); oBtn.onclick = function () { ipcRenderer.send("sendMessage", "我是渲染过程"); }; ipcRenderer.on('receiveMessage', (event, args)=>{ console.log('接管到主过程的音讯',args) })</script>留神渲染过程须要汇合node过程，否者会报Uncaught ReferenceError: require is not defined谬误const win = new BrowserWindow({ // fullscreen: true, // transparent: true, // 窗口通明 // frame: true, // 无边框 // ....... webPreferences: { nodeIntegration: true, // 汇合node过程 },});主过程console打出的中文乱码解决, start的时候加上chcp 65001"scripts": { "start": "chcp 65001 && electron ."},残缺代码主过程// index.jsconst path = require("path");const { app, BrowserWindow, ipcMain } = require("electron");function createWindow() { // 创立浏览器窗口 const win = new BrowserWindow({ // fullscreen: true, // transparent: true, // 窗口通明 // frame: true, // 无边框 webPreferences: { nodeIntegration: true, // 汇合node过程 }, }); win.loadFile("./app.html"); // 渲染过程网页 ipcMain.on("sendMessage", (event, args) => { console.log("收到渲染过程的音讯", args); win.webContents.send("receiveMessage", "我是主过程已收到音讯" + args); }); win.webContents.openDevTools(); // 开启调试}app.whenReady().then(createWindow);渲染过程<!--app.html--><!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <button id="btn">发送告诉</button> </body> <script> const { ipcRenderer } = require("electron"); const oBtn = document.getElementById("btn"); oBtn.onclick = function () { ipcRenderer.send("sendMessage", "我是渲染过程"); }; ipcRenderer.on('receiveMessage', (event, args)=>{ console.log('接管到主过程的音讯',args) }) </script></html>效果图 ...

应用electron-builder打包electron我的项目，其中Windows提供了NSIS来自定义安装程序。oneClick= true布尔值-是创立一键安装程序还是辅助安装程序。perMachine= false布尔值-是否显示辅助安装程序的装置模式安装程序页面（抉择按机器还是按用户）。或者是否始终按所有用户（每台计算机）装置。如果oneClick是true（默认）：是否按所有用户（每台计算机）装置。如果oneClickis false和perMachineis true：无装置模式安装程序页面，请始终按机器装置。 如果oneClick是false和perMachine是false（默认）：装置模式安装程序页面。 allowElevation= true布尔值- 仅辅助安装程序。容许申请晋升。如果为false，则用户将不得不以晋升的权限重新启动安装程序。allowToChangeInstallationDirectory= false布尔值- 仅辅助安装程序。是否容许用户更改装置目录。installerIcon字符串-安装程序图标的门路，绝对于构建资源或我的项目目录。默认为build/installerIcon.ico或应用程序图标。uninstallerIcon字符串-绝对于构建资源或我的项目目录的卸载程序图标的门路。默认为build/uninstallerIcon.ico或应用程序图标。installerHeader= build/installerHeader.bmp字符串- *仅辅助安装程序。MUI_HEADERIMAGE，绝对于构建资源或我的项目目录。installerHeaderIcon字符串- 仅一键安装程序。绝对于构建资源或我的项目目录的题目图标（进度条上方）的门路。默认为build/installerHeaderIcon.ico或应用程序图标。installerSidebar字符串- 仅辅助安装程序。 MUI_WELCOMEFINISHPAGE_BITMAP，绝对于构建资源或我的项目目录。默认为build/installerSidebar.bmp或${NSISDIR}\Contrib\Graphics\Wizard\nsis3-metro.bmp。图像尺寸164×314像素。uninstallerSidebar字符串- 仅辅助安装程序。 MUI_UNWELCOMEFINISHPAGE_BITMAP，绝对于构建资源或我的项目目录。默认为installerSidebar选项或build/uninstallerSidebar.bmp或build/installerSidebar.bmp或${NSISDIR}\Contrib\Graphics\Wizard\nsis3-metro.bmpuninstallDisplayName= ${productName} ${version}字符串-控制面板中的卸载程序显示名称。 include字符串-NSIS蕴含定制安装程序脚本的门路。默认为build/installer.nsh。请参阅自定义NSIS脚本。script字符串-用于自定义安装程序的NSIS脚本的门路。默认为build/installer.nsi。请参阅自定义NSIS脚本。license字符串-EULA许可证文件的门路。默认为license.txt或eula.txt（或大写变体）。除了txt,rtf andhtml supported (don't forget to usetarget =“ _ blank”`以外的链接）。反对应用不同语言的多个许可证文件-应用lang后缀（例如_de，_ru）。例如，创立文件license_de.txt并license_en.txt在构建资源中。如果操作系统语言为德语，license_de.txt将显示。请参阅语言代码到名称的映射。 将通过用户OS语言选择适当的许可证文件。 artifactName字符串- 工件文件名模板。默认为${productName} Setup ${version}.${ext}。deleteAppDataOnUninstall= false布尔值- 仅一键安装程序。是否在卸载时删除应用程序数据。differentialPackage布尔值- true网络安装程序（nsis-web）的默认设置displayLanguageSelector= false布尔值-是否显示语言选择对话框。不举荐（默认状况下将应用OS语言检测到）。installerLanguagesArray <String> | 字符串-安装程序语言（例如en_US，de_DE）。仅当您理解本人的工作和目标时才进行更改。language字符串-LCID Dec，默认为1033（English - United States）。multiLanguageInstaller布尔值-是否创立多语言安装程序。默认为unicode选项值。packElevateHelper= true布尔值-是否打包晋升的可执行文件（如果应用了每台机器安装程序，或者未来能够应用，则对于电子更新程序是必须的）。疏忽是否perMachine设置为true。preCompressedFileExtensions= [".avi", ".mov", ".m4v", ".mp4", ".m4p", ".qt", ".mkv", ".webm", ".vmdk"]Array <字符串> | 字符串-将不被压缩的文件的文件扩展名。仅实用于extraResources和extraFiles文件。unicode= trueBoolean-是否创立Unicode安装程序。guid字符串-请参见GUID与应用程序名称。warningsAsErrors= true布尔值-如果warningsAsErrors为true（默认）：NSIS将把正告视为谬误。如果warningsAsErrors是false：NSIS将容许正告。runAfterFinish= true布尔值-实现后是否运行已装置的应用程序。对于辅助安装程序，将删除相应的复选框。createDesktopShortcut= true布尔| “始终”-是否创立桌面快捷方式。设置为always是否在重新安装时也从新创建（即便被用户删除）。createStartMenuShortcut= true布尔值-是否创立开始菜单快捷方式。menuCategory= false布尔| 字符串-是否为开始菜单快捷方式和程序文件目录创立子菜单。如果为true，则将应用公司名称。或字符串值。shortcutName字符串-将用于所有快捷方式的名称。默认为应用程序名称。

需要起源是对象整顿音效的时候，她收集的音效资源是有嵌套的子文件夹的，然而她想把所有的文件都提到一级目录，没有程序之前，她的操作是： 复制子文件夹中的文件到一级目录删除子文件夹如果子文件夹少，那工作量也还算不大，然而如果子文件夹嵌套较深，这工作量就上来了，而且都是反复的工作。于是她过去寻求我的帮忙，我一看刚好本人最近不是在学习node吗，这刚好能够练习下node。 实现流程 实现流程主体是一个递归，遍历文件夹，如果是文件就执行转移操作，不是就传入新的文件夹门路，持续遍历。 具体实现具体实现分以下几步： 我的项目初始化获取文件门路,以及门路下所有文件转移操作删除操作我的项目初始化因为应用平台为windows，而后又不能把界面做丑，所以技术抉择为Electron + Node。尽管electron打包进去文件有 50M,然而软件带来的收益是远远大于须要付出的代价的。对于electron与vue的集成，之前写过文章 Electron+vue从零开始打造一个本地音乐播放器。electron与vue集成目前社区有两个计划: SimulatedGREG/electron-vue,这个比拟老，比拟臃肿，不过如果是老我的项目的迁徙的话，能够思考应用。nklayman/vue-cli-plugin-electron-builder,这个反对最新稳固版本的electron以及最新的vue脚手架，代码里主过程相干代码集成在background.js中，其余代码组织跟写vue我的项目没有区别。文档也特地棒，所以比拟举荐应用这个。这里我弄了一个很简略的我的项目初始化模板，集成最新稳固版本的electron,以及最新的vue-cli4,另外还增加了normalize.css初始化款式。electron+vue相干我的项目的初始化能够间接应用这个模板,戳这里。 获取文件门路,以及门路下所有文件获取文件门路，这里的解决形式，跟之前的翻译我的项目(Electron+Vue从零开始打造一个本地文件翻译器)一样，通过两种形式获取到须要的门路。 设置input webkitdirectory directory 属性，而后监听change事件获取到所抉择文件夹的门路通过H5的拖拽API监听drop事件，获取到 DataTransfer 对象，DataTransfer 对象用于保留拖动并且放下的数据。这里不一样的是须要对拖入的文件进行判断，必须拖入的是文件夹。 const originFiles = [...e.dataTransfer.files]; const isAllDir = originFiles.every(file => fs.statSync(file.path).isDirectory() ); if (!isAllDir) { ipcRenderer.send("confirmDialog"); return false; }主过程 ipcMain.on("confirmDialog", () => { dialog.showMessageBox({ type: "info", title: "确认", message: "请确认抉择的文件是否都是文件夹" });});获取门路下所有的文件 // 获取文件门路下的所有文件 async getAllFiles(path) { try { const res = await fsp.readdir(path); return res; } catch (error) { console.log(error); } },转移操作转移操作这里应用的是fs模块的rename办法，须要判断是否是文件夹来决定是否须要递归操作。对于重名文件,会判断待转移文件与指标文件夹文件大小是否统一，如果不统一会重新命名。重新命名须要生成一个文件id附带文件名称在前面，保障文件不会重名。具体代码如下： ...

一、先下载nsis软件https://nsis.sourceforge.io/Download二、关上可视化脚本编辑器 三、抉择新建文本向导 四、设置利用名称，版本号，网址，标记轻易自定义一个就好，而后下一步 五、设置安装程序图标(图标必须是ico格局)，名称，语言（SimpChinese），界面，而后下一步接着下一步 六、受权文件有就填，没有就填空白 而后下一步 七、增加应用程序文件，默认两个文件选中，删除抉择打包目录下的程序文件接着，抉择应用程序目录文件 八、可批改开始菜单名称，而后下一步 九、可设置装置胜利后启动的程序，默认就是咱们打包后的启动程序，下一步 十、设置一些卸载时界面的提示信息，而后下一步 十一、保留咱们的脚本，实现，保留到英文目录下 十二、关上脚本文件，编译及运行急躁期待到上面这样，软件就打包好了，就能够去相应目录找到软件进行装置

>>博客原文 文中实现的局部工具办法正处于晚期/测试阶段，仍在继续优化中，仅供参考...在Ubuntu20.04上进行开发/测试，测试版本：Electron@8.2.0 / 9.3.5 Contents├── Contents (you are here!)│├── I.前言│├── II.electron-re 能够用来做什么？│   ├── 1) 用于Electron利用│ └── 2) 用于Electron/Nodejs利用│├── III.UI性能介绍│   ├── 主界面│   ├── 性能1：Kill过程│   ├── 性能2：一键开启DevTools│   ├── 性能3：查看过程日志│   └── 性能4：查看过程CPU/Memory占用趋势│├── IV.应用&原理│   ├── 引入│   ├── 怎么捕捉过程资源占用？│   ├── 怎么在主过程和UI之间共享数据？│   └── 怎么在UI窗口中绘制折线图？│├── V. 存在的已知问题│├── VI. Next To Do│├── VII. 几个理论应用实例│   ├── 1)Service/MessageChannel示例│   ├── 2)ChildProcessPool/ProcessHost示例│   └── 3)test测试目录示例I. 前言最近在做一个多文件分片并行上传模块的时候(基于Electron和React)，遇到了一些性能问题，次要体现在：前端同时增加大量文件(1000-10000)并行上传时(文件同时上传数默认为6)，在不做懒加载优化的状况下，引起了整个利用窗口的卡顿。所以针对Electron/Nodejs多过程这方面做了一些学习，尝试应用多过程架构对上传流程进行优化。 同时也编写了一个不便进行Electron/Node多过程治理和调用的工具electron-re，曾经公布为npm组件，能够间接装置： >> github地址 $: npm install electron-re --save# or$: yarn add electron-re前文《Electron/Node多过程工具开发日记》形容了electron-re的开发背景、针对的问题场景以及具体的应用办法，这篇文章不会对它的根底应用做过多阐明。次要介绍新个性多过程治理UI的开发相干。UI界面基于electron-re已有的BrowserService/MessageChannel和ChildProcessPool/ProcessHost基础架构驱动，应用React17 / Babel7开发，主界面： ...

问题形容：在Mac上打包electron利用的时候，遇到一个提醒：cannot unpack electron zip file, will be re-downloaded error=zip: not a valid zip file而后就开始downloaddownloading url=https://github.com/electron/electron/releases/download/v11.1.0/electron-v11.1.0-mas-x64.zip size=77 MB parts=8显然这个地址在国内下载速度极慢，打包齐全卡住的样子。 产生的起因：这个问题是在我降级了Electron版本后产生的，我将我的项目中的Electron版本从V6.1.9降级到了V11.1.0，打包时，须要全局环境的Electron也降级到11.1.0，而全局环境中的Electron尽管降级到了11.1.0（或者还未降级），然而缓存文件夹中没有这个zip，打包时就会去下载这个包。因而，咱们只有手动下载这个包放到缓存文件夹即可。 解决形式：上面仅介绍Mac环境下的解决形式，Windows下目录有所不同，须要再去查一下。 去Electron的镜像站下载zip包，比方：http://npm.taobao.org/mirrors...抉择本人版本的包，留神同时要下载 SHASUMS256.txt将下载到的zip包和SHASUMS256.txt，放入 ~/Library/Caches/electron 这个文件夹进行打包

文中实现的局部工具办法正处于晚期/测试阶段，仍在继续优化中，仅供参考...>>博客原文连贯 Contents├── Contents (you are here!)|├── electron-re 能够用来做什么？│   ├── 1)用于Electron利用| └── 2)用于Electron/Nodejs利用|├── 阐明1：Service/MessageChannel│   ├── Service的创立│   ├── Service的主动刷新│   ├── MessageChannel的引入│   ├── MessageChannel提供的办法│   └── 比照MessageChannel和原生ipc通信的应用| ├── 1)应用remote近程调用(原生)| ├── 2)应用ipc信号通信(原生)| └── 3)应用MessageChannel进行多向通信(扩大)|├── 阐明2：ChildProcessPool/ProcessHost│   ├── 过程池的创立│   ├── 过程池的实例办法│   ├── 子过程事务核心│   └── 过程池和子过程事务核心的配合应用| ├── 1)主过程中应用过程池向子过程发送申请| └── 2)子过程中用事务核心解决音讯|├── Next To Do|├── 几个理论应用实例│   ├── 1)Service/MessageChannel示例│   ├── 2)ChildProcessPool/ProcessHost示例│   └── 3)test测试目录示例I. 前言最近在做一个多文件分片并行上传模块的时候(基于Electron和React)，遇到了一些性能问题，次要体现在：前端同时增加大量文件(1000-10000)并行上传时(文件同时上传数默认为6)，在不做懒加载优化的状况下，引起了整个利用窗口的卡顿。所以针对Electron/Nodejs多过程这方面做了一些学习，尝试应用多过程架构对上传流程进行优化。 同时也编写了一个不便进行Electron/Node多过程治理和调用的工具electron-re，曾经公布为npm组件，能够间接装置： $: npm install electron-re --save# or$: yarn add electron-re如果感兴趣是怎么一步一步解决性能问题的话能够查看这篇文章：《基于Electron的smb客户端文件上传优化摸索》。 上面来讲讲配角=> electron-re ...

>> 博客原文链接 I 前言 上一篇文章《基于Electron的smb客户端开发记录》，大抵形容了整个SMB客户端开发的外围性能、实现难点、我的项目打包这些内容，这篇文章呢独自把其中的文件分片上传模块拿进去进行分享，提及一些与Electron主过程、渲染过程和文件上传优化相干的性能点。 II Demo运行我的项目精简版 DEMO地址，删除了smb解决的多余逻辑，应用文件复制模仿上传流程，可间接运行体验。 demo运行时须要别离开启两个开发环境view -> service，而后能力预览界面，因为没有后端，文件默认上传(复制)到electron数据目录(在Ubuntu上是~/.config/FileSliceUpload/runtime/upload)# 进入view目录$: npm install$: npm start# 进入service目录$: npm install$: npm startIII Electron过程架构主过程和渲染过程的区别 Electron 运行 package.json 的 main 脚本的过程被称为主过程。在主过程中运行的脚本通过创立web页面来展现用户界面，一个 Electron 利用总是有且只有一个主过程。 主过程应用 BrowserWindow 实例创立页面，每个 BrowserWindow 实例都在本人的渲染过程里运行页面，当一个 BrowserWindow 实例被销毁后，相应的渲染过程也会被终止。主过程治理所有的web页面和它们对应的渲染过程，每个渲染过程都是独立的，它只关怀它所运行的 web 页面。 在一般的浏览器中，web页面通常在沙盒环境中运行，并且无法访问操作系统的原生资源。 然而 Electron 的用户在 Node.js 的 API 反对下能够在页面中和操作系统进行一些底层交互。在页面中调用与 GUI 相干的原生 API 是不被容许的，因为在 web 页面里操作原生的 GUI 资源是十分危险的，而且容易造成资源泄露。 如果你想在 web 页面里应用 GUI 操作，其对应的渲染过程必须与主过程进行通信，申请主过程进行相干的 GUI 操作。 主过程和渲染过程之间的通信1/2-自带办法，3-内部扩大办法1.应用remote近程调用 remote模块为渲染过程和主过程通信提供了一种简略办法，应用remote模块, 你能够调用main过程对象的办法, 而不用显式发送过程间音讯。示例如下，代码通过remote近程调用主过程的BrowserWindows创立了一个渲染过程，并加载了一个网页地址： ...

忽然让你开发Electron利用，你能hold住吗？如果领导忽然说须要开发一款前端桌面端利用，那么对于咱们前端er来说抉择Electron是一件牵强附会的事件。但事实上很多同学对于Electron都不太理解和相熟。 如果忽然让咱们去开发Electron利用，很多人都会陷入迷茫和懵逼的状态。而后在依附网上绝对较少的材料，缓缓摸索、一路踩坑的实现Electronn的需要。 为了解决上述问题，咱们实现了一个我的项目，并把它开源了进去, 心愿可能对大家学习Electron有点帮忙。 疾速学习和上手Electron: electron-playgroundelectron-playground是我司(好将来团体晓黑板)前端团队近期开源的我的项目。 electron-playground我的项目的目标帮忙前端仔更好、更快的学习和了解前端桌面端技术Electron, 少走弯路。 electron-playrgound能为我学习Electron做什么带有gif示例和可操作的demo的教程文章。系统性的整顿了Electron相干的api和性能。搭配演练场，本人入手尝试electron的各种个性。上面我来具体介绍一下我的项目的内容。 我的项目演示1. 带有gif示例和可操作的demo文章解说我的项目搭配一系列教程文章，这些文章都是通过踩坑验证、成体系化的内容，并且带有gif示例，和可操作的demo示例、流程图等内容。 我的项目自带的gif演示menu: 增加菜单 我的项目demo操作的gif演示dialog: 音讯提醒与确认 dialog: 抉择文件 流程图窗口治理-创立和治理窗口 系统性的整顿了Electron相干的api和性能electronn-playground系统性的整顿了Electron的相干API和性能，以及对于工程化相干的内容。 electron-playground列表分类工程化 解体剖析和收集开发调试打包问题利用更新利用 自定义协定零碎提醒和文件抉择菜单系统托盘文件下载窗口治理 创立和治理窗口暗藏和复原聚焦、失焦全屏、最大化、最小化窗口通信窗口类型窗口事件其余 安全性electron-playground列表分类截图 演练场想要实现更简单的操作，咱们参考fiddle创立了演练场。 演练场集成了vscode的web端编辑库：monaco-editor，编码体验靠近vscode。 如何启动electron-playground启动流程如下: git clone https://github.com/tal-tech/electron-playground.git // 下载我的项目npm install // 装置依赖npm run start // 启动我的项目欢送下载学习/体验electron-playground是一个通过尝试electron各种个性，使electron的各项个性所见即所得, 来达到咱们疾速上手和学习electron的目标。 感兴趣的同学能够下载一下我的项目，体验一下，心愿通过这个我的项目能够帮忙大家更好、更快的学习和了解前端桌面端技术Electron, 少走弯路 如果感觉还不错的话，就给个Star⭐️ 激励一下咱们吧^_^~

又一个欢快的周末快到了，当我脚步轻快的回到家，筹备拥抱女朋友的时候，却发现，女朋友愁眉不展，望着电脑上一堆英文文件夹，一直的豪言壮语并嘟喃道:"好累啊"。于是，我凑近一看，只见她电脑上一堆英文文件夹，一直的反复着复制文件名，而后放百度翻译里翻译成中文，而后又把翻译后的后果给文件重命名，这也太难受了吧。想到女朋友有难，我作为她的程序猿男朋友，怎么能隔岸观火，我陷入了深思，忽然想到用Node不就能做到她手上的那些操作吗，于是说做就做，我立马把女朋友抛在身后，关上电脑开始口头，毕竟女人只会影响我拔剑的速度。 我的项目搭建我的项目搭建仍旧应用的是老组合，Electron + Vue + Node，这次就不讲怎么整合electron和vue了，具体可看 Electron+vue从零开始打造一个本地音乐播放器这篇文章。懒人可通过克隆我的模板文件间接开发，戳这里戳这里. 我的项目性能明确要解决的几个痛点： 要能主动翻译要能将翻译好的名字主动重命名要能批量翻译心愿能操作简略，能拖拽一个目录，或拖拽文件需要明确了，上面咱们一步一步来一一解决。实现成果 我的项目实现我的项目实现并不简单，逐个解决，对症下药。 主动翻译测试过有道翻译，百度翻译，谷歌翻译。通过比照，最终抉择了百度翻译，百度翻译的通用翻译每月200万字符的收费，（QPS=10）还是很合乎我的需要的。 注册申请翻译服务要应用翻译服务须要去百度翻译开放平台申请应用权限，抉择通用翻译服务就能够了，注册成为开发者后，新建我的项目获取appid,这个appid很重要，决定了是否能正确发动翻译申请。 拼接翻译API通过查看文档可知，通用翻译API HTTP地址为 https://api.fanyi.baidu.com/api/trans/vip/translate 可携带上面这些参数 因为平安限度，须要生成签名，签名须要 依照 appid+q+salt+密钥 的程序拼接失去字符串,而后对字符串进行md5加密 const salt = parseInt(Math.random() * 1000000000); const sign = md5(globalData.appid + q + salt + globalData.key);生成签名后拼接申请的URL const params = encodeURI( `q=${q}&from=auto&to=${globalData.to}&appid=${globalData.appid}&salt=${salt}&sign=${sign}` );翻译性能代码 const md5 = require("md5");var rp = require("request-promise");const { globalData } = require("./config.js");function translate(msg) { const q = msg; const salt = parseInt(Math.random() * 1000000000); //加盐 const sign = md5(globalData.appid + q + salt + globalData.key); //生成签名 const params = encodeURI( `q=${q}&from=auto&to=${globalData.to}&appid=${globalData.appid}&salt=${salt}&sign=${sign}` ); const options = { uri: `https://fanyi-api.baidu.com/api/trans/vip/translate?${params}`, }; return rp(options).then((res) => JSON.parse(res).trans_result);}module.exports = { translate,};主体性能实现主体性能分为： ...

最近在开发一款桌面端利用，用到了Electron和React。 React作为日常应用比拟频繁的框架，这里就不具体阐明了，这里次要是想通过几篇文章让大家疾速上手Electron以及与React完满交融。 本篇是系列文章的第一篇，次要是给大家分享Electron的一些概念，让大家对Electron有一个初步的认知。 先来理解一下什么是Electron吧，可能很多小伙伴还没有听过Electron，置信很多小伙伴此时的表情是这样的： 看下官网的自我介绍： Electron 是一个能够应用 Web 技术如 JavaScript、HTML 和 CSS 来创立跨平台原生桌面利用的框架。借助 Electron，咱们能够应用纯 JavaScript 来调用丰盛的原生 APIs。 Electron用 web 页面作为它的 GUI，而不是绑定了 GUI 库的 JavaScript。它联合了 Chromium、Node.js 和用于调用操作系统本地性能的 APIs（如关上文件窗口、告诉、图标等）。 下面这张图很好的阐明了Electron的弱小之处。 正因如此，当初曾经有很多由Electron开发的利用，比方Atom、Visual Studio Code等。咱们能够在Apps Built on Electron看到所有由Electron构建的我的项目。 疾速开始后面说了那么多废话，上面进入正题，带大家用五分钟(为什么是五分钟？我猜的 ???? )的工夫运行一个Electron的Hello World。 装置这一步很简略： npm install electron -g第一个 Electron 利用一个最简略的 Electron 利用目录构造如下： hello-world/├── package.json├── main.js└── index.htmlpackage.json的格局和 Node 的完全一致，并且那个被 main 字段申明的脚本文件是你的利用的启动脚本，它运行在主过程上。你利用里的 package.json 看起来应该像： { "name": "hello-world", "version": "0.1.0", "main": "main.js"}创立main.js文件并增加如下代码： const { app, BrowserWindow } = require("electron");const isDev = require("electron-is-dev");const path = require("path");let mainWindow;app.on("ready", () => { mainWindow = new BrowserWindow({ width: 1024, height: 680, webPreferences: { nodeIntegration: true, // https://stackoverflow.com/questions/37884130/electron-remote-is-undefined enableRemoteModule: true, }, }); // https://www.electronjs.org/docs/api/browser-window#event-ready-to-show // 在加载页面时，渲染过程第一次实现绘制时，如果窗口还没有被显示，渲染过程会收回 ready-to-show 事件 。 在此事件后显示窗口将没有视觉闪动 mainWindow.once("ready-to-show", () => { mainWindow.show(); }); const urlLocation = `file://${__dirname}/index.html`; mainWindow.loadURL(urlLocation);});而后是index.html文件： ...

在须要做一些桌面特效：如雪花飘落成果的时候，须要窗体放弃通明且在所有窗口顶层窗体根本代码如下 const path = require("path");const { app, BrowserWindow, Tray, Menu } = require("electron");function createWindow() { // 创立浏览器窗口 const win = new BrowserWindow({ fullscreen: true, transparent: true, // 窗口通明 frame: false, // 无边框 }); win.setIgnoreMouseEvents(true); // 鼠标穿透 win.setAlwaysOnTop(true); // 放弃置顶 win.setSkipTaskbar(true); // 无任务栏图标 win.loadFile("./app.html"); // 这里替换成有特效网页 //创立零碎告诉区菜单(右下角托盘) tray = new Tray(path.join(__dirname, "1.jpg")); const contextMenu = Menu.buildFromTemplate([ { label: "退出", click: () => { win.destroy(); }, }, //咱们须要在这里有一个真正的退出（这里间接强制退出） ]); tray.setToolTip("通明窗口托盘测试"); tray.setContextMenu(contextMenu);}app.whenReady().then(createWindow);而后win.loadFile("./app.html")替换成有特效的网页就OK了 ...

最近解决了一个对于electron-vue打包后接口门路呈现file://的问题 历经材料一顿找也没找到 当初解决了当前，我把它收回来提供给那些有须要的人 这个平台不发注释 浏览跳转electron-vue爬坑之打包后接口门路file://

electron更新后应用remote模块踩坑之前的我的项目，援用electron的remote能够间接调用electron.remote来去应用，而近期应用electron却频繁报错？？？踩坑后我疾速去查看了下官网文档，是不是electron进行了更新？果然不出所料，在electron 10中，批改了enableRemoteModule默认为false，咱们须要手动将其批改为true。 此前版本中咱们应用electron中的remote模块时，不需在主过程的窗口中退出enableRemoteModule：true参数才可能调用remote模块，而在electron 10中，咱们须要退出该参数能力调用该模块。 //引入electronlet electron = require('electron')//引入remote模块let remote = electron.remote//打印remote模块console.log(remote) 在未退出参数前，会引起报错。 而在主过程中咱们须要向webPreferences配置参数enableRemoteModule:true来关上remote模块，使得渲染过程中能够调用主过程的办法，咱们须要对mianWindow来配置： mainWindow = new BrowserWindow({ width:600, height:800, /* 启用Node继承 */ webPreferences:{ nodeIntegration:true, enableRemoteModule:true } }) 问题解决，踩坑结束。

踩坑剖析 之前版本应用dialog时抉择文件时，能够退出callback，来获取被抉择文件的门路，而electron10更新后产生了改变，采纳了Promise对象来获取后果。 electron 10之前咱们获取文件门路，只需退出callback即可，也就是下述写法，且之前返回的data后果间接是文件的门路。 openDialogDom.onclick = function(){ remote.dialog.showOpenDialog({ properties:['openFile'] },function(data){ console.log(data) })}解决 electron10之后，写我的项目时我发现callback有效，在之前的踩坑经验来说，我感觉又是因为版本更新所带来的后果，查看官网文档，又带给了我踩坑完结的播种。 能够看出在该办法的返回值变为了Promise对象，且在Promise对象中减少了cancele，filePaths，bookmarks属性，此时咱们要想获取被选中的文件的门路，也须要与原先未更新版本前有着不一样的扭转，也就是如下写法。 openDialogDom.onclick = function(){ remote.dialog.showOpenDialog({ properties:['openFile'] }).then(res => { console.log(res.canceled) console.log(res.filePaths) })} 问题解决，踩坑结束。

electron-builderError: Unresolved node modules: bufferutil, utf-8-validate 解决方案计划一将electron-builder包降级至最新版22.9.1 npm uninstall electron-builder// or yarn remove electron-buildernpm i electron-builder -D// or yarn add electron-builder -D计划二下载electron-builder@20.19.2放到node_modules目录下,并手动装置依赖 // node_modules/electron-buildernpm i // or yarn计划三删除本地的electron-builder 应用全局的electron-builder来进行打包 // projectnpm uninstall electron-builder// or yarn remove electron-buildernpm i -g electron-builder// or yarn add global http-server解题思路授人以鱼不如授人以渔该bug尽管给的提醒是短少bufferutil, utf-8-validate两个包,然而理论则是app-builder-lib包的问题当你尝试装置这两个包后还在报该问题,咱们就须要去解决提问题的人,毕竟这是最快的计划当你进入app-builder-lib目录下不难发现,app-builder-lib目录下并没有src这个目录那么当初该怎么办? 咱们应该找别的形式,比方electron-builder是能够应用全局包来打包的,而后咱们先下载全局包yarn add global electron-builder, 而后执行electron-builder --dir来测试性的打一个包,发现是能够打包实现的那么问题根本能够锁定在包的依赖下面,最快的解决方案是,间接应用最新的包,然而有些我的项目的话,并不能应用最新的包,那么,咱们应该做的是去npmjs找到对应的包,而后通过Repository进入该包的github主页, 通过tags找到对应版本的包,下载下来并放入到node_modules目录下,手动装置依赖来应用 在这个时候,你就须要留神包下的package.json中对应的版本是否和你装置的版本统一 最初在看看对应文件,找找提出问题的人,而后你根本能够确定问题点出在哪里(目前该问题后续无奈复现,解决后我尝试复现该问题,然而发现20.19.2在没有呈现该问题,目前仅有一张截图,也是从我的小伙伴那里失去的)目前windows应用electron的体验总体来说不是很好,劝退新人的概率还是很大,大家有什么问题,也欢送一起探讨举荐vue + electronelectron-vue如果你须要调用dll,或者应用winax一类的须要编译后应用的包,还是比拟举荐electron-vue的,至多你遇到的问题绝对会少,如果你喜爱挑战的话,举荐vue-cli-plugin-electron-builder vue-cli-plugin-electron-builder如果你只是须要一个chrome的壳,那么举荐你应用vue-cli-plugin-electron-builder, 同时搭配上vuetify应用,成果更棒如我的开源我的项目: weChatTool 当然我还是比拟中意vue-cli-plugin-electron-builder

在superset0.3.6的看板，在新增和编辑时，是能够间接增加css款式去管制整个看板页面任意元素的款式。或者在治理菜单--css模板增加相应css模板，而后编辑看板时间接抉择利用css模板。这个性能的确是香，这能够实现不必批改一句源代码就将看板的格调、款式齐全扭转，比方如下这样： 但说实话，间接在看板的款式编辑弹窗里写款式，切实是太苦楚了，或者说这**齐全承受不了呀！痛点如下： 实时预览成果太差--须要先保留，而后试下成果，而后持续编辑看板，抉择编辑CSS模板，再接着写，如此往返；没有代码提醒；不能够应用css预处理语言；这是简略分享，我是应用应用gulp+electron解决这些问题的。 我的项目初始化mkdir theme_editorcd theme_editornpm init -y应用electron加载页面注入css装置electron,下载electron会须要一点工夫，可尝试应用cnpm npm install electron -D根目录下增加main.js const { app, BrowserWindow } = require('electron')// 创立electron window function createWindow () { const win = new BrowserWindow({ webPreferences: { // 开启开发工具，不便调试 devTools: true } }) // superset web服务地址 // 倡议应用生产地址，本地就能够不须要启动superset后端服务了 const url = 'http://127.0.0.1:5000' // 这个是要插入css款式文件的页面门路 // 并不需要所有页面都插入css款式 // 所有的看板页面都插入css款式 const insertCssPath = new RegExp('/superset/dashboard/') // 如果是在本地superset的服务 // 可间接把css文件放在superset我的项目的superset/static/assets目录下，而后如下应用 // 如果是加载的生产地址，则可应用IIS或者Nginx搭建一个本地web服务，返回css文件 // 间接如：http://localhost:8080/style/theme.css,应用 const cssUrl = '/static/assets/theme.css' // 加载页面 win.loadURL(url) // 监听页面筹备实现，插入款式 win.webContents.on('dom-ready', () => { let webUrl = win.webContents.getURL() if (insertCssPath.test(webUrl)) { // 如果是须要插入款式文件 // 执行js代码往以后页面插入款式文件 win.webContents.executeJavaScript(` const link = document.createElement('link'); link.setAttribute('type','text/css'); link.setAttribute('rel','stylesheet'); link.setAttribute('href','${cssUrl}'); document.head.appendChild(link);` ) return false } })}app.whenReady().then(createWindow)package.json增加一个脚本，批改main属性： ...

背景咱们应用 Electron 开发了一个桌面端开发工具 Ada 工作台，提速增效前端开发，在更新比拟频繁的状况下，为了使整个更新体验更为顺畅、晋升工作台的降级比率，须要优化以后的更新机制，尽量做到 VSCode 的无感知更新。 Electron 是一个应用 JavaScript, HTML 和 CSS 等 Web 技术创立原生利用的框架，应用Electron这个框架创立的桌面应用程序就是Electron利用。Electron现有的相干类库: 打包工具： Electron Forge 除了打包还提供了我的项目脚手架、我的项目模版等性能electron-builder 打包、签名，残缺的打包工具更新服务器： Hazel 依赖 Github ReleaseNuts 依赖 Github Releaseelectron-release-server 不须要依赖Github Release，独自部署Nucleus 不须要依赖Github Release，独自部署现状介绍了一些通用的背景常识之后，来看看咱们现有的版本升级计划： 打包工具：通过electron-builder进行利用的打包和签名散发服务器：打包后的安装程序上传到一个自建的服务器electron-release-server降级逻辑：利用内自行编写更新逻辑，通过定时器查问是否有新的版本可供下载，如果有，将一个残缺的安装程序下载到本地，下载实现后提醒用户，用户确认后能够启动新的安装程序装置笼罩原有的版本目前版本升级时的成果： Windows: 利用敞开，并呈现一个小小的装置进度条用于期待利用装置结束，装置结束后主动启动新的利用macOS: 利用敞开，并呈现装置界面，须要手动拖拽到利用文件夹，而后手动从利用文件夹内关上利用看起来不错，曾经实现了根本的更新逻辑，然而成果上让人不称心，与同样是Electron利用的VSCode的降级成果相差甚远，心愿实现的成果是：让用户不必再期待一个新的装置过程，咱们替用户去装置。每当有新版本公布时，用户只须要重新启动应用程序就能体验到最新的版本。 那么怎么能力实现这个成果呢？ 调研现有的打包工具和更新服务器曾经在稳固运行，咱们先看看它们能不能实现咱们要的成果，如果不能，咱们再去尝试别的类库。 咱们应用的electron-builder和electron-release-server的文档中都有对auto update的形容。从这里能够看到服务器对更新文件是有类型要求的，比方OS X零碎上，安装文件只反对dmg，更新文件只反对zip，Windows零碎上，安装文件只能是exe，更新文件只能是残缺的nupkg。而咱们的打包工具是反对生成这些文件的（打包工具要求macOS利用要应用自动更新的话必须签名）。在利用代码中，则有electron-updater和官网的autoUpdater可供选择，用来查看是否须要更新，并解决具体的更新过程。 施行在文档中看到macOS要实现自动更新的话，签名是必须的。 macOS机器上打包：electron-builder会从零碎的钥匙串里找到配置里或者环境变量CSC_LINK（CSC_NAME）的对应的证书来进行签名Windows机器上打包：个别有两种类型的证书，咱们应用的是带USB加密器的EV Code Signing Certificate签名之后也能让用户晓得利用开发者的身份，不至于是来历不明的软件。 筹备好签名证书之后，咱们将现有的降级逻辑进行优化，这里间接应用了官网的autoUpdater： 应用autoUpdater中的办法替换现有计划中的降级逻辑思考主动降级失败的备用计划，在主动降级失败时，应用原有的降级逻辑中的计划，让用户重新安装残缺的安装包autoUpdater.on('checking-for-update', () => { // 开始查看是否有新版本 // 能够在这里揭示用户正在查找新版本})autoUpdater.on('update-available', (info) => { // 查看到有新版本 // 揭示用户曾经找到了新版本})autoUpdater.on('update-not-available', (info) => { // 查看到无新版本 // 揭示用户以后版本曾经是最新版，无需更新})autoUpdater.on('error', (err) => { // 主动降级遇到谬误 // 执行原有降级逻辑})autoUpdater.on('update-downloaded', (ev, releaseNotes, releaseName) => { // 主动降级下载实现 // 能够询问用户是否重启利用更新，用户如果批准就能够执行 autoUpdater.quitAndInstall()})为了配合electron-release-server对更新文件的要求，咱们须要批改打包配置。 ...

办法一在执行electron-packager前先运行set ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ 办法二（举荐）在electron-packager命令行退出参数--download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ (Windows x64)完整版如下： electron-packager . appName --platform=win32 --electron-version=10.0.0 --arch=x64 --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ --asar --app-version=0.0.0 --build-version=0.0.0 --out=outName --overwrite --no-package-manager --ignore="(.git)" --icon=logo.ic 其余零碎相似

场景形容-- 2020-04-28 更新：因为 flash 30 版本当前会呈现提醒“未能正确加载必要组件”（其实是广告程序），导致生效，flash 版本应该替换为 29 版本。-- electron 援用 flash 插件打包示例 上一篇 electron 踩坑(一) 说到 electron 加载 flash 的问题 采纳的是加载零碎装置好的 flash 插件，须要用户提前装置好 flash 能力失常工作 app.commandLine.appendSwitch('ppapi-flash-path', app.getPath('pepperFlashSystemPlugin'));其中 app.getPath('pepperFlashSystemPlugin') 会主动找寻零碎 flash 的所在门路 然而，如果用户没装 flash 就关上利用，就会提醒报错，带来不好的用户体验 所以，咱们须要将 flash 嵌入利用依赖，也就是插件跟着利用打包 win 上面的软件有 32 位和 64 位的说法，而且装置地位会有不同。那么 flash 也不例外 C:\Windows\System32\Macromed\Flash\pepflashplayer64_29_0_0_238.dllC:\Windows\SysWOW64\Macromed\Flash\pepflashplayer32_29_0_0_238.dll当然，下面版本号会变动，然而 dll 所在门路根本是如上所示 找到 flash 所在门路后，咱们就能够提取文件放到咱们的利用目录下了 编译后就会成为利用安装包的一部分，这样就不须要用户手动装置 flash 了 ???? 那么，在 electron 目录下应该如何引入呢？ 问题解决将 flash 插件目录放到根目录的 lib 文件夹下 /lib/pepflashplayer64_29_0_0_238.dll/lib/pepflashplayer32_29_0_0_238.dll接下来须要在主程序入口文件 /src/main/index.js 下进行引入 也就是将这一句获取零碎 flash 插件门路的代码 ...

场景形容构建 pc 客户端，采纳 electron-vue 脚手架进行疾速搭建环境。 性能点在 web 端全副失常，移植代码到 electron 时呈现问题的性能点有： 1. rtmp 流媒体的播放 2. ant-design-vue UI 框架局部组件生效???? 播放器应用的是 vue-video-player，播放 rtmp 流须要应用 flash 技术。 electron 援用 flash 插件打包示例 问题解决简略记录问题要害 问题：pc 客户端 ant-design-vue 局部组件不能失常工作 起因：electron-vue 将它视为 webpack 的 externals 了，其中 UI 组件含有的 vue 文件没有被 vue-loader 失常编译，才导致性能生效解决：找到 .electron-vue/webpack.renderer.config.js 将 ant-design-vue 退出到白名单 whiteListedModules???? electron 白名单配置 问题：pc 客户端引入 flash 之后还是不能失常播放 rtmp 流起因：electron 无奈读取 vue-video-player 依赖装置的 videojs-flash 插件解决：独自装置 videojs-flash 插件为我的项目的依赖 npm i videojs-flash -S问题：编译成 pc 客户端后呈现 vue-video-player 在行将 ready 这一步卡住起因：Chromium 环境下 flash 加载的平安问题，不容许在 "file://" 协定下加载，而打包后的文件默认以 "file://" 协定加载解决：在主线程里起一个 express 服务，使得打包后页面文件运行在本地的 http 端口服务即可

简略的记录疾速搭建electron+vue我的项目的过程 一、创立vue我的项目首先疾速搭建一个vue我的项目，可参考文章“疾速搭建vue我的项目” 二、装置electronvue add electron-builder装置过程中会让抉择 electron 版本，自行抉择一个版本实用即可，此处抉择的是V9.0.0 如下载过程中，呈现 electron-v9.1.0-win32-x64.zip 等一些资源无奈下载的状况，可为npm配置淘宝镜像或者在我的项目根目录下退出.npmrc配置文件，如下所示： ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/三、运行查看成果npm run electron:serve如下所示： 四、配置菜单const { app, Menu, shell} = require('electron')// 具体配置可参考electron文档let template =[{ role: '帮忙', submenu: [ { label: '更多', click: async () => { await hell.openExternal('https://electronjs.org') } } ]}] const menu = Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu)五、系统托盘import {Tray, Menu} from "electron";import path from 'path'let appTray = null;//系统托盘右键菜单var trayMenuTemplate = [{ label: '显示App', click: () => { win.show(); }}]; // 图标appTray = new Tray(path.join(__static, 'app.ico')); //设置此图标的上下文菜单const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);appTray.setContextMenu(contextMenu);appTray.on('click', () => { win.isVisible() ? win.hide() : win.show();})appTray.on('right-click', () => { win.popUpContextMenu(contextMenu);});

当用于存储窗口/托盘的变量被垃圾收集时，会产生这种状况。 如果遇到此问题，以下文章可能会有所帮忙： 内存治理变量范畴（https://msdn.microsoft.com/library/bzt2dkta（v = vs.94％29.aspx）如果你想疾速修复，你能够通过扭转你的代码来使变量变成全局变量： const {app, Tray} \= require('electron')app.on('ready', () \=> { const tray \= new Tray('/path/to/icon.png') tray.setTitle('hello world')})改成： const {app, Tray} \= require('electron')let tray \= nullapp.on('ready', () \=> { tray \= new Tray('/path/to/icon.png') tray.setTitle('hello world')})

一、解决下载Electron缓慢许多人卡在Downloading electron-v9.1.0-darwin-x64.zip这里，在网上很多答案都说去electron mirror去下载zip放在缓存目录，当然，在较早的electron版本是ok的，但是 由于@electron/get包的修改，使上文中方法无效解决方法：使用命令安装： ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" npm install electron参考链接： 安装 - Electronelectron/get 修改了镜像的读取地址路径…https://www.ghosind.com/2019/02/28/install-electron-slowly二、解决root权限安装仍安全不够的问题相信很多人在npm install的时候，会遇到报错：Error: EACCES: permission denied, mkdtemp '/usr/local/lib/node_modules/electron/electron-download-Jbbf4p'即使使用了sudo依然无效。解决方法：npm install 添加参数 --unsafe-perm sudo ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" npm install electron -g --unsafe-perm这是全局安装，如果安装在项目里就把-g改成-D即可。参考资料：https://docs.npmjs.com/misc/config#unsafe-perm--unsafe-perm unsafe-perm Default: false if running as root, true otherwise Type: Boolean Set to true to suppress the UID/GID switching when running package scripts.If set explicitly to false, then installing as a non-root user will fail. 解决了这两个问题，相信安装electron应该没有什么困难了。

Electron: 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架Vue.js: Web 前端用于构建用户界面的渐进式框架Vuetify: Vue.js 的 Material Design 组件框架看完以上介绍，也明白了本文要做的事：用 Vue.js 与 Vuetify 组件，基于 Electron 来创建原生桌面应用。 环境准备 Visual Studio CodeNode.jsYarnVue CLI创建 Vue.js 应用添加 Vuetify 组件添加 Electron 构建发布 Electron 应用参考结语环境准备Visual Studio Code建议使用的 VS Code 编辑代码，下载地址： https://code.visualstudio.com/ 。 同时可安装如下些扩展： ESLint: 代码检查Prettier - Code formatter: 代码格式化Vetur: Vue 代码工具Vue 2 Snippets: Vue 代码提示（可选）查看 VS Code 版本： $ code -v1.46.1cd9ea6488829f560dc949a8b2fb789f3cdc05f5dx64Node.jsNode.js 开发环境，下载地址： https://nodejs.org/en/download/ 。 建议选择 Latest LTS Version ，因为 Electron v9 仍旧使用的 Node.js v12 。 ...

开个新坑玩下，如果新项目不赶的话应该会每周持续更新，断更就当我没说，(≧▽≦)/目前技术栈：electron、vue、elementui、koa主题：未定（金融类、图书类） 首先是环境构建 npm install -g vue-clivue init simulatedgreg/electron-vue my-projectcd my-projectnpm installnpm i element-ui -Snpm run devnpm install koa-static koa-static-cache koa-router --save 项目目录 vue代码放在renderer文件夹，koa代码会放在main文件夹 然后是前端router构建 import Vue from 'vue'import Router from 'vue-router'const originalPush = Router.prototype.pushRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(err => err)}Vue.use(Router)const indexRouter = { path: '/', name: 'index', component: require('@/components/index').default}const backUpRouter = { path: '*', redirect: '/'}const routes = [ indexRouter, backUpRouter]const router = new Router({ mode: 'history', base: process.env.VUE_APP_publicPath, routes: routes, scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }})router.onError((error) => { const pattern = /Loading chunk (\d)+ failed/g const isChunkLoadFailed = error.message.match(pattern) if (isChunkLoadFailed) { location.reload() }})export default routerkoa中台代码： ...

背景介绍使用 Electron 做跨平台客户端开发时，无论是开发工具类的应用，还是聊天类的应用，消息提醒都是一个常见的需求。 Electron 提供了通知的方式。可以直接使用 HTML5 Notification API 来发送通知。 node-notifier是一个跨平台的 Node.js 跨平台消息发送模块，本文介绍 Electron 集成 node-notifier 的过程以及遇到的问题和解决办法。并且因为在 Windows 下使用没有遇到什么大的问题，所以以下内容主要针对 Mac 系统。 环境搭建使用 electron-webpack-quick-start 初始化项目 electron-notifier添加 node-notifier 依赖：yarn add node-notifierdemo 代码 // main/index.jsimport { ipcMain } from "electron"const notifier = require("node-notifier");ipcMain.on("notify", (evt, data) => { const { title, message } = data; console.log("notify:", title, message); notifier.notify( { title, message }, (err, res) => { if (err) { console.log("error:", err); } } );});// renderer/index.jsconst { ipcRenderer } = require("electron");ipcRenderer.send("notify", { tite: "title", message: "This is a message"});运行 yarn run dev 弹出消息提示：运行 yarn run dist 打包，得到打包好的 .dmg 文件，打开运行，发现并没有消息提示。问题排查因为需要记录打包后应用的日志信息，引入 electron-log ...

公司有个内部桌面软件是基于electron vue写的，前几天负责开发这个客户端的人离职，我就成了临时接档优化的人。作为写vue但第一次接触electron的人，花了几天时间浏览了一下electron、electron vue官方文档、客户端代码的整体架构，即便如此，在优化过程中还是遇到了很多麻烦，项目结束后，特此做了一下总结。 功能测试通过后，开始打包发布，就开始了漫漫填坑之路。 electron打包一般可以通过electron-packager或者electron-builder两种方式实现。我选择了electron-builder打包，在官方文档上表示electron-builder： A complete solution to package and build a ready for distribution Electron, Proton Native app for macOS, Windows and Linux with “auto update” support out of the box.（打包构建适用于多种平台，并且支持自动更新） 以下是我其中一部分的配置: "scripts": { "build": "node .electron-vue/build.js && electron-builder build", "build:win": "node .electron-vue/build.js && electron-builder build --windows nsis:x64"}"mac": {    "icon": "build/icons/icon.icns",    "target": [        "dmg"    ]},    "win": {    "icon": "build/icons/icon.ico",    "target": [        {            "target": "nsis",            "arch": [                "x64"            ]        }     ]},（1）npm run build进行mac系统环境打包后，报了一个错：然后我修改了mac的配置： ...