electron 自动更新以及手动更新

共计 5781 个字符，预计需要花费 15 分钟才能阅读完成。

从搭建开始使用的是 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

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

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>

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

站内搜索