使用electron-upadta 自动跟新之后需要用户在重新安装一遍程序，用户体验不好，开发electron-hot-updata 插件，直接热更新，更新之后不需要用户重新安装程序

先看实际效果

引用文本 阿松大

electron的项目用 electron 自动更新，更新之后需要手动安装程序，有需求就有产出;

electron-hot-updata插件，使用本插件热更新，动态替换electron 执行文件达到热更新;

github 代码地址

使用方法

安装插件

npm i electron-hot-updata

Installing

A step by step series of examples that tell you how to get a development env running.

1. 因为electron 默认是安装在C:\Program Files\ 目录下 操作文件需要管理员权限;

// 在electron-build 的package.json 里面配置权限;

// 我的项目是基于vue 我就直接在vue.config.js 里面配置

    //因为electron 默认是安装在C:\Program Files\ 目录下 操作文件需要管理员权限;module.exports = {...,"win": { "requestedExecutionLevel": "highestAvailable" // highestAvailable 最高权限},}

2. 配置项目服务器地址

    // vue.config.js1.配置项目服务器地址 module.exports = {...,publish: [{"provider": "generic",url: "http://192.168.0.191/electron/" // 更新文件服务器地址 放你后台的地址}],}配置之后执行electron-build 打包之后会自动生成 latest.yml 文件2.sasr 配置   //看你自己需求  可有可无module.exports = {...,sasr: false  //  执行文件是否打包成sasr文件}sasr:false   // 打包出来的就是 html + css + js   sasr:true   // 打包之后就是sasr 文件##http://192.168.0.191/electron/ 下面存放两个文件latest.yml      系统打包之后自动生成app.zip     //app.zip 分两种情况1.sasr:false 项目/dist_electron/win-unpacked/resources/  下找到app文件夹 打包成 app.zip 文件2.sasr:true 项目/dist_electron/win-unpacked/resources/  下找到 app.sasr文件 打包成app.zip 文件  

3. 版本号 如果你有更好的修改项目版本号办法 直接无视这一块

    electron 版本区分默认依靠 项目>package.json>version;所有每次打包之后 都要修改版本号 ；靠版本号来区分是否需要更新在vue.cinfog.js 里面添加以下代码  <!-- 一下代码每次运行项目都会修改版本号 -->const path = require('path')const fs = require('fs');const resolve=(dir)=> {return path.join(__dirname, dir)}const AddZero = (time)=> {if (time < 10) {return "0" + time} else {return time}}let packageTxt = fs.readFileSync('./package.json', 'utf8');let versionData = packageTxt.split('\n');let packageJson = JSON.parse(packageTxt);let VersionArr = packageJson.version.split('.');let date = new Date();let today = date.getFullYear() + "" + AddZero((date.getMonth() + 1)) + "" + AddZero(date.getDate())if (today == VersionArr[1]) {VersionArr[2] = parseInt(VersionArr[2]) + 1} else {VersionArr[1] = date.getFullYear() + "" + AddZero((date.getMonth() + 1)) + "" + AddZero(date.getDate())VersionArr[2] = 1;}let versionLine = VersionArr.join('.');for (let i = 0; i < versionData.length; i++) {if (versionData[i].indexOf('"version":') != -1) {versionData.splice(i, 1, '  "version": "' + versionLine + '",');break;}}fs.writeFileSync('./package.json', versionData.join('\n'), 'utf8');

根目录新建 hot-updata.js

 //  hot-updata.js 里面代码
