第三代半导体 端口映射 listview audio syntax orm ios7 mockito photoshop视频教程全集下载 base64转16进制 js获取月份 mysql转字符串 javaweb是前端还是后端 mysqlinsert java编程学习 java运算符 java连接mysql数据库 java判断文件是否存在 java连接数据库代码 黑帮之地修改器 电视免费软件 eml文件阅读器下载 java电子书 linux多线程编程 c语言指数函数 php小数点保留2位 批量插入数据 sqlprompt painter下载 jpg格式转换器 dnf传说 opencv是什么 lol游戏环境异常 安卓人脸识别 ansys安装 无人机数据处理软件 情头污系 ps白色背景变透明 qupzilla su怎么添加材质
当前位置: 首页 > 学习教程  > 编程语言

electron-vue实现自动更新功能

2020/9/19 15:14:59 文章标签:

electron-vue项目很多时候需要自动更新的功能,避免每次发版都要单独发安装包的尴尬,下面介绍一下如何利用electron-updater来实现自动更新

一、 首先是安装,安装方式很多,不多说,这里需要注意的是electron-updater、electron以及electron-builder版本之间的兼容性

由于git上下来的electron-vue项目electron版本比较低为2x版本,所以对于版本比较高的electron-updater是不支持的,这里推荐使用3x到4x之间的electron-updater版本,当然也可以提升electron的版本来适配electron-updater,通过测试目前7x一下的electron版本是对electron-updater兼容比较好的,

这里选用的版本分别是:electron-updater----3.0.0、electron----7.3.3、electron-builder---20.19.2

好,版本选定后可以安装一下了,首先在package.json中"devDependencies"下添加"electron-updater": "^3.0.0",然后把electron的版本改为7.3.3既:"electron": "^7.3.3","electron-builder": "^20.19.2",

实例如下:

"devDependencies": {
    "electron-updater": "^3.0.0",
    "electron": "^7.3.3",
    "electron-builder": "^20.19.2",
  }

之后要在package.json中的build添加publish字段,用来设置自动更新地址和生成yml文件,如下:

"publish": [
    {
      "provider": "generic",
      "url": "http://www.8888888.com/ceshi/" //这里指向存放的目录而非文件
    }
 ],

修改并保存后,进入文件夹,把node_modules依赖包手动删除或者命令行删除都可以,删除后重新npm i一下依赖包

二、OK炒菜需要的菜品已经齐全,下一步就开始炒菜

       1.在src\renderer下创建一个文件夹untils并在改文件夹下创建一个Update.js的文件,文件内容如下

import {
    autoUpdater
} from 'electron-updater'
 
import {
    ipcMain
} from 'electron'
let mainWindow = null;
export function updateHandle(window, feedUrl) {
    mainWindow = window;
    let message = {
        error: '检查更新出错',
        checking: '正在检查更新……',
        updateAva: '检测到新版本,正在下载……',
        updateNotAva: '现在使用的就是最新版本,不用更新',
    };
    //设置更新包的地址
    autoUpdater.setFeedURL(feedUrl);
    //监听升级失败事件
    autoUpdater.on('error', function (error) {
        sendUpdateMessage({
            cmd: 'error',
            message: error
        })
    });
    //监听开始检测更新事件
    autoUpdater.on('checking-for-update', function (message) {
        sendUpdateMessage({
            cmd: 'checking-for-update',
            message: message
        })
    });
    //监听发现可用更新事件
    autoUpdater.on('update-available', function (message) {
        sendUpdateMessage({
            cmd: 'update-available',
            message: message
        })
    });
    //监听没有可用更新事件
    autoUpdater.on('update-not-available', function (message) {
        sendUpdateMessage({
            cmd: 'update-not-available',
            message: message
        })
    });
 
    // 更新下载进度事件
    autoUpdater.on('download-progress', function (progressObj) {
        sendUpdateMessage({
            cmd: 'download-progress',
            message: progressObj
        })
    });
    //监听下载完成事件
    autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl) {
        sendUpdateMessage({
            cmd: 'update-downloaded',
            message: {
                releaseNotes,
                releaseName,
                releaseDate,
                updateUrl
            }
        })
        //退出并安装更新包
        autoUpdater.quitAndInstall();
    });
 
    //接收渲染进程消息,开始检查更新
    ipcMain.on("checkForUpdate", (e, arg) => {
        //执行自动更新检查
        autoUpdater.checkForUpdates();
    })
}
//给渲染进程发送消息
function sendUpdateMessage(text) {
    mainWindow.webContents.send('message', text)
}

