electron自动更新

代码经过实践并封装,拿过来就可以用

第一步:配置

publish: {
    provider: 'generic',
    url: 'http://192.168.1.100:9000/final'
},

具体配置在哪,自己去找
url 是你打包后的文件放的位置

第二步:代码

update.js

import { autoUpdater } from 'electron-updater'
import { ipcMain } from 'electron'

const feedUrl = 'http://192.168.1.100:9000/final'
const log = require('@/commonJs/log')

let mainWindow = null;
let isUpdateAsar = false;
export function updateApp(window) {
  logger('in')
  mainWindow = window;
  autoUpdater.autoDownload = false//检查到更新时是否自动下载
  autoUpdater.setFeedURL(feedUrl);
  autoUpdater.on('error', function (error) {
    logger('error:' + JSON.stringify(error))
    sendUpdateMessage({
      cmd: 'error',
      msg: error
    })
  });
  //监听开始检测更新事件
  autoUpdater.on('checking-for-update', function (message) {
    logger('checking-for-update:' + JSON.stringify(message))
    sendUpdateMessage({
      cmd: 'checking-for-update',
      msg: message
    })
  });
  //监听发现可用更新事件
  autoUpdater.on('update-available', function (message) {
    logger('update-available:' + JSON.stringify(message))
    sendUpdateMessage({
      cmd: 'update-available',
      msg: message
    })
  });
  //监听没有可用更新事件
  autoUpdater.on('update-not-available', function (message) {
    logger('update-not-available:' + JSON.stringify(message))
    sendUpdateMessage({
      cmd: 'update-not-available',
      msg: message
    })
  });
  // 更新下载进度事件
  autoUpdater.on('download-progress', function (message) {
    logger('download-progress:' + JSON.stringify(message))
    sendUpdateMessage({
      cmd: 'download-progress',
      msg: message
    })
  });
  //监听下载完成事件
  autoUpdater.on('update-downloaded', function (message) {
    logger('update-downloaded:' + JSON.stringify(message))
    sendUpdateMessage({
      cmd: 'update-downloaded',
      msg: message
    })
  });
}

function sendUpdateMessage(data) {
  mainWindow.webContents.send('message', data)
}
function logger(line) {
  log.info('[ auto-updater ]', line)
}

log是用来生产本地日志的,你可以不写
feedUrl是和第一步的url用的同一个,项目build后会生成一个 exe/dmg文件和latest.yml/latest-mac.yml文件,都要放到这个feedUrl下面

第三步:调用

我们在使用electron一般都要先创建一个窗口,创建完后传入到刚才第二部写的方法里面就完了,非常简单

import { updateApp } from '@/update'
function createWindow(){
  let win = new BrowserWindow({
    ...
  })
  updateApp(win)
}

第四步:交互

通常情况下用户需要更新到哪一步,那么我们前端的的js怎么获取到当前更新进度呢,第二步中有个方法sendUpdateMessage,electron就是通过调用这个方法来告诉前端当前的进度
那么前端如何接受这个消息呢,上代码

this.ipcRenderer = window.electron.ipcRenderer
this.ipcRenderer.on('message', (event, text) => {
  console.log(text)   
  ...do some things
})

是的,任何页面内只要这样些就能拿到当前更新进度,并根据自己的情况操作
那要如何让系统开始检查呢,上代码

this.ipcRenderer = window.electron.ipcRenderer
this.ipcRenderer.send('check-for-update')

———————————end——————————————
全部代码就这些,剩下的就是打包和上传文件就完了
我发现有人说要打包后要上传四个文件才行,但我反复测试过,只要两个文件,一个就是 exe,另一个就是yml ,其他没了,当然需要传多少文件可能跟打包配置有关,我就不一一研究了,给你们看看我的配置

        win: {
          // must be at least 256x256
          icon: './extraResources/win/icon.ico',
          target: 'nsis',
          extraResources: [
            './extraResources/win/**'//windows需要的文件,mac同配
          ]
        },
        nsis: {
          //参考配置:https://www.jianshu.com/p/1701baa240fd
          oneClick: false,
          // 允许修改安装目录
          allowToChangeInstallationDirectory: true,
          allowElevation: true,
          createDesktopShortcut: true,
          createStartMenuShortcut: true,
          shortcutName: 'XXXXX系统',
          artifactName: '${productName}-${version}.${ext}',
        }

优化

以上代码可以实现全量更新,但我们很多时候其实只想更新代码逻辑,其他各种依赖,打包的各种文件其实不用更新,如果每次都全量更新也可以,但并不是最优解,所以我下一篇我会说怎么实现只更新代码逻辑部分

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容