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

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

这里我将讲解一下从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最新最简版打包、自动升级详解

这里我将讲解一下从0搭建一个electron最简版架子&#xff0c;以及如何实现打包自动化更新 之前我有写过两篇文章关于electron框架概述以及 常用api的使用&#xff0c;感兴趣的同学可以看看 Electron桌面应用开发 Electron桌面应用开发2 搭建electron 官方文档&#xff1a;ht…...

ConcurrentHashMap是如何实现线程安全的

目录 原理&#xff1a; 初始化数据结构时的线程安全 put 操作时的线程安全 原理&#xff1a; 多段锁cassynchronize 初始化数据结构时的线程安全 在 JDK 1.8 中&#xff0c;初始化 ConcurrentHashMap 的时候这个 Node[] 数组是还未初始化的&#xff0c;会等到第一次 put() 方…...

MYSQL:索引与锁表范围简述

一、聚簇索引原则 当有主键索引时&#xff0c;选择主键索引&#xff1b;如果没有主键索引&#xff0c;选择第一个的unique索引&#xff1b;如果都没有就选择隐藏生成的ROW_ID。 二、加锁原则 来自知乎MySQL探秘(七):InnoDB行锁算法 - 知乎 (zhihu.com) 在不通过索引条件查询时…...

15 款 PDF 编辑器帮助轻松编辑、合并PDF文档

PDF 编辑器在当今的数字环境中至关重要&#xff0c;因为 PDF 已成为共享和存储信息的首选格式。只需几分钟&#xff0c;可靠的 PDF 编辑器即可让用户能够根据其特定需求修改、定制和定制文档。在本文中&#xff0c;我们全面汇编了 15 款最佳免费 PDF 编辑器&#xff0c;让您可以…...

PS Raw中文增效工具Camera Raw 16

Camera Raw 16 for mac&#xff08;PS Raw增效工具&#xff09;的功能特色包括强大的图像调整工具。例如&#xff0c;它提供白平衡、曝光、对比度、饱和度等调整选项&#xff0c;帮助用户优化图像的色彩和细节。此外&#xff0c;Camera Raw 16的界面简洁易用&#xff0c;用户可…...

Flink源码解析二之执行计划⽣成

JobManager Leader 选举 首先flink会依据配置获取RecoveryMode,RecoveryMode一共两两种:STANDALONE和ZOOKEEPER。 如果用户配置的是STANDALONE,会直接去配置中获取JobManager的地址如果用户配置的是ZOOKEEPER,flink会首先尝试连接zookeeper,利用zookeeper的leadder选举服务发现…...

MySQL遍历所有表所有字段查找字符数据

MySQL遍历所有表所有字段查找字符数据 工作中有一些数据查找&#xff0c;但是在那个库那个表那个字段中并不明确&#xff0c;特别是敏感字符查找&#xff0c;如果数据量并不大&#xff0c;我们可以采用遍历整个库、表中字符来查找相关数据来解决该问题。 我们可以写一个存储过…...

Java中的异常处理机制是怎样的?

Java中的异常处理机制主要包括以下几个部分&#xff1a; 异常类&#xff08;Exception Class&#xff09;&#xff1a;Java中的异常类继承自java.lang.Throwable&#xff0c;主要分为两大类&#xff1a;Error和Exception。Error表示程序无法处理的严重问题&#xff0c;如系统崩…...

高教社杯数模竞赛特辑论文篇-2023年A题:定日镜场的优化设计(附获奖论文及MATLAB代码实现)

目录 摘 要 一、 问题重述 1.1 问题背景 1.2 问题重述 二、 模型假设 三、 符号说明...

c语言实现http下载功能,显示进度条和下载速率

#include <stdio.h>//printf #include <string.h>//字符串处理 #include <sys/socket.h>//套接字 #include <arpa/inet.h>//ip地址处理 #include <fcntl.h>//open系统调用 #include <unistd.h>//write系统调用 #include <netdb.h>//…...

Educational Codeforces Round 157 (Rated for Div. 2) D. XOR Construction (思维题)

