electron实现远程更新

背景

之前一直都是vue项目,打包成dist,然后放到electron的项目里,通过electron-packager打包,然后通过setup,打包成.exe文件,再把生成的exe发送给测试人员,在公司内部可以发送给测试人员,如果项目部署到酒店,那么每次更新再去给每个酒店发exe包,那就很麻烦,所以需要远程更新功能。下面就来说说如何实现electron实现远程更新

electron版本:8.0.0

1. electron官网下载electron-quick-start项目

electron官网

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install && npm start

下载electron 可能不太好下 (ps:自己想办法)

2. 将vue项目的dist文件,放入electron-quick-start项目

打开main.js,这个是主进程文件,可以理解为vue项目的main.js, 打包的dist文件,可以理解为是渲染进程文件。

修改main.js的 mainWindow.loadFile(’./dist/index.html’) ,把这个路径改成dist文件的html路径
在这里插入图片描述

3.打包electron项目

  1. 下载依赖
npm i electron-builder
  1. 配置package.json,script
"scripts": {
    "dist": "electron-builder --win --x64"
},
  1. 配置package.json,build
"build": {
    "productName": "xxxx", //包名
    "appId": "",
    "asar":true,
    "directories": {
      "output": "build"//到处文件名
    },
    "publish": [ //远程更新需要配置这个 为了生成.yml文件
      {
        "provider": "generic",
        "url": "https://websrc.oss-cn-zhangjiakou.aliyuncs.com/download/",//这个是地址 后面会说到 本地测试 和 线上测试需要怎么填写
      }
    ],

    "win": {
      "target": [{
        "target":"nsis"
      }],
      "icon": "build/favicon256.ico",//图标 找ui要 路径要对上
      "asarUnpack":[
        "src/**",
        "README.md"
      ]
    },
    "nsis": { //这个相当于打包exe配置,比如配置可以用户安装位置...
      "oneClick": false,
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "runAfterFinish": true,
      "installerIcon": "build/favicon256.ico",
      "uninstallerIcon": "build/favicon256.ico"
    }
  },
  1. 上面的操作完了,执行npm run dist看看能不能成功,多半会报错。

因为有两个文件很难下 electron-v8.0.0-win32-x64.zip 和 nsis-3.0.4.1.7z 如果你们报错缺少这些,或者下载失败的话,可以考虑先去吧这两个文件下载好了丢到缓存里。

electron-v8.0.0-win32-x64.zip 放到 C:\Users\你的用户名\AppData\Local\electron\Cache
nsis-3.0.4.1.7z 放到 C:\Users\你的用户名\AppData\Local\electron-builder\cache\nsis
下次需要这两个文件的时候,就不回去github拉取,因为拉取不到二报错了,会从你的缓存里去取,另外项目名不要起中文,否则会报错

4.实现远程更新

打包成功之后,我们来实现远程更新

  1. 下载依赖
npm install electron-updater --save

这里需要将electron-updater下载运行时依赖dependencies中,因为在程序运行会用到这个包。而不是开发依赖

  1. 修改main.js主进程代码
//控制应用程序生命周期和创建本地浏览器窗口的模块
const {app, BrowserWindow, ipcMain} = require('electron')
const { autoUpdater } = require('electron-updater')
const path = require('path')

let mainWindow
function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1900,
    height: 1100,
    minWidth: 1900,
    minHeight: 1100,
    useContentSize: true,
    transparent: false,
    fullscreenable:true,
    // frame: true, // PS:隐藏窗口菜单
    // resizable: false,
    movable: true,
    maximizable: true, //支持最大化
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,//electron为前端工程提供Node的环境,让程序能够正常运行。
      enableRemoteModule: true   // 打开remote模块
    }
  })
  // mainWindow.loadFile('./index.html')
  mainWindow.loadFile('./dist/index.html')
  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
  updateHandle()
}

// 检测更新,在你想要检查更新的时候执行,renderer事件触发后的操作自行编写
function updateHandle() {
  let message = {
    error: '检查更新出错',
    checking: '正在检查更新⋯⋯',
    updateAva: '检测到新版本',
    updateNotAva: '现在使用的就是最新版本,不用更新',
  };
  // let uploadUrl = 'http://192.168.20.193:3000/download/';
  let uploadUrl = 'https://websrc.oss-cn-zhangjiakou.aliyuncs.com/download/';

  autoUpdater.setFeedURL(uploadUrl);
  //在下载之前将autoUpdater的autoDownload属性设置成false,通过渲染进程触发主进程事件来实现这一设置
  // autoUpdater.autoDownload = false;
  autoUpdater.on('error', function (error) {
    sendUpdateMessage(error)
  });
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage(message.checking)
  });
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage(message.updateAva)
  });
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva)
  });

  // 更新下载进度事件
  autoUpdater.on('download-progress', function (progressObj) {
    mainWindow.webContents.send('downloadProgress', progressObj)
  })

  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
    
    sendUpdateMessage('isUpdateNow');
    ipcMain.on('updateNow', (e, arg) => {
      autoUpdater.quitAndInstall();
    });
    
  });

  ipcMain.on("checkForUpdate",() => {
      //执行自动更新检查
      autoUpdater.checkForUpdates();
  })
}

// 通过main进程发送事件给renderer进程,提示更新信息
function sendUpdateMessage(text) {
  mainWindow.webContents.send('message', text)
}

在这里插入图片描述

  1. 说一说 electron-updater

