electron 自动更新以及手动更新

2018-10-14 admin

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

首先安装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>

图片描述

总结

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

原文链接:https://segmentfault.com/a/1190000016674982

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42626.html

文章标题:electron 自动更新以及手动更新

相关文章
Grunt入门教程(自动任务运行器)
在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通 常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而...
2017-03-27
零基础-5小时开发一个electron应用-[实践]
一、背景 三、技能升级 ​ 明明可以用颜值取胜,非要靠才华?不对,明明可以用代码搞定,非要搞设计?步入正题,正好最近对electron比较感兴趣,又是要做工具,那就直接怼 1.electron介绍 ​ electron最开始不叫这个名字,叫...
2017-12-26
JavaScript实现的类字典插入或更新方法实例
本文实例讲述了JavaScript实现的类字典插入或更新方法。分享给大家供大家参考。具体如下: 代码表述了类字典插入或更新的相关思想,感兴趣的朋友主要看懂代码意思就行,不必过于深究 &lt;script type=&quot;text&#x...
2017-03-27
js实现用户输入的小写字母自动转大写字母的方法
实例如下: &lt;script language=&quot;JavaScript&quot;&gt; function toUpperCase(obj) { obj.value = obj.value.toUpperCase() ...
2017-02-25
JS实现定时自动关闭DIV层提示框的方法
本文实例讲述了JS实现定时自动关闭DIV层提示框的方法。分享给大家供大家参考。具体分析如下: 这里用JS设定时间去控制指定ID的DIV层是否显示,可以实现一个自动关闭的提示框,时间一到,马上关闭,这样会使你的网页更人性一点,代码其实比你想像...
2017-03-23
js实现简单选项卡与自动切换效果的方法
本文实例讲述了js实现简单选项卡与自动切换效果的方法。分享给大家供大家参考。具体分析如下: 说明: 设置一个标识数字置为0,写一个每过几秒标识+1,执行切换效果的函数,然后执行。 当标识超过当前选项卡长度让标识置为0。 在鼠标移到选项卡的时...
2017-03-22
JavaScript实现自动弹出窗口并自动关闭窗口的方法
本文实例讲述了JavaScript实现自动弹出窗口并自动关闭窗口的方法。分享给大家供大家参考。具体如下: 这里介绍的JavaScript自动弹出窗口并自动关闭窗口,JS实现此特效似乎很简单,打开网页后即显示一个弹出窗口,之后会自动离开,使用...
2017-03-27
简易的投票系统以及js刷票思路和方法
早就听说有什么刷票脚本,微博投票等等相关的投票都有某些人去刷票。 试一下吧,兴许自己也会刷票呢?捣鼓了几个小时,终于有所眉目。 (1)投票系统 要刷票,就得先有个投票界面。 当然,可以直接去各个投票网站就行,不过这里还是自己弄个投票页面,方...
2017-03-22
jquery右下角自动弹出可关闭的广告层
右下角弹出层后,会在一定时间后自动隐藏。 html代码: &lt;!DOCTYPE HTML&gt; &lt;html xmlns=&quot;http:&#x2F;&#x2F;www.w3.org&#x2F;1999&#x2F;xhtml...
2017-03-23
简介可以自动完成UI的AngularJS工具angular-smarty
我们最近为我们的论坛增加了一个自动完成功能(称为Smarty),在要求专业人员简介的主页上。这是一个超有用的功能,因为它有助于我们将用户导航到他们真正想去的地方。它很有意思,也是用AngularJS构建的! 我们希望Smarty能够: ...
2017-03-24
回到顶部