题目 给定长为n-1(n<2e5)的整数序列a&#xff0c;第i个数a[i](0<a[i]<2n) 构造一个长为n的整数序列b&#xff0c;满足&#xff1a; 1. 0到n-1在b数组中每个数恰好出现一次 2. 对于&#xff0c; 题目保证一定有解&#xff0c;有多组时可以输出任意一组 思路来源 …...

【unity实战】实现类似英雄联盟的buff系统

文章目录 先来看看最终效果前言开始BUFF系统加几个BUFF测试1. 逐层消失&#xff0c;升级不重置剩余时间的BUFF2. 一次性全部消失&#xff0c;升级重置剩余时间的BUFF3. 永久BUFF&#xff0c;类似被动BUFF4. 负面BUFF&#xff0c;根据当前BUFF等级计算每秒收到伤害值&#xff0c…...

【C语言基础教程】函数指针与指针大小

文章目录 前言一、函数指针1.1 函数指针的概念1.2 三个示例代码示例1: 使用函数指针调用不同的函数示例 2: 使用函数指针实现回调函数示例 3: 使用函数指针数组 二、指针的大小2.1 前述2.2 指针大小如何决定&#xff1f;两方面理解 总结 前言 在C语言中&#xff0c;指针是一项…...

Web前端—网页制作(以“学成在线”为例)

版本说明 当前版本号[20231105]。 版本修改说明20231105初版 目录 文章目录 版本说明目录day07-学成在线01-项目目录02-版心居中03-布局思路04-header区域-整体布局HTML结构CSS样式 05-header区域-logo06-header区域-导航HTML结构CSS样式 07-header区域-搜索布局HTML结构CSS…...

Hive【Hive(八)自定义函数】

自定义函数用的最多的是单行函数&#xff0c;所以这里只介绍自定义单行函数。 Coding 导入依赖 <dependency><groupId>org.apache.hive</groupId><artifactId>hive-exec</artifactId><version>3.1.3</version></dependency>…...

linux远程桌面管理工具xrdp

一、概述 我们知道&#xff0c;我们日常通过vnc来远程管理linux图形界面&#xff0c;今天分享一工具Xrdp&#xff0c;它是一个开源工具&#xff0c;允许用户通过Windows RDP访问Linux远程桌面。 除了Windows RDP之外&#xff0c;xrdp工具还接受来自其他RDP客户端的连接&#xf…...

100天精通Python(可视化篇)——第106天:Pyecharts绘制多种炫酷桑基图参数说明+代码实战

文章目录 专栏导读一、桑基图介绍1. 桑基图是什么?2. 桑基图应用场景?二、桑基图配置选项1. 导包2. add函数3. 分层设置三、桑基图基础1. 普通桑基图2. 修改标签位置3. 修改节点布局方向4、月度开支桑基图书籍推荐专栏导读 🔥🔥本文已收录于《100天精通Python从入门到就…...

什么是OTP认证?OTP认证服务器有哪些应用场景?

OTP是一次性密码&#xff0c;即只能使用一次的密码。它基于专门的算法&#xff0c;每隔60秒生成一个不可预测的随机数字组合。这种密码的有效期仅在一次会话或交易过程中&#xff0c;因此不容易受到重放攻击。在计算器系统或其他数字设备上&#xff0c;OTP是一种只能使用一次的…...

shell_73.Linux使用新 shell 启动脚本

每次启动新 shell&#xff0c;bash shell 都会运行.bashrc 文件。①对此进行验证&#xff0c;可以使用这种方法&#xff1a;在 主目录下的.bashrc 文件中加入一条简单的 echo 语句&#xff0c;然后启动一个新 shell。 $ cat $HOME/.bashrc # .bashrc # Source global definiti…...

【领域驱动设计】聚合

从战术设计上&#xff0c;DDD 最值得借鉴的就是聚合根 什么是聚合 将实体和值对象在一致性边界之内组合聚合 这里的一致性包括 1、业务概念的完整性 2、业务规则的一致性&#xff1a;多个实体需要在一次操作中保持某种一致性&#xff08;修改 A&#xff0c;同步必须修改 B&a…...