其实这个插件就是通过我们在打包配置build的时候配置的publish配置项,从而生成.yml文件,这个文件记录了版本号,url,等一下信息,他每隔十分钟,会拿本地的yml文件,和线上 或者本地的.yml对比,对比版本号 判断需不需要升级,所以在打包的时候,package.json的版本号一定要写对。

  1. 说一说package.json里的publish->url 和 main.js里的uploadUrl地址都是怎么回事

比如我们现在执行npm run dist成功了,在build文件夹会生成一个0.0.1版本的exe文件,我们在本地安装这个版本,然后我们把版本号改成0.0.2然后又生成一个exe文件,这个时候这个exe文件,就需要在一个地方放着,electron-updater会通过你写的地址,去对比差异,判断有没有新版本。 如果你在本地测试的话,可以node启一个服务,然后地址就写本地地址就可以了

本地测试 (express 静态资源托管)

//1.引入express框架 (url/querystring/path/fs/http等)
const express = require("express")
//中间件,为了获取posy请求参数
const bodyParser = require("body-parser")
//导入path模块,显示html页面
const path = require("path")
 
//2.创建web服务器
const app = express()
 
//3.监听端口
app.listen(3000,"localhost",()=>{
    console.log("端口3000正在监听着哦....")
})
 
//4.资源托管 (http://localhost:3000的时候,内部会自动的找到静态资源www目录下的index.html)
app.use('/download', express.static('./client'))

目录结构
在这里插入图片描述

我们在本地启动一个node服务,通过http://localhost:3000/download/latest.yml http://localhost:3000/download/xxxx.exe http://localhost:3000/download/xxx.blockmap 这个时候package.json里的publish->url 和 main.js里的uploadUrl地址 只需要写http://localhost:3000/download/即可。但是要记住,本地项目需要打包成exe才能测试。如果只是在开发环境 执行的electron .那样是测试不了的,会报错。Error: ENOENT: no such file or directory, open ‘C:\Users\mi\Desktop\abc\fistapp\dev-app-update.yml’

线上
在这里插入图片描述

线上的话,找后端给你提供接口上传这些文件,或者你可以操作oss,直接找一个目录,存放npm run buidl生成的这三个文件即可,然后你获取一下地址,填到url uoloadurl上即可,只需要到该文件夹,不需要到具体某个文件

  1. 说一说electron-updater 生命周期

在这里插入图片描述

这个流程一定要看明白,不然到时候和渲染进程通信的时候,就会有需要问题

  1. 主进程 和 渲染进程对比
    在这里插入图片描述

  2. 渲染进程代码

//3.检测更新
//3.1触发自动更新
ipcRenderer.send("checkForUpdate");
//3.2监听自动更新事件
ipcRenderer.on("message", (event, text) => {
  console.log('接受主进程的text',text);
  this.tips = text;
  if (text == '检测到新版本') {// update-available
    console.log('检测到新版本'); 
    //注意:“downloadProgress”事件可能存在无法触发的问题,只需要限制一下下载网速就好了
    ipcRenderer.on("downloadProgress", (event, progressObj)=> { // downloadProgress
      console.log(progressObj);
      this.downloadPercent = Math.floor(Number(progressObj.percent)) || 0;
      if (Math.floor(Number(progressObj.percent)) == 100) {
        this.is_upgrade_success = true
      }
    })
  } else if (text == '现在使用的就是最新版本,不用更新') {// update-not-available
    console.log('现在使用的就是最新版本,不用更新');
  } else if (text == '检查更新出错') {// error
    console.log('检查更新出错');
  } else if (text == 'isUpdateNow') { // 是否现在更新
    console.log('是否现在更新');
    this.DialogOuterVisible = true
  }    
});
  1. 具体怎么操作实现远程更新
    其实就收先可以打包electron-quick-start项目,然后把渲染进程和主进程的代码写好,然后打包一个高版本的放在线上服务器 或者 本地服务器,讲对应地址配到项目里,然后本地装一个低版本的,进入低版本,会自动对比本地版本,然后提示更新。点击更新即可

结尾

想表达的很多,但是写的不好,有遇到问题的可以评论区评论。

  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
Electron 是一个跨平台的桌面应用程序开发框架,可以使用 HTML、CSS 和 JavaScript 来开发桌面应用程序。要实现远程更新,可以按照以下步骤进行操作: 1. 建立一个用于存放更新的服务器。可以使用云服务提供商提供的服务器来托管应用程序的更新文件。服务器端应该有一个存放最新应用程序版本的地方,并能提供对更新文件的访问。 2. 在应用程序中添加自动更新的功能。通过 Electron 提供的自动更新模块,可以方便地检查并下载最新的应用程序版本。可以在应用程序启动时调用自动更新模块的函数,它会自动检查服务器中的最新版本,并开始下载更新文件。 3. 将更新文件上传到服务器。更新文件可以是应用程序的压缩包或差分包,包含了最新的应用程序文件。可以使用 FTP 或其他文件传输协议将更新文件上传到服务器上。 4. 更新应用程序。在下载完更新文件后,应用程序可以在后台自动解压并将最新的文件替换掉旧的文件。通过 Electron 提供的自动更新模块,可以方便地实现这一过程。 总结起来,要实现 Electron 应用程序的远程更新,需要建立一个存放更新文件的服务器,并在应用程序中添加自动更新功能。通过下载最新的应用程序文件并在后台替换旧的文件,能够实现应用程序的更新。这样,当用户启动应用程序时,就能自动检查服务器上是否有新的版本,并下载并安装更新

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值