electron-vue+electron-updater实现自动更新
1、编写语言:electron、vue
2、更新库:"electron-updater": "4.3.5"
下面直接上步骤源码
一、autoUpdater.js (操控更新js文件)
import { autoUpdater } from 'electron-updater'
import { app, ipcMain } from 'electron'// 服务器静态文件地址,文章后面附上ng配置及需要上传的文件
const updateUrl = 'http://***/updateExe/'// 检测更新,在你想要检查更新的时候执行,renderer事件触发后的操作自行编写
function updateHandle (updateConfig) {let message = {error: '检查更新出错',checking: '正在检查更新……',updateAva: '检测到新版本,正在下载……',updateNotAva: '现在使用的就是最新版本,不用更新'}// 设置是否自动下载,默认是true,当点击检测到新版本时,会自动下载安装包,所以设置为falseautoUpdater.autoDownload = false// 设置服务器更新地址autoUpdater.setFeedURL({provider: 'generic',url: updateUrl})autoUpdater.on('error', function (err) {sendUpdateMessage('error',err||message.error)})autoUpdater.on('checking-for-update', function () {sendUpdateMessage('checking-for-update',message.checking)})// 版本检测结束,准备更新autoUpdater.on('update-available', function (info) {sendUpdateMessage('update-available',message.updateAva)})autoUpdater.on('update-not-available', function (info) {sendUpdateMessage('update-not-available',message.updateNotAva)})// 更新下载进度事件autoUpdater.on('download-progress', function (progressObj) {sendUpdateMessage('download-progress',progressObj.percent)})// 下载完成autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {sendUpdateMessage('update-downloaded','下载完成')})// 通过main进程发送事件给renderer进程,提示更新信息function sendUpdateMessage (name,text) {// 窗口对象自行修改let loginWindow = global.browserList.logins[0]loginWindow.webContents.send('UpdateMessage', {name,text})}
}// 触发更新检测
ipcMain.on('checkForUpdates', () => {autoUpdater.checkForUpdates()
})// 开始下载,通过渲染进程发起
ipcMain.on('downloadUpdate', () => {autoUpdater.downloadUpdate()
})// 下载完成,退出且重新安装
ipcMain.on('updateSuccess', () => {// 加载更新程序autoUpdater.quitAndInstall()// 关闭当前electronapp.quit()
})export default updateHandle
2、main.js(也就是package.json内的main指向的js文件)
import updateHandle from '@/mainFolder/util/autoUpdater.js' //自动更新// ... 省略其次代码,为了更新代码更明了//自动更新
updateHandle()
3、update.vue(可视化更新页面vue + iview,不同的自行封写)
<template><div><Modalv-model="modal":mask-closable='false':title="'更新提醒(' + newVersion +')'"width="400"ok-text="立即更新"cancel-text="取消":closable='false'@on-ok='updataDown'><p v-for='(item, index) in navJson' :key='index + "navJson"'>{{ index+1 }}、{{item}}</p></Modal><Modalv-model="Progress":mask-closable='false':title="'正在更新(' + newVersion +')'"width="400":closable='false'><Progress :percent="percent" status="active" ></Progress><div slot="footer"></div></Modal></div>
</template><script>// this.$ipcRenderer 等同于 window.require("electron").ipcRenderer
export default {data() {return {modal: false,Progress: false,percent: 0,newVersion: '0.0.0',isOnMessage: false,navJson: []}},created () {// 在这里执行之前,可以是登录接口查询到版本不对之后再触发检测更新// ...登录api省略了,造数据演示let result = {newVersion: '2.0.0',updateNavJson: '["更新内容1","更新内容2","更新内容3","更新内容4"]'}this.onUpdateExe(result)},methods: {onUpdateExe(res) {if (this.isOnMessage) returnconst { newVersion = '', updateNavJson = "" } = restry {this.navJson = JSON.parse(updateNavJson) || []} catch (error) {console.log(error)}this.isOnMessage = truethis.newVersion = newVersionconsole.log('收到更新版本号', res, this.navJson)// 自动更新过程this.$ipcRenderer.on('UpdateMessage', this.updateExe.bind(this))// 检查是否需要更新this.$ipcRenderer.send('checkForUpdates')},updateExe(e, data){console.log('渲染层收到消息:',data)// 更新提示弹窗if(data.name == 'update-available'){this.modal = true }else if(data.name == 'download-progress'){ // 下载进度this.percent = Math.ceil(data.text)}else if(data.name == 'update-downloaded'){this.$Message.success('下载完成,准备重启')setTimeout(() => {this.$ipcRenderer.send('updateSuccess')},2000)}},//开始升级updataDown(){this.Progress = truethis.$ipcRenderer.send('downloadUpdate')}},
}
</script><style lang="scss" scoped>/deep/.ivu-modal-body {max-height: 120px;overflow-y: scroll;padding-top: 5px;p {line-height: 24px;height: 24px;font-size: 12px;}}/deep/.ivu-modal-footer {button:nth-child(1) {display: none;}}
</style>
4、config配置增加publish,url:服务器文件地址
electronBuilder: {builderOptions: {productName: 'soft', // 打包文件名称,尽可能用英文// ...publish: [{"provider": "generic","url": `http://***/updateExe/`}],}
}
5、服务器ng配置
// nginx配置静态文件目录
http {server {# 增加这一个配置location /updateExe/ {alias /usr/item/updateExe/;}}
}
6、将打包后的exe + latest.yml 传入/usr/item/updateExe/这个目录下
备注:
1、5步骤配置ng静态文件访问链接,有文件服务器的可跳过
2、文章中的 http://***/updateExe/ 的 ***记得替换成服务器公网ip
效果如下:
到这里就大工告成了,有用的话麻烦关注收藏一下
electron-vue+electron-updater实现自动更新相关推荐
- electron 应用程序updater实现热更新
安装"electron-updater": "^5.2.1" 打开package.json文件在build对象下添加publish配置 "publis ...
- vue打包成app自动更新‘plus‘ is not defined报错
有人知道因为什么嘛?
- Vue+Electron学习系列 (三) -- 自动更新
Vue+Electron学习系列 1️⃣Vue+Electron学习系列 (一) -- 初识 2️⃣ Vue+Electron学习系列 (二) -- 打包发布 3️⃣ Vu ...
- electron 自动更新 热跟新
electron 自动更新 热跟新 自动跟新之后不用重新安装 使用electron-upadta 自动跟新之后需要用户在重新安装一遍程序,用户体验不好,开发electron-hot-updata 插件 ...
- electron打包可选择安装位置,可自动更新
Electron打包调参软件(windows版) ----------------------------------可选安装位置,可自动更新,手动更新 一:引包:electron,electron- ...
- electron 利用 electron-builder实现自动更新
2019独角兽企业重金招聘Python工程师标准>>> 这篇文章是对应用文档的补充,这边刚开始用electron-forge 但没有相关的教程,放弃. 1.先学会用electron- ...
- Electron + Vue 实现输入法自动刷字数
思路:循环使用 robotjs 库模拟键盘点击,从而实现输入法刷自动刷字数的功能. 安装依赖 npm i robotjs Vue 代码 在 Vue 中编写一个文本域用来聚焦输入法焦点. 思路:当我们按 ...
- electron自动更新版本electron-updater
首先来看效果图: 打包electron生成新的exe安装包:npm run dist 使用simplehttpserver开启存放打包好的exe安装包与yml文件的本地服务(打包目录里有这两个文件) ...
- 【Electron】酷家乐客户端开发实践分享 — 软件自动更新
作者:钟离,酷家乐PC客户端负责人 原文地址:webfe.kujiale.com/electron-au- 酷家乐客户端:下载地址 www.kujiale.com/activity/13- 文章背景: ...
- 一招解决BS转CS模式:浏览终端开发-Electron集成打包、本地配置文件及自动更新
将普通的网页转换为桌面应用并兼容现在的H5,基本的思路都是打包封装谷歌公司的开源版Chromium 使其充当与本地应用通讯的媒介: 成本比较低的是electron CefShap(C#) 至于bl ...
最新文章
- Google Test(GTest)使用方法和源码解析——自定义输出技术的分析和应用
- vs2005常用快捷键
- Mac 安装 brew
- Shoppica OpenCart 商城自适应主题模板 ABC-0002
- springboot获取原生js请求_七节课带你学会SpringBoot,第三课
- 感谢球,感谢铁道部,感谢电信,我终于定到回武汉的票了
- 三个范式的定义与理解
- shell数组中“和@的妙用
- 1584 - Circular Sequence
- TabLayout实现顶部导航(一)
- 【货干】Idea 安装 MyBatis 插件
- df 根据文件名找到挂载点原理
- psd原型图自动转html,psd自动转成html的研究
- latex审阅时添加行号
- 小程序 消息推送配置token无效(解决方法)订阅消息
- 著名Wiki站点一览
- Coddington shape factor
- C#学习之操作excel表格
- 天邑ty1208z海思3798刷版本_[FJ]安徽电信天邑ty1208z_mv100机顶盒刷全网通教程
- 青年大学习未看人员名单查询(JAVA)
热门文章
安装"electron-updater": "^5.2.1" 打开package.json文件在build对象下添加publish配置 "publis ...
有人知道因为什么嘛?
Vue+Electron学习系列 1️⃣Vue+Electron学习系列 (一) -- 初识 2️⃣ Vue+Electron学习系列 (二) -- 打包发布 3️⃣ Vu ...
electron 自动更新 热跟新 自动跟新之后不用重新安装 使用electron-upadta 自动跟新之后需要用户在重新安装一遍程序,用户体验不好,开发electron-hot-updata 插件 ...
Electron打包调参软件(windows版) ----------------------------------可选安装位置,可自动更新,手动更新 一:引包:electron,electron- ...
2019独角兽企业重金招聘Python工程师标准>>> 这篇文章是对应用文档的补充,这边刚开始用electron-forge 但没有相关的教程,放弃. 1.先学会用electron- ...
思路:循环使用 robotjs 库模拟键盘点击,从而实现输入法刷自动刷字数的功能. 安装依赖 npm i robotjs Vue 代码 在 Vue 中编写一个文本域用来聚焦输入法焦点. 思路:当我们按 ...
首先来看效果图: 打包electron生成新的exe安装包:npm run dist 使用simplehttpserver开启存放打包好的exe安装包与yml文件的本地服务(打包目录里有这两个文件) ...
作者:钟离,酷家乐PC客户端负责人 原文地址:webfe.kujiale.com/electron-au- 酷家乐客户端:下载地址 www.kujiale.com/activity/13- 文章背景: ...
将普通的网页转换为桌面应用并兼容现在的H5,基本的思路都是打包封装谷歌公司的开源版Chromium 使其充当与本地应用通讯的媒介: 成本比较低的是electron CefShap(C#) 至于bl ...