双极性PWM调速:从占空比到电机转速的闭环控制策略

1. 双极性PWM调速的基本原理 我第一次接触双极性PWM调速是在一个机器人关节控制项目上。当时需要精确控制关节转动角度&#xff0c;但发现简单的开环控制根本无法满足精度要求。这让我深入研究了双极性PWM的工作原理&#xff0c;现在把这些经验分享给大家。 双极性PWM与常见的单…...

OpenClaw+Qwen2.5-VL-7B:低成本自动化学习助手

OpenClawQwen2.5-VL-7B&#xff1a;低成本自动化学习助手 1. 为什么需要自动化学习助手 作为一个经常需要处理大量学习资料的开发者&#xff0c;我一直在寻找能够提升学习效率的工具。传统的学习方式需要手动整理资料、做笔记、制作练习题&#xff0c;这些重复性工作不仅耗时…...

React + TypeScript 实战:安全高效集成 OpenAI API 的进阶指南

1. 为什么选择ReactTypeScript集成OpenAI API 在当今的前端开发领域&#xff0c;React和TypeScript已经成为构建现代化Web应用的首选技术栈。当我们需要集成像OpenAI API这样的AI服务时&#xff0c;这个组合能带来显著的优势。 TypeScript的静态类型检查可以在开发阶段就捕获许…...

SecGPT-14B精准调教:OpenClaw自动化生成安全测试数据集

SecGPT-14B精准调教&#xff1a;OpenClaw自动化生成安全测试数据集 1. 为什么需要自动化安全测试数据集 作为一名长期从事安全研究的工程师&#xff0c;我深知高质量数据集对模型训练的重要性。传统安全测试数据收集过程存在三个痛点&#xff1a;人工标注耗时耗力、样本格式不…...

Minimal Agent 能力与技术架构深度解析

&#x1f4d8; Minimal Agent 能力与技术架构深度解析 第一章&#xff1a;Minimal Agent 的定位与核心价值 Minimal Agent 是一个 “极简操作系统控制代理”&#xff0c;其设计哲学在于去繁就简、直达底层。它通过创新的双模式架构&#xff0c;将大语言模型的通用能力与操作系统…...

KXTJ3-1057运动检测库:嵌入式低功耗加速度计工程实践

1. KXTJ3-1057运动检测库深度解析&#xff1a;面向嵌入式系统的低功耗MEMS加速度计工程实践1.1 芯片级硬件特性与系统定位KXTJ3-1057是罗姆&#xff08;ROHM&#xff09;推出的超低功耗三轴MEMS加速度计&#xff0c;其核心价值不在于参数堆砌&#xff0c;而在于“运动检测无冗余…...

【源码深度】Android 触摸事件分发机制全解析|吃透 dispatch、intercept、onTouchEvent 与滑动冲突|Android全栈体系150讲-09

...

OpenClaw长期运行优化:Qwen3.5-9B-AWQ-4bit内存泄漏排查

OpenClaw长期运行优化&#xff1a;Qwen3.5-9B-AWQ-4bit内存泄漏排查 1. 问题背景与现象描述 上周我的OpenClaw网关服务在连续运行72小时后突然崩溃&#xff0c;导致自动化任务全部中断。查看系统监控发现内存占用从初始的2GB逐渐增长到16GB&#xff08;我的服务器总内存&…...

python namedtuple

## Python 中的 Any&#xff1a;一个被低估的类型注解工具 在 Python 的类型注解体系里&#xff0c;Any 是一个看似简单&#xff0c;却常常引发误解的特殊类型。很多开发者第一次见到它时&#xff0c;可能会觉得这不过是个“万金油”式的占位符&#xff0c;用来应付那些暂时不想…...

如何在浏览器中零安装使用GraphvizOnline创建专业流程图

如何在浏览器中零安装使用GraphvizOnline创建专业流程图 【免费下载链接】GraphvizOnline Lets Graphviz it online 项目地址: https://gitcode.com/gh_mirrors/gr/GraphvizOnline GraphvizOnline是一款革命性的在线可视化工具&#xff0c;让您无需安装任何软件即可在浏…...