import {electronHotupdata} from "electron-hot-updata"
const electronHotupdatas= new electronHotupdata(this)
const path = require('path');
import {ipcMain,app
} from 'electron'
let mainWindow=null
export function updateAva(windows,provider,Version){mainWindow=windows// 设置地址electronHotupdatas.setProvider(provider)// 设置版本号electronHotupdatas.setNewVersion(Version)//  ***  一般情况下不介意修改地址// electron 默认安装在 C:\Program Files\ 目录下   如果热更新地址不对  electronHotupdatas.setBaseUrl 动态修改地址    // electronHotupdatas.setBaseUrl(baseUrl)// 监听获取版本失败electronHotupdatas.on("get-version-failed",(message)=>{sendHotUpdateMessage({cmd: 'get-version-failed',message: message})})// 监听没有新版本electronHotupdatas.on("no-new-version",(message)=>{sendHotUpdateMessage({cmd: 'no-new-version',message: message})})// 监听有新版本  可更新electronHotupdatas.on("new-version-available",(message)=>{sendHotUpdateMessage({cmd: 'new-version-available',message: message})})// 监听获取版本失败 更新失败electronHotupdatas.on("downloaded-failed",(message)=>{sendHotUpdateMessage({cmd: 'downloaded-failed',message: message})})// 监听更新完成electronHotupdatas.on("complete-downloaded",(message)=>{sendHotUpdateMessage({cmd: 'complete-downloaded',message: message})})// 跟新完成立即重启程序ipcMain.on("relaunch",()=>{app.relaunch()app.exit()})// 触发更新事件ipcMain.on("start-updata",(message)=>{electronHotupdatas.startUpdata()})// 获取跟新进度electronHotupdatas.on("downloaded-progressNumber",(message)=>{sendHotUpdateMessage({cmd: 'downloaded-progressNumber',message: message})})// 触发获取新版本事件ipcMain.on("startLoop",(message)=>{electronHotupdatas.startLoop()})}//给渲染进程发送消息
function sendHotUpdateMessage(text) {mainWindow.webContents.send('hotMessage', text)
}

在background.js 调用 hot-updata.js

import { app, protocol, BrowserWindow,Menu } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'// 自动更新
import {updateAva} from './hot-updata.js' ;const isDevelopment = process.env.NODE_ENV !== 'production'// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }
])async function createWindow() {// Create the browser window.const win = new BrowserWindow({width: 900,height: 800,frame:true,webPreferences: {// Use pluginOptions.nodeIntegration, leave this alone// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info// nodeIntegration: (process.env//     .ELECTRON_NODE_INTEGRATION as unknown) as boolean,// contextIsolation: !(process.env//     .ELECTRON_NODE_INTEGRATION as unknown) as boolean,nodeIntegration:true,contextIsolation:false,webSecurity: false,// preload:'./src/preload.js' ,preload:__dirname+'\\preload.js' ,    //  必须要引入 preload.js  不然获取不到electron }})Menu.setApplicationMenu(null)if (process.env.WEBPACK_DEV_SERVER_URL) {// Load the url of the dev server if in development modeawait win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string)if (!process.env.IS_TEST) win.webContents.openDevTools()} else {createProtocol('app')// Load the index.html when not in developmentwin.loadURL('app://./index.html')win.webContents.openDevTools()// win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string)}//  http://192.168.0.191/electron/ 是我本地的测试地址   换成你服务器的地址updateAva(win, 'http://192.168.0.191/electron/',app.getVersion());
}// Quit when all windows are closed.
app.on('window-all-closed', () => {// On macOS it is common for applications and their menu bar// to stay active until the user quits explicitly with Cmd + Qif (process.platform !== 'darwin') {app.quit()}
})app.on('activate', () => {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow()
})// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {// if (isDevelopment && !process.env.IS_TEST) {//   // Install Vue Devtools//   try {//     await installExtension(VUEJS_DEVTOOLS)//   } catch (e:any) {//     console.error('Vue Devtools failed to install:', e.toString())//   }// }createWindow()
})// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {if (process.platform === 'win32') {process.on('message', (data) => {if (data === 'graceful-exit') {app.quit()}})} else {process.on('SIGTERM', () => {app.quit()})}
}

在app.vue 里面调用electron 获取最新版本

