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"
      }
    ],

图片描述

扫描二维码关注公众号，回复： 12008791 查看本文章

配置更新服务器

我们的更新服务器是本地虚拟主机以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>

图片描述

总结

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