electron 自动更新以及手动更新

从搭建开始 使用的是electron-vue 毕竟方便一点 如果只想安装electron 请参见我的另一个文章 https://segmentfault.com/a/11...

首先安装Electron:

vue init simulatedgreg/electron-vue project1

cd project1
npm 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中的autoUpdater
import {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 mainWindow
const winURL = process.env.NODE_ENV === 'development'
    ? `http://localhost:9080`
    : `file://${__dirname}/index.html`

function 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>

总结

由于我的虚拟机是在本地 所以下载速度超快
后来我将更新地址切换到远程服务器 下面是操作截图