Electron 项目实战 02：打包和自动更新

2024-08-31 05:36
文章标签 实战 项目 02 打包 自动更新 electron

本文主要是介绍Electron 项目实战 02：打包和自动更新，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

技术选型

  • electron-forge
  • electron-builder

electron-forge 是Electron 官方文档介绍的，打包和发布都包含了，但是包含的坑也非常多。electron-builder下载量和集成打包非常顺利，本教程也是采用electron-buid来介绍打包。大家在技术选型的时候要多找几个，原则：选下载量高、社区活跃度高、问题少的技术，这样可以让你少走很多弯路。

由于我没有mac os 环境，就只介绍windows 环境打包和更新，按文档添加对应配置应该问题不大。

安装依赖

yarn add electron-builder -D

添加打包配置

  • package.json

    {"name": "my-electron-app","version": "0.0.1","main": "main.js","author": "Potter<aa4790139@gmail.com>","license": "MIT","scripts": {"dev": "electron .","publish": "electron-builder --win -p always"},"build": {"appId": "com.my.electron.app","productName": "my-electron-app","publish": [{"provider": "github","owner": "yxw007","repo": "electron_app"}],"win": {"target": "nsis"},"directories": {"output": "build"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true}},"devDependencies": {"electron": "^28.0.0","electron-builder": "^24.9.1"},
}

打包

npm run publish

Untitled.png

打包后会自动发布至github对应仓库，Release页会自动生成一个Draft，需要手动发布才能成为正式版本

Untitled 1.png

集成自动更新

  • 安装依赖

    yarn add electron-updater electron-log

  • index.html，添加一个更新标签来显示我们的更新信息

    <!DOCTYPE html>
<html><head><meta charset="UTF-8" /><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self'" /><meta http-equiv="X-Content-Security-Policy"content="default-src 'self'; script-src 'self'" /><title>Electron App</title>
</head><body><div>Electron App</div>Current version: <span id="version">vX.Y.Z</span><p id="info"></p><div id="message"></div>
</body>
<script src="./renderer.js"></script></html>

  • main.js 添加自动相关代码

    const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("node:path");
//1.添加日志显示，方便问题排查
const log = require("electron-log");
const { autoUpdater } = require("electron-updater");autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = "info";
log.info("App starting...");let win;
const createWindow = () => {win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, "preload.js"),},});// win.loadFile("index.html");win.loadURL(`file://${__dirname}/index.html#v${app.getVersion()}`);
};function sendStatusToWindow(text) {log.info(text);win.webContents.send("message", { message: text });
}
//! autoUpdater 监听相关的常用事件
autoUpdater.on("checking-for-update", () => {sendStatusToWindow("Checking for update...");
});
autoUpdater.on("update-available", (info) => {sendStatusToWindow("Update available.");
});
autoUpdater.on("update-not-available", (info) => {sendStatusToWindow("Update not available.");
});
autoUpdater.on("error", (err) => {sendStatusToWindow("Error in auto-updater. " + err);
});
autoUpdater.on("download-progress", (progressObj) => {let log_message = "Download speed: " + progressObj.bytesPerSecond;log_message = log_message + " - Downloaded " + progressObj.percent + "%";log_message =log_message +" (" +progressObj.transferred +"/" +progressObj.total +")";sendStatusToWindow(log_message);
});
autoUpdater.on("update-downloaded", (info) => {sendStatusToWindow("Update downloaded");//! 下载完后立即更新autoUpdater.quitAndInstall();
});app.whenReady().then(() => {//! 主进程，处理渲染进程的消息ipcMain.handle("ping", () => {return `I'm ipcMain`;});// ! 1.监听来自渲染进程的消息ipcMain.on("message-from-renderer", (event, arg) => {console.log("Renderer Process Message:", arg);//! 2.发送回复消息到渲染进程event.sender.send("message-from-main", "Hello from main process!");});createWindow();console.log(process.platform);app.on("activate", () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}});
});app.whenReady().then(() => {//! app ready 自动检查更新autoUpdater.checkForUpdatesAndNotify();console.log("app ready: checkForUpdatesAndNotify");
});app.on("window-all-closed", () => {if (process.platform !== "darwin") {console.log("quit");app.quit();}
});

重新发布版本

npm run publish

此时github 对应仓库Release 页面又会多一个Draft版本，点击修改让其发布，然后更新package.json 中的版本号，再重新发布一次。

为了让你看到这个过程，你可以先下载我演示的my-electron-app-Setup-0.1.4.exe，安装完后打开会检测自动更新，安装完后再打开就会看到更新至v0.1.5

Untitled 2.png

Untitled 3.png

总结

  • 技术选型时尽量多选几个，选择下载量高、社区活跃高(发包更新频率、bug修复数量、bug修复速度综合对比下)的技术，可以让你少踩坑

补充

