2023 electron最新最简版windows、mac打包、自动升级详解
这里我将讲解一下从0搭建一个electron最简版架子，以及如何实现打包自动化更新
之前我有写过两篇文章关于electron框架概述以及 常用api的使用，感兴趣的同学可以看看
Electron桌面应用开发
Electron桌面应用开发2
搭建electron
官方文档：https://www.electronjs.org/zh/
只需要三个文件就可以跑起来electron
创建一个文件目录
mkdir my-electron-app && cd my-electron-app
yarn init
然后，将 electron 包安装到应用的开发依赖中。
yarn add --dev electron
{"name": "my-electron-app","version": "1.0.0","description": "Hello World!","main": "main.js", // 入口文件"author": "Jane Doe","license": "MIT","scripts": {"start": "electron ."},"devDependencies": {"electron": "^27.0.3",}
}
main.js
const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600})win.loadFile('index.html') // 加载index.html
}
index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>你好!</title></head><body><h1>你好!</h1>我们正在使用 Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,和 Electron <span id="electron-version"></span>.</body>
</html>
yarn start就可以启动起来，这是最简版的框架
配置打包、自动升级
这里强调一下
做mac的打包需要开通苹果开发者账号，购买证书，打包需要签名，这里购买和配置的流程很复杂就不做过多赘述，都搜的到。
其实windows也需要签名 证书，但是不提供也可以打包
打包和自动升级用到了官方提供的两个工具
打包：electron-builder
升级：electron-updater
electron-builder官方文档地址：https://www.electron.build/configuration/win#WindowsConfiguration-certificateSubjectName
如果觉得英文看着不方便，有大神中文总结了一下，地址：https://blog.csdn.net/qq_38830593/article/details/89843722
首先下载这两个库：
yarn add electron-builder -D
yarn add electron-updater
package.json里做参数配置
看build参数，各个参数对照着官方文档
{"name": "electron-test","version": "1.0.0","description": "Hello World!","main": "main.js","license": "MIT","scripts": {"start": "electron .","build": "electron-builder"},"build": {"productName": "electron-test","appId": "cn.legaldawn.Lawdawn","copyright": "版权所有信息","asar": false,"directories": {"output": "dist"},"dmg": {"artifactName": "${name}-${version}.${ext}"},"publish": [{"provider": "generic","url": "https://lawdawn-download.oss-cn-beijing.aliyuncs.com/win-2023-11-04-1/"}],"mac": {"category": "public.app-category.developer-tools","entitlementsInherit": "build/app-entitlements.plist","icon": "build/icon.png"},"win": {"icon": "build/icon.ico","requestedExecutionLevel": "highestAvailable","target": [{"target": "nsis","arch": ["x64"]}]},"linux": {"target": [{"target": "deb","arch": ["x64"]}],"icon": "build/icon.png","maintainer": "主要贡献者","description": "基于4.1.4配置"},"nsis": {"oneClick": false,"allowElevation": true,"perMachine": false,"allowToChangeInstallationDirectory": true,"createDesktopShortcut": true,"createStartMenuShortcut": true,"uninstallDisplayName": "${productName}","shortcutName": "${productName}","artifactName": "${name}-${version}-setup.${ext}","runAfterFinish": true}},"devDependencies": {"electron": "^27.0.3","electron-builder": "^24.6.4"},"dependencies": {"electron-log": "^5.0.0","electron-updater": "^6.1.4"}
}main.js
const { app, BrowserWindow, ipcMain } = require('electron')
const { autoUpdater} = require('electron-updater')
const os = require('os')
const logger = require('electron-log')//打印log到本地
logger.transports.file.maxSize = 1002430 // 10M
logger.transports.file.format ='[{y}-{m}-{d} {h}:{i}:{s}.{ms}] [{level}]{scope} {text}'
logger.transports.file.resolvePath = () => './operation.log' //打印在你安装的软件位置，autoUpdater.autoDownload = false //这个必须写成false，写成true时，我这会报没权限更新，也没清楚什么原因// 将创建窗口独立成一个函数
function createWindow() {let mainWin = new BrowserWindow({x: 100,y: 100, // 设置窗口显示的位置，相对于当前屏幕的左上角show: false, // 默认情况下创建一个窗口对象之后就会显示，设置为false 就不会显示了width: 800,height: 400,// maxHeight: 600,// maxWidth: 1000,minHeight: 200,minWidth: 300, // 可以通过 min max 来设置当前应用窗口的最大和最小尺寸resizable: true, // 是否允许缩放应用的窗口大小title: 'electron-tester',webPreferences: {enableWebSQL: false,webSecurity: false,spellcheck: false,nativeWindowOpen: true,nodeIntegration: true,contextIsolation: false,},experimentalDarkMode: true,})mainWin.loadFile('./src/index.html')//忽略无关代码ipcMain.on('checkUpdate', () => {console.log('checkUpdate-->')//处理更新操作const returnData = {error: {status: -1,msg: '更新时发生意外，无法进行正常更新！',},checking: {status: 0,msg: '正在检查更新……',},updateAva: {status: 1,msg: '正在升级……',},updateNotAva: {status: 2,msg: '当前没有可用的更新...',},}let platform =os.platform() === 'darwin'? process.arch === 'x64'? 'darwin': 'darwin-arm64': 'win32'let commitId = 'ab4f3c131bfec65670dd265549646b725f8ee649'//更新连接autoUpdater.setFeedURL(// `https://devxz.dafenqi.law/lawdawn-api/api/update/${platform}/${commitId}`'https://lawdawn-download.oss-cn-beijing.aliyuncs.com/win-2023-11-04-1')logger.error(['检查更新'])//更新错误事件autoUpdater.on('error', function (error) {console.log('err-->', error)logger.error(['检查更新失败', error])sendUpdateMessage(returnData.error)})//检查事件autoUpdater.on('checking-for-update', function () {sendUpdateMessage(returnData.checking)})//发现新版本autoUpdater.on('update-available', function (info) {console.log('info22-->', info)logger.info(['发现新版本', info])sendUpdateMessage(returnData.updateAva)autoUpdater.downloadUpdate()})//当前版本为最新版本autoUpdater.on('update-not-available', function (info) {console.log('info11-->', info)setTimeout(function () {sendUpdateMessage(returnData.updateNotAva)}, 1000)})//更新下载进度事件autoUpdater.on('download-progress',function (progressObj, bytesPerSecond, percent, total, transferred) {console.log('progressObj-->', progressObj)mainWin.webContents.send('downloadProgress', progressObj)})//下载完毕autoUpdater.on('update-downloaded', function (event, releaseObj) {//退出并进行安装（这里可以做成让用户确认后再调用）console.log('releaseNotes-->', releaseObj)autoUpdater.quitAndInstall()})//发送消息给窗口function sendUpdateMessage(text) {mainWin.webContents.send('message', text)}//发送请求更新autoUpdater.checkForUpdates()})mainWin.on('ready-to-show', () => {mainWin.show()})// mainWin.on('closed', () => {// console.log('mainWin is closed')// mainWin = null// })
}process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'app.on('ready', createWindow)
app.on('window-all-closed', () => {console.log('all window is closed')app.quit()
})index.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><h1>Document...</h1><button id="btn">test</button><button id="btn1">检查更新</button></body>
</html>
<script>const fs = require('fs')const { ipcRenderer } = require('electron')document.getElementById('btn').onclick = () => {console.log('window-->', window)console.log('process-->', process, fs)navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {console.log('stream-》', stream)// Do something with the stream}).catch((error) => {console.error('Failed to access microphone:', error)})}document.getElementById('btn1').onclick = () => {//请求检查更新ipcRenderer.send('checkUpdate')}//下载中收到的进度信息ipcRenderer.on('downloadProgress', (event, data) => {// me.prograssStyle.width = data.percent.toFixed(2) + "%";//更新进度条样式// me.stepText = "正在更新中(" + me.prograssStyle.width + ")...";console.log('data-->', data)})//监听请求更新响应，用来处理不同的事件ipcRenderer.on('message', (event, data) => {switch (data.status) {case -1:alert(data.msg)breakcase 1:console.log('正在升级')breakcase 2:alert(data.msg)break}})
</script>执行升级
执行yarn build之后，会生成安装包 和 yml文件
yml文件是内部做检测更新使用
version: 1.0.0
files:- url: electron-test-1.0.0-arm64-mac.zipsha512: YFebRa4hFb0eq7JBHtIbe6zpEm59b3uR0NaKJJaY5M7G7ZfCoFIWJl/N3cDzSvPK1vWSgeGTRwxteHmwV7PXBQ==size: 88974676- url: electron-test-1.0.0.dmgsha512: ZToMM68na/NWbvYpqqEk3Ej0LzsDoyEYd9rW2qHIaq5FxU/HHNntzX2KiSv002WcLX6aQgLSgh37gvUJytvOpQ==size: 92423278
path: electron-test-1.0.0-arm64-mac.zip
sha512: YFebRa4hFb0eq7JBHtIbe6zpEm59b3uR0NaKJJaY5M7G7ZfCoFIWJl/N3cDzSvPK1vWSgeGTRwxteHmwV7PXBQ==
releaseDate: '2023-11-05T08:56:32.685Z'我们需要把这三个文件放在 对象存储服务器上
只要提供的更新地址拼接上 latest-mac.yml文件的 可以访问到就可以
这样就可以做更新了
如果做测试，本地启动一个服务
//更新连接autoUpdater.setFeedURL('http://127.0.0.1:5500/build')
这里指向本地就可以，打包生层的文件放在build目录下 一样测试
相关文章：
2023 electron最新最简版windows、mac打包、自动升级详解
这里我将讲解一下从0搭建一个electron最简版架子，以及如何实现打包自动化更新 之前我有写过两篇文章关于electron框架概述以及 常用api的使用，感兴趣的同学可以看看 Electron桌面应用开发 Electron桌面应用开发2 搭建electron 官方文档：ht…...
Ubuntu18.04安装pcl-1.12.1，make时报错：/usr/bin/ld: cannot find -lvtkIOMPIImage
解决方案： 在vtk安装包中，重新打开cmake-gui，然后勾选上VTK_Group_MPI和VTK_Group_Imaging。 cd VTK-8.2.0 cd build cmake-gui然后重新编译生成。 make -j8 # 或者j4,量力而行。 sudo make install 就可以解决了。 然后重新回到pcl安装…...
表单验证不通过的一个点form中未定义这个字段
这个坑就是犯了好几次了，一直记不住，尤其是加了字段后的时候，总是忘记，然后导致验证不通过。 以前我认为，只要表单绑定的内容中的属性有这个值就在ruler里面就可以验证他，，以至于我总是不在dat…...
最新、最全、最详细的 K8S 学习笔记总结
Kubernetes就是一个编排容器的工具，一个可以管理应用全生命周期的工具，从创建应用，应用的部署，应用提供服务，扩容缩容应用，应用更新，都非常的方便，而且可以做到故障自愈。 K8S的前景…...
Emacs之高亮显示超过80个字符部分(一百三十)
简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言： 人生…...
C语言 每日一题 PTA 11.7 day13
1.求e的近似值 自然常数 e 可以用级数 1 1 / 1! 1 / 2! ⋯ 1 / n! ⋯ 来近似计算。 本题要求对给定的非负整数 n，求该级数的前 n 1 项和。 代码实现 #include<stdio.h> void main() {int a, i, j; double b 1; double c 1;printf("请输入一个数\n…...
产品经理进阶：产品的起点是发现并理解问题
目录 简介 发现实际问题 接下来选择一个问题 之后就是验证问题 最后总结一下 CSDN学院（硬件产品经理进阶课） 简介 你花费了大量的时间来思考如何构建一款每个人都会喜欢的产品。 但最终却发现没有人愿意为之买单。 这其实就是没有真正理解客户问…...
Java —— 类和对象（一）
目录 1. 面向对象的初步认知 1.1 什么是面向对象 1.2 面向对象与面向过程 2. 类定义和使用 2.1 认识类 2.2 类的定义格式 3. 类的实例化(如何产生对象) 3.1 什么是实例化 3.2 访问对象的成员 3.3 类和对象的说明 4. this引用 4.1 为什么要有this引用 4.2 什么是this引用 4.3 th…...
RabbitMQ（高级特性）优先级队列
假设在电商系统中有一个订单催付的场景，即客户在一段时间内未付款会给用户推送一条短信提醒，但是系统中分为大型商家和小型商家。比如像苹果，小米这样大商家一年能给我们创造很大的利润，所以在订单量大时，他们的订单必…...
盘点苹果手机导出照片到电脑的3个方法！
大家都知道，手机中的照片是非常占用空间的。特别是对喜欢拍照的女生来说，每一张照片都很珍贵，并且也不舍得删除，所以想要将照片导出到电脑上进行保存。这样，也方便以后进行恢复与查看。 对于想要将苹果手机上的照片导…...
px、rpx、em以及rem的区别与用法
px和rpx是尺寸单位，在网页开发中常用，而em和rem是字体尺寸单位，在网页开发和移动端开发中常用，下面分别介绍一下它们的区别和用法： px：像素，是绝对单位，不会随字体大小变化而变化&am…...
类(class)
类是 C中一个非常重要的元素，可以说是 C的灵魂所在了，我们都知道 C说一种面向对象的编程语言，那么面向对象是一种什么概念呢？在 C程序设计中，所有一切东西都可以称之为对象，任何对象都应该具有属性和行为。…...
FPGA时序分析与约束（10）——生成时钟
一、概述 最复杂的设计往往需要多个时钟来完成相应的功能。当设计中存在多个时钟的时候，它们需要相互协作或各司其职。异步时钟是不能共享确定相位关系的时钟信号，当多个时钟域交互时，设计中只有异步时钟很难满足建立和保持要求。我们将在后面…...
A. Hit the Lottery
#include<bits/stdc.h> using namespace std; const int N1e55; int n,a[N],res; int main(){scanf("%d",&n);int an/100;n%100;int bn/20;n%20;int cn/10;n%10;int dn/5;n%5;int en;cout<<abcde;return 0; }...
mvn: Downloading from pluginRepository
场景 maven 项目打包 mvn package 报git地址错误（有换新的git地址） 检查了下 settting.xml的配置没问题。是新的git地址。 处理： 用命令： mvn -X [DEBUG] Message styles: debug info warning error success failure stron…...
docker相关知识
docker-compose https://www.runoob.com/docker/docker-compose.html Compose 使用的三个步骤： 使用 Dockerfile 定义应用程序的环境。 使用 docker-compose.yml 定义构成应用程序的服务，这样它们可以在隔离环境中一起运行。 最后，执行 …...
)
Springboot 集成 RocketMQ(进阶-消息)
0. 入门篇 Springboot 集成 RocketMq（入门）-CSDN博客 1. 异步消息 1.1 生产者 GetMapping("/send/async/{messageBody}")public String sendAsyncMsg(PathVariable("messageBody") String messageBody) {// 构建消息对象Message m…...
10 索引优化与查询优化
文章目录 索引失效案例关联查询优化对于左外连接对于内连接JOIN语句原理简单嵌套循环连接SNLJ索引嵌套循环连接INLJ块嵌套循环连接BNLJHash Join 子查询优化排序优化filesort算法：双路排序和单路排序 分组优化分页优化优先考虑覆盖索引索引下推ICP使用条件 其他查询…...
linux PVE安装
先下载安装包： ISO - Proxmox Virtual Environment 普通电脑主机的话，做个U盘启动盘，进行刷机即可。 如果还没制作U盘启动盘，建议用这个，方便多个镜像切换 Download . Ventoy 按照刷机提示页面一步步配置即可&#…...
ZZ038 物联网应用与服务赛题第J套
2023年全国职业院校技能大赛 中职组 物联网应用与服务 任 务 书 （J卷） 赛位号：______________ 竞赛须知 一、注意事项 1.检查硬件设备、电脑设备是否正常。检查竞赛所需的各项设备、软件和竞赛材料等； 2.竞赛任务中所使用…...
ES6从入门到精通：前言
ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
JVM垃圾回收机制全解析
Java虚拟机（JVM）中的垃圾收集器（Garbage Collector，简称GC）是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象，从而释放内存空间，避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程
本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。 本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...
【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
R 语言科研绘图第 55 期 --- 网络图-聚类
在发表科研论文的过程中，科研绘图是必不可少的，一张好看的图形会是文章很大的加分项。 为了便于使用，本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中，获取方式： R 语言科研绘图模板 --- sciRplothttps://mp.…...
关于uniapp展示PDF的解决方案
在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项： 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库： npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...