electron 自动更新以及手动更新

从搭建开始 使用的是electron-vue 毕竟方便一点 如果只想安装electron 请参见我的另一个文章 https://segmentfault.com/a/11…首先安装Electron:vue init simulatedgreg/electron-vue project1cd project1npm install //第一次安装的伙伴需要翻墙 如何翻墙请参加另一个文章(好像被和谐了 那就+我们的交流群吧!)安装的时候安装了 vue electron vue-router 不安装 vuex 打包选择的是: electron-builder 下次有时间再扯electron-packager安装完毕之后启动运行npm run dev构建页面更新进度页面将他写成组件 update.vue<template> <transition name=“fade”> <div v-if=“show”> <div class=“modal”></div> <div class=“update”> <div class=“header”><h2>应用更新</h2><i class=“close” @click=“close”></i></div> <div class=“body”> <p>更新进度</p> <p class=“percentage”>10%</p> <div class=“progress”> <div class=“length”></div> </div> </div> </div> </div> </transition></template><script> export default { name: “update”, methods: { close() { this.$emit(‘update:show’, false) } }, props: { show: { type: Boolean, required: true, default: false } } }</script><style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 / { opacity: 0; } .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .4; background: #000; } .update { width: 400px; height: 180px; background-color: #FFFFFF; border-radius: 10px; border: 1px solid #CCC; position: absolute; top: 40%; margin-top: -90px; left: 50%; margin-left: -200px; box-shadow: #FFFFFF 0 0 10px; } .update .header i.close { display: inline-block; position: absolute; top: 11px; right: 12px; width: 20px; height: 20px; background-image: url("../assets/img/close.png"); background-size: 100%; cursor: pointer; } .update .header { border-bottom: 1px solid #ccc; height: 40px; line-height: 40px; } .update .header h2 { text-align: center; font-size: 20px; } .update .body { padding-top: 20px; text-align: center; } .update .body .percentage { margin-top: 20px; } .update .body .progress { width: 350px; height: 30px; border: 1px solid #CCCCCC; border-radius: 8px; margin: 10px auto; } .update .body .progress .length { background-color: #E4393c; border-radius: 8px; width: 10px; height: 30px; }</style>安装模块安装 electron-updater 包模块npm install electron-updater –save修改package.json加入以下代码 “publish”: [ { “provider”: “generic”, “url”: “http://lee.com/app/update” } ],配置更新服务器我们的更新服务器是本地虚拟主机 以apache为例配置apache服务器我本地使用的是集成环境 很简单的操作 要是大家使用自定义安装的 往httpd-vhosts.conf里面添加配置就可以了我们的域名是lee.com修改hosts文件修改 hosts文件 往里面添加 文件地址在 C:WindowsSystem32driversetc目录下127.0.0.1 lee.com核心文件主进程中 主要是handleUpdate方法import {app, BrowserWindow, ipcMain} from ’electron’// 注意这个autoUpdater不是electron中的autoUpdaterimport {autoUpdater} from “electron-updater”/* * Set __static path to static files in production * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html /if (process.env.NODE_ENV !== ‘development’) { global.__static = require(‘path’).join(__dirname, ‘/static’).replace(/\/g, ‘\\’)}let mainWindowconst winURL = process.env.NODE_ENV === ‘development’ ? http://localhost:9080 : file://${__dirname}/index.htmlfunction createWindow() { /* * Initial window options / mainWindow = new BrowserWindow({ height: 563, useContentSize: true, width: 1000 }) mainWindow.loadURL(winURL) mainWindow.on(‘closed’, () => { mainWindow = null });//处理更新操作 function handleUpdate() { const returnData = { error: {status: -1, msg: ‘检测更新查询异常’}, checking: {status: 0, msg: ‘正在检查应用程序更新’}, updateAva: {status: 1, msg: ‘检测到新版本，正在下载,请稍后’}, updateNotAva: {status: -1, msg: ‘您现在使用的版本为最新版本,无需更新!’}, }; //和之前package.json配置的一样 autoUpdater.setFeedURL(‘http://xxx.com/app/update'); //更新错误 autoUpdater.on(’error’, function (error) { sendUpdateMessage(returnData.error) }); //检查中 autoUpdater.on(‘checking-for-update’, function () { sendUpdateMessage(returnData.checking) }); //发现新版本 autoUpdater.on(‘update-available’, function (info) { sendUpdateMessage(returnData.updateAva) }); //当前版本为最新版本 autoUpdater.on(‘update-not-available’, function (info) { setTimeout(function () { sendUpdateMessage(returnData.updateNotAva) }, 1000); }); // 更新下载进度事件 autoUpdater.on(‘download-progress’, function (progressObj) { mainWindow.webContents.send(‘downloadProgress’, progressObj) }); autoUpdater.on(‘update-downloaded’, function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) { ipcMain.on(‘isUpdateNow’, (e, arg) => { //some code here to handle event autoUpdater.quitAndInstall(); }); // win.webContents.send(‘isUpdateNow’) }); //执行自动更新检查 autoUpdater.checkForUpdates(); } handleUpdate();// 通过main进程发送事件给renderer进程，提示更新信息 function sendUpdateMessage(text) { mainWindow.webContents.send(‘message’, text) } ipcMain.on(“checkForUpdate”, (event, data) => { console.log(‘执行自动更新检查!!!’); // event.sender.send(‘reply’, ‘hi lee my name is yuan, age is 17’); autoUpdater.checkForUpdates(); });}app.on(‘ready’, createWindow)app.on(‘window-all-closed’, () => { if (process.platform !== ‘darwin’) { app.quit() }});app.on(‘activate’, () => { if (mainWindow === null) { createWindow() }});更新参数讲解在有更新包的情况下会在主进程中触发下面的方法: autoUpdater.on(‘download-progress’, function (progressObj) { // mainWindow.webContents.send(‘downloadProgress’, progressObj) const winId = BrowserWindow.getFocusedWindow().id; let win = BrowserWindow.fromId(winId); win.webContents.send(‘downloadProgress’, progressObj) });progressObj : { “bytesPerSecond”: 47132710, “delta”: 39780007, “percent”: 100, “total”: 39780007, “transferred”: 39780007 } bytesPerSecond: bps/s //传送速率percent : 百分比 //我们需要这个就可以了total : 总大小transferred: 已经下载发布更新将新的安装包和latest.yml 放到对应的目录下 系统会自动去检测版本 如果有新版本会下载的!!检测更新创建触发更新的组件 <div><h2>你好 我是1.2.4</h2> <button @click=“updateApp” style=“width:100px;height: 40px;">更新</button> <Update :show.sync=“show” :percent=“percent”></Update> </div></template><script> import Update from “@/components/update”; export default { name: “index”, components: {Update}, data() { return { percent: 0, show: false } }, mounted() { //更新进度 this.$electron.ipcRenderer.on(‘downloadProgress’, (event, data) => { this.percent = (data.percent).toFixed(2); if (data.percent >= 100) { // this.show = false; } }); /* * 主进程返回的检测状态 */ this.$electron.ipcRenderer.on(‘message’, (event, data) => { switch (data.status) { case -1: this.$Message.error(data.msg); break; case 0: this.$Message.loading(data.msg); break; case 1: this.show = true; break; } }); }, methods: { updateApp() { this.$electron.ipcRenderer.send(‘checkForUpdate’, ‘asdad’) } } }</script>总结由于我的虚拟机是在本地 所以下载速度超快后来我将更新地址切换到远程服务器 下面是操作截图