这个文件是处理自动更新逻辑的,包括更新各个过程,建好后进入到主进程index.js中引入这个文件,并触发里面的函数,如下

import { app, BrowserWindow, Menu } from 'electron'
import {updateHandle} from '../renderer/utils/Update.js';

let mainWindow
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`

function createWindow() {
  mainWindow = new BrowserWindow({
    useContentSize: true,
    minWidth: 930,
    minHeight: 565,
    webPreferences: {
      nodeIntegration: true
    }
  })
  mainWindow.loadURL(winURL) 
  let feedUrl = "http://www.88888888.com/ceshi/";
  //检测版本更新
  updateHandle(mainWindow,feedUrl);
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

上面只是简单例子,其他内容自行添加

之后就可以在rander进程中监听并触发自动更新了,在什么时候触发自行考量,这里举例为在app.vue中,如下

<template>
  <div id="app">
    <router-view></router-view>
    <el-dialog
      title="正在更新版本,请稍后 ···"
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :show-close="showClose"
      center
    >
      <div style="width:100%;height:5vh;line-height:5vh;text-align:center">
        <el-progress
          status="success"
          :text-inside="true"
          :stroke-width="20"
          :percentage="percentage"
          :width="strokeWidth"
          :show-text="true"
        ></el-progress>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const { ipcRenderer } = require('electron')
let self = this;
//接收主进程版本更新消息
ipcRenderer.on("message", (event, arg) => {
  // console.log(arg);
  if ("update-available" == arg.cmd) {
    //显示升级对话框
    self.dialogVisible = true;
  } else if ("download-progress" == arg.cmd) {
    // console.log(arg.message.percent);
    let percent = Math.round(parseFloat(arg.message.percent));
    self.percentage = percent;
  } else if ("error" == arg.cmd) {
    self.dialogVisible = false;
    self.$message(arg);
  } else if ("update-not-available" == arg.cmd) {
    // self.$message(arg);
  }
});
//开始检测新版本
let timeOut = window.setTimeout(() => {
  ipcRenderer.send("checkForUpdate");
  // console.log('开始检测更新触发')
}, 500);
clearTimeout;
export default {
  name: "globalquickseek",
  data() {
    return {
      dialogVisible: false,
      closeOnClickModal: false,
      closeOnPressEscape: false,
      showClose: false,
      percentage: 0,
      strokeWidth:200
    };
  },
  mounted() {
    self = this;
  },
  destroyed() {
    window.clearInterval(interval);
    window.clearInterval(timeOut);
  }
};
</script>

<style>
/* CSS */
#app {
  height: 100%;
  overflow: hidden;
}
#app>div{
  overflow: hidden;
}
.tableList {
  widows: 150px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.el-tooltip__popper{
  font-size: 14px;
  max-width: 300px !important;
  text-align: justify;
  text-justify: newspaper;
  word-break: break-all;
  line-height: 20px;
}
</style>

ok,至此配置就已经结束了,下面就可以尝试自动升级了,先打包一个低版本的,既:package.json中version字段写为:0.0.1,打包完毕之后安装应用,安装完成之后再打包个高版本的,既:package.json中version字段写为:0.0.2,然后把打包后的高版本的.exe文件和yml文件上传至你上面配置的那个网址,传完之后打开刚才安装的.exe应用,感受自动升级的方便吧

备注:这里需要注意的是苹果版本需要上传的文件要多一些,把zip格式的也要传至服务器


本文链接: http://www.dtmao.cc/news_show_200239.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?