当前位置：首页 > news >正文

2023 electron最新最简版windows、mac打包、自动升级详解

news 2025/7/4 23:27:09

这里我将讲解一下从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…...

编程日记 2023/11/7 11:37:42

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安装…...

编程日记 2023/11/7 11:35:40

表单验证不通过的一个点form中未定义这个字段

这个坑就是犯了好几次了，一直记不住，尤其是加了字段后的时候，总是忘记，然后导致验证不通过。以前我认为，只要表单绑定的内容中的属性有这个值就在ruler里面就可以验证他，，以至于我总是不在dat…...

编程日记 2023/11/7 11:34:38

Emacs之高亮显示超过80个字符部分(一百三十)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言： 人生…...

编程日记 2023/11/7 11:31:35

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…...

编程日记 2023/11/7 11:30:34

产品经理进阶：产品的起点是发现并理解问题

目录简介发现实际问题接下来选择一个问题之后就是验证问题最后总结一下 CSDN学院（硬件产品经理进阶课） 简介你花费了大量的时间来思考如何构建一款每个人都会喜欢的产品。但最终却发现没有人愿意为之买单。这其实就是没有真正理解客户问…...

编程日记 2023/11/7 11:29:33

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…...

编程日记 2023/11/7 11:28:32

RabbitMQ（高级特性）优先级队列

假设在电商系统中有一个订单催付的场景，即客户在一段时间内未付款会给用户推送一条短信提醒，但是系统中分为大型商家和小型商家。比如像苹果，小米这样大商家一年能给我们创造很大的利润，所以在订单量大时，他们的订单必…...

编程日记 2023/11/7 11:26:30

盘点苹果手机导出照片到电脑的3个方法！

大家都知道，手机中的照片是非常占用空间的。特别是对喜欢拍照的女生来说，每一张照片都很珍贵，并且也不舍得删除，所以想要将照片导出到电脑上进行保存。这样，也方便以后进行恢复与查看。对于想要将苹果手机上的照片导…...

编程日记 2023/11/7 11:25:29

px、rpx、em以及rem的区别与用法

px和rpx是尺寸单位，在网页开发中常用，而em和rem是字体尺寸单位，在网页开发和移动端开发中常用，下面分别介绍一下它们的区别和用法： px：像素，是绝对单位，不会随字体大小变化而变化&am…...

编程日记 2023/11/7 11:23:27

类(class)

类是 C中一个非常重要的元素，可以说是 C的灵魂所在了，我们都知道 C说一种面向对象的编程语言，那么面向对象是一种什么概念呢？在 C程序设计中，所有一切东西都可以称之为对象，任何对象都应该具有属性和行为。…...

编程日记 2023/11/7 11:22:26

FPGA时序分析与约束（10）——生成时钟

一、概述最复杂的设计往往需要多个时钟来完成相应的功能。当设计中存在多个时钟的时候，它们需要相互协作或各司其职。异步时钟是不能共享确定相位关系的时钟信号，当多个时钟域交互时，设计中只有异步时钟很难满足建立和保持要求。我们将在后面…...

编程日记 2023/11/7 11:21:24

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; }...

编程日记 2023/11/7 11:19:23

mvn: Downloading from pluginRepository

场景 maven 项目打包 mvn package 报git地址错误（有换新的git地址） 检查了下 settting.xml的配置没问题。是新的git地址。处理： 用命令： mvn -X [DEBUG] Message styles: debug info warning error success failure stron…...

编程日记 2023/11/7 11:18:21

docker相关知识

docker-compose https://www.runoob.com/docker/docker-compose.html Compose 使用的三个步骤： 使用 Dockerfile 定义应用程序的环境。使用 docker-compose.yml 定义构成应用程序的服务，这样它们可以在隔离环境中一起运行。最后，执行 …...

编程日记 2023/11/7 11:17:20

Springboot 集成 RocketMQ(进阶-消息)

0. 入门篇 Springboot 集成 RocketMq（入门）-CSDN博客 1. 异步消息 1.1 生产者 GetMapping("/send/async/{messageBody}")public String sendAsyncMsg(PathVariable("messageBody") String messageBody) {// 构建消息对象Message m…...

编程日记 2023/11/7 11:15:17

10 索引优化与查询优化

文章目录索引失效案例关联查询优化对于左外连接对于内连接JOIN语句原理简单嵌套循环连接SNLJ索引嵌套循环连接INLJ块嵌套循环连接BNLJHash Join 子查询优化排序优化filesort算法：双路排序和单路排序分组优化分页优化优先考虑覆盖索引索引下推ICP使用条件其他查询…...

编程日记 2023/11/7 11:14:16

linux PVE安装

先下载安装包： ISO - Proxmox Virtual Environment 普通电脑主机的话，做个U盘启动盘，进行刷机即可。如果还没制作U盘启动盘，建议用这个，方便多个镜像切换 Download . Ventoy 按照刷机提示页面一步步配置即可&#…...

编程日记 2023/11/7 11:13:15

ZZ038 物联网应用与服务赛题第J套

2023年全国职业院校技能大赛中职组物联网应用与服务任务书 （J卷） 赛位号：______________ 竞赛须知一、注意事项 1.检查硬件设备、电脑设备是否正常。检查竞赛所需的各项设备、软件和竞赛材料等； 2.竞赛任务中所使用…...

编程日记 2023/11/7 11:12:14

接口测试中缓存处理策略

在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...

编程新知 2025/7/3 13:24:14

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下，越来越多的求职者将目光投向了日本及中日双语岗位。但是，一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧？面对生疏的日语交流环境，即便提前恶补了…...

编程新知 2025/7/4 20:05:03

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...

编程新知 2025/7/4 4:19:45

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略背景Solution --- 分表背景使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log，共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题，不能使用ELK只能使用…...

编程新知 2025/7/4 12:04:09

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/6/24 6:09:01