说明：如果更新出错，可以到C:\Users\Administrator\AppData\Roaming\xxx\logs 目录下查看main.log 日志查看具体问题

完整：demo

参考文献

  • https://github.com/yxw007/electron-updater-example
  • https://www.electron.build/

更多

家人们，我最近花了2个多月开源了一个文章发布助手artipub，可以帮你一键将markdown发布至多平台（发布和更新），方便大家更好的传播知识和分享你的经验。
目前已支持平台：个人博客、Medium、Dev.to（未来会支持更多平台）
官网地址：https://artipub.github.io/artipub/
仓库地址：https://github.com/artipub/artipub

目前库已可以正常使用，欢迎大家体验、如果你有任何问题和建议都可以提Issue给我反馈。
如果你感兴趣，特别欢迎你的加入，让我们一起完善好这个工具。
帮忙点个star⭐，让更多人知道这个工具，感谢大家🙏

这篇关于Electron 项目实战 02：打包和自动更新的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1123034。

相关文章

JAVA项目swing转javafx语法规则以及示例代码

JAVA项目swing转javafx语法规则以及示例代码

《JAVA项目swing转javafx语法规则以及示例代码》：本文主要介绍JAVA项目swing转javafx语法规则以及示例代码的相关资料,文中详细讲解了主类继承、窗口创建、布局管理、控件替换、... 目录最常用的“一行换一行”速查表（直接全局替换）实际转换示例（JFramejs → JavaFX）迁移建
阅读更多...
JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

《JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)》：本文主要介绍如何在IntelliJIDEA2020.1中创建和部署一个JavaWeb项目,包括创建项目、配置Tomcat服务... 目录简介：一、创建项目二、tomcat部署1、将tomcat解压在一个自己找得到路径2、在idea中添加
阅读更多...
解决idea启动项目报错java: OutOfMemoryError: insufficient memory

解决idea启动项目报错java: OutOfMemoryError: insufficient memory

《解决idea启动项目报错java:OutOfMemoryError:insufficientmemory》：本文主要介绍解决idea启动项目报错java:OutOfMemoryError... 目录原因：解决：总结 原因：在Java中遇到OutOfMemoryError: insufficient me
阅读更多...
python项目环境切换的几种实现方式

python项目环境切换的几种实现方式

《python项目环境切换的几种实现方式》本文主要介绍了python项目环境切换的几种实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 如何在不同python项目中，安装不同的依赖2. 如何切换到不同项目的工作空间3.创建项目
阅读更多...
SpringBoot项目整合Netty启动失败的常见错误总结

SpringBoot项目整合Netty启动失败的常见错误总结

《SpringBoot项目整合Netty启动失败的常见错误总结》本文总结了SpringBoot集成Netty时常见的8类问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录一、端口冲突问题1. Tomcat与Netty端口冲突二、主线程被阻塞问题1. Netty启动阻
阅读更多...
python项目打包成docker容器镜像的两种方法实现

python项目打包成docker容器镜像的两种方法实现

《python项目打包成docker容器镜像的两种方法实现》本文介绍两种将Python项目打包为Docker镜像的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目录简单版：（一次成功，后续下载对应的软件依赖）第一步：肯定是构建dockerfile，如下：第二步
阅读更多...
Python + Streamlit项目部署方案超详细教程(非Docker版)

Python + Streamlit项目部署方案超详细教程(非Docker版)

《Python+Streamlit项目部署方案超详细教程(非Docker版)》Streamlit是一款强大的Python框架,专为机器学习及数据可视化打造,：本文主要介绍Python+St... 目录一、针对 Alibaba Cloud linux/Centos 系统的完整部署方案1. 服务器基础配置（阿里
阅读更多...
Java 队列Queue从原理到实战指南

Java 队列Queue从原理到实战指南

《Java队列Queue从原理到实战指南》本文介绍了Java中队列（Queue）的底层实现、常见方法及其区别,通过LinkedList和ArrayDeque的实现,以及循环队列的概念,展示了如何高效... 目录一、队列的认识队列的底层与集合框架常见的队列方法插入元素方法对比（add和offer）移除元素方法
阅读更多...
Spring Boot基于 JWT 优化 Spring Security 无状态登录实战指南

Spring Boot基于 JWT 优化 Spring Security 无状态登录实战指南

《SpringBoot基于JWT优化SpringSecurity无状态登录实战指南》本文介绍如何使用JWT优化SpringSecurity实现无状态登录,提高接口安全性,并通过实际操作步骤... 目录Spring Boot 实战：基于 JWT 优化 Spring Security 无状态登录一、先搞懂：为什
阅读更多...
C++11中的包装器实战案例

C++11中的包装器实战案例

《C++11中的包装器实战案例》本文给大家介绍C++11中的包装器实战案例,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录引言1.std::function1.1.什么是std::function1.2.核心用法1.2.1.包装普通函数1.2.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2