// ts
const ipcRenderer = (window as any).ipcRenderer
// jsconst ipcRenderer =window.ipcRenderer//  window.ipcRenderer === undefined  说明没有引入 preload.js
created() {  let _this = this;if (ipcRenderer) {window.setInterval(() => {console.log("循环开始检查更新....")ipcRenderer.send("startLoop");}, 10000);ipcRenderer.on("hotMessage", (event: any, arg: any) => {console.log(arg);if (arg.cmd == 'new-version-available') {_this.modalVisible = true} else if (arg.cmd == 'downloaded-failed') {console.log('更新失败')} else if (arg.cmd == 'downloaded-progressNumber') {console.log('获取跟新进度' + arg.message)_this.progress = arg.message} else if (arg.cmd == 'complete-downloaded') {console.log('更新完成')// 更新完成 立即 重启程序ipcRenderer.send("relaunch");}});}}

preload.js

const electron = require('electron');
window.ipcRenderer = require('electron').ipcRenderer;
window.remote = require('electron').remote;

electron 自动更新 热跟新相关推荐

1. 如何彻底禁止win10家庭版系统自动更新-2021跟新

   如何彻底禁止win10家庭版系统自动更新-2021跟新 文章主要参考:http://www.xitongcheng.com/jiaocheng/win10_article_61393.html --- ...

2. electron自动更新版本electron-updater

   首先来看效果图: 打包electron生成新的exe安装包:npm run dist 使用simplehttpserver开启存放打包好的exe安装包与yml文件的本地服务(打包目录里有这两个文件) ...

3. vue 实现app项目版本迭代自动更新 热更新

   需求: app打开时自动检测是否是最新版本,如果不是出现弹框,点击升级 效果图: 实现步骤: 一,准备工作 声明一个bol值VersionFlag控制版本升级弹窗的开关,默认关闭 Website: 更 ...

4. 联想怎么关闭更新并关闭计算机能取消吗,联想win10取消自动更新,联想小新怎么关掉自动更新...

   首先,在桌面打开此电脑(我们平时的"我的电脑") 这时我们会发复现C盘50GB的内存只剩下20多G了,这是因为更新WIN10的原因 确定上述情况后,右键单击C盘--属性 在常规中这 ...

5. 【原创】自动更新程序2--更新程序的主窗体（技术：spring.net+三层架构+webservice+IrisSkin2换肤）...

   上篇文章主要介绍了webservice的部署以及主要的代码,下面给大家贴上主程序的代码,并简单的讲解.主程序判断是否有更新时通过主程序目录下有一个update.ini文件内的version是否有变化, ...

6. electron自动更新

   1.主进程background.js引入autoUpdater let {autoUpdater} = require('electron-updater') 2.主进程写入更新代码 if (!pro ...

7. 电脑设置代理IP工具 可自动更新

   简介: 这是一款用易语言写的简约的代码IP工具,不是调用的外部IP,IP都是内置的,并且可以10分钟自动更新一次新的IP,具体有需要的朋友可以拿去试试,没有测试过,不保证百分百可以用. 网盘下载地址: ...

8. electron打包可选择安装位置，可自动更新

   Electron打包调参软件(windows版) ----------------------------------可选安装位置,可自动更新,手动更新 一:引包:electron,electron- ...

9. 【Electron】酷家乐客户端开发实践分享 — 软件自动更新

   作者:钟离,酷家乐PC客户端负责人 原文地址:webfe.kujiale.com/electron-au- 酷家乐客户端:下载地址 www.kujiale.com/activity/13- 文章背景: ...

最新文章

1. 【前沿技术】严重事故！实习生删除字节跳动所有轻量级机器学习模型
2. 技术剖析 | Axonius为什么能获得 2019 RSAC创新大奖
3. 【Leetcode】大神总结的所有TopK问题模板（基于快速排序）
4. python的进程模块
5. 如何查看某个js 变量 runtime 类型
6. Vue UI 框架对比 element VS iview
7. Redis 通过 RDB 方式进行数据备份与还原
8. 使用Guava对并发应用程序进行基于对象的微锁定
9. html网页和cgi程序编程,CGI 编程方式学习
10. java你可能不知道的事(2)--堆和栈
11. 零基础搭建Hadoop大数据处理环境
12. unity3d点击屏幕判断是否击中场景中物体
13. Servlet+MyBatis项目转Spring Cloud微服务，多数据源配置修改建议
14. 阿里云服务器ftp连接后21端口无法使用的问题
15. linux下载finger程序,Linux的finger命令
16. The producer group has been created before
17. 共享红色理念创业计划书PPT模板
18. 边缘设备、系统及计算杂谈(14)——API Gateway(Traefik)学习
19. 勃仔诞生记：Hubbleverse哈勃元宇宙的起源故事
20. 【Jetpack】学穿：LiveData →

热门文章

1. 产品生命周期管理——高效的全生命周期的产品管理方法
2. 怎样把几个PDF文档合并一个文件？
3. C#中改变工具条ToolStrip的位置/宽度/高度?
4. “应用程序配置不正确，程序无法启动”的解决方法资料收集
5. Rosalind Java| Finding a Shared Motif
6. 关于DMA，TCM和Cache
7. 碰到spoolsv.exe-应用程序错误怎么办？
8. 解决webview 刷新问题，返回刷新webview，webview 刷新不好使
9. 维度探索：三维空间、四维空间和更高维度
10. ES插件在谷歌浏览器的安装