electron 实现自动更新。

9 篇文章 0 订阅

第一步:安装对应的插件

npm i electron-updater --save-dev

 服务器端需要上传这三个文件 使用electron-builder打包时候会自动生成。

 地址为:https://www.xxx.com/uploadeducation

 ele.js  //注:electron.js

const {app, BrowserWindow, Menu ,ipcMain } = require('electron');
const { autoUpdater } = require("electron-updater");
const path = require('path');
const url = require('url');

// ele.js

// app.commandLine.appendSwitch('ignore-certificate-errors') // 忽略检测证书

// autoUpdater.updateConfigPath = path.join(__dirname, './dist/win-ia32-unpacked/resources/app-update.yml') //本地环境用这个路径(就是electron . 启动预览的是)
autoUpdater.updateConfigPath = path.join(__dirname, '../app-update.yml') // 打包以后用这个路径
const feedUrl = `https://www.xxx.com/uploadeducation`; // 更新包位置
  autoUpdater.setFeedURL(feedUrl);
  let message = {
    error: '检查更新出错',
    checking: '正在检查更新……',
    updateAva: '检测到新版本,正在下载……',
    updateNotAva: '现在使用的就是最新版本,不用更新',
  };
  autoUpdater.on('error', function (error) {
    // sendUpdateMessage(message.error)
	sendUpdateMessage(error)
  });
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage(message.checking)
  });
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage(message.updateAva)

  });
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva)
  });

// 更新下载进度事件
autoUpdater.on('download-progress', function (progressObj) {
  console.log(progressObj)
 //与渲染进程通信
  mainWindow.webContents.send('downloadProgress', progressObj)
  mainWindow.setProgressBar(progressObj.percent / 100);
})
autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
  console.log('更新完成')
  ipcMain.on('isUpdateNow', (e, arg) => {
    console.log("开始更新");
    //some code here to handle event
    autoUpdater.quitAndInstall();
  });

  mainWindow.webContents.send('isUpdateNow')
});

ipcMain.on("checkForUpdate",()=>{
  //放外面的话启动客户端执行自动更新检查
  autoUpdater.checkForUpdates();
})
function sendUpdateMessage(text) {
  mainWindow.webContents.send('message', text)
}
 
// 保持一个对于 window 对象的全局引用,如果你不这样做,
// 当 JavaScript 对象被垃圾回收, window 会被自动地关闭
let mainWindow;

ipcMain.on('closeWindow',function(){
	app.exit(0);
})
 
function createWindow () {
    //隐藏关闭放大缩小最外层菜单栏目
    Menu.setApplicationMenu(null);
 
    // 创建浏览器窗口。
    mainWindow = new BrowserWindow({
        title: '这里是软件名称',
		alwaysOnTop:true,//是否总是现在在最前面
		fullscreen:true,//是否全屏
		webPreferences:{
			nodeIntegration: true, // 是否集成 Nodejs
			webSecurity: false,
			textAreasAreResizable :false,
			contextIsolation: false
		},
        // width: 1320,
        // height: 744,
        icon: __dirname + './static/edu.ico', //这个是引入的icon
    });
 
    // 然后加载应用的 index.html。
    mainWindow.loadURL(url.format({
       pathname: path.join(__dirname, './unpackage/dist/build/h5/index.html'),
       // protocol: 'file:',
       // slashes: true
    }))
	
	// mainWindow.webContents.openDevTools()
 
    //引用外部文件
	// mainWindow.loadURL(`http://localhost:8080/#/`);
    // 加载应用的 index.html
    // mainWindow.loadURL('file://' + __dirname + '/index.html');
 
   // 打开开发者工具。
   //mainWindow.webContents.openDevTools();

    // 打开开发工具
 // mainWindow.openDevTools();
 
   // 当 window 被关闭,这个事件会被触发。
   mainWindow.on('closed', () => {
            // 取消引用 window 对象,如果你的应用支持多窗口的话,
            // 通常会把多个 window 对象存放在一个数组里面,
            // 与此同时,你应该删除相应的元素。
            mainWindow = null
    })
}
 
// Electron 会在初始化后并准备
// 创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)
 
// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上,除非用户用 Cmd + Q 确定地退出,
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
 
app.on('activate', () => {
    // 在macOS上,当单击dock图标并且没有其他窗口打开时,
    // 通常在应用程序中重新创建一个窗口。
    if (mainWindow === null) {
        createWindow()
    }
})
 
// 在这个文件中,你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件,然后用 require 导入

在VUE页面使用

// 检测更新
			updateFile:function(){
					this.ipc.send("checkForUpdate");
					 this.ipc.on("message", (event, text) => {
						 console.log(text);
						 console.log(event);
							if('检测到新版本,正在下载……' == text){
                                //这里执行更新逻辑 比如显示更新UI界面啥的
								this.centerDialogVisible = true;
							}
					});
					this.ipc.on("downloadProgress", (event, progressObj)=> {
						console.log(progressObj);
                        //这里执行更新回调,比如当前进度 百分之2.5 
						this.progress = progressObj.percent.toFixed(2);
					});
					this.ipc.on("isUpdateNow", () => {
					    this.ipc.send("isUpdateNow");
					});
			},
		},
		created() {
			if(this.eleEnv){ //Vue.prototype.eleEnv = true //默认是electron环境
				this.updateFile();
			}
			this.getshowHttp();
		}

package.json

{
	"name": "education",
	"version": "0.0.1",//服务器端 版本号要大于本地才会触发更新
	"description": "这里是名字",
	"main": "ele.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"dist": "electron-builder --win --ia32",
		"package": "electron-packager . electronName --win --out distP --arch=ia32 --electron-version 1.4.14 --overwrite --ignore=node_modules --icon=./static/edu.ico"
	},
	"build": {
		"productName": "education",
		"appId": "com.Ambition.com",
		"copyright": "Ambition",
		"directories": {
			"output": "dist"
		},
		"publish": [
			{
				"provider": "generic",
				"url": "https://www.xxx.com/uploadeducation"
			}
		],
		"nsis": {
			"oneClick": false,
			"allowElevation": true,
			"allowToChangeInstallationDirectory": true,
			"installerIcon": "./static/edu.ico",
			"uninstallerIcon": "./static/edu.ico",
			"installerHeaderIcon": "./static/edu.ico",
			"createDesktopShortcut": true,
			"createStartMenuShortcut": true,
			"shortcutName": "shortcutName"
		},
		"win": {
			"icon": "./static/edu.ico",
			"target": [
				{
					"target": "nsis",
					"arch": [
						"x64",
						"ia32"
					]
				}
			]
		}
	},
	"dependencies": {
		"electron-updater": "^4.3.9"
	},
	"devDependencies": {
		"electron": "15.1.2",
		"electron-builder": "^22.13.1",
		"electron-devtools-installer": "^3.2.0"
	},
	"electronDownload": {
		"mirror": "https://npm.taobao.org/mirrors/electron/"
	},
	"author": "DW",
	"license": "ISC"
}

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Electron 是一种用于构建跨平台桌面应用程序的开源框架,结合了 Vue.js 和 Electron.js 技术。在 Vue Electron实现自动更新需要借助 Electron 的 autoUpdater 模块和一些其他辅助工具。 首先,需要在主进程(`main.js`)中配置自动更新。可以使用 Electron 的 autoUpdater 模块来检查新版本,并自动下载和安装更新。具体步骤如下: 1. 导入 autoUpdater 模块:在 `main.js` 文件中添加 `const { autoUpdater } = require('electron-updater')`。 2. 配置更新服务器地址:通过 `autoUpdater.setFeedURL()` 方法设置更新服务器的地址,例如 `autoUpdater.setFeedURL('https://your-update-server-url')`。 3. 监听更新事件:使用 `autoUpdater.on()` 方法监听自动更新过程中的各个事件。例如可以监听 `checking-for-update`、`update-available`、`update-not-available`、`download-progress` 和 `update-downloaded`。 4. 触发检查更新:通过 `autoUpdater.checkForUpdates()` 方法触发检查更新的过程,在应用启动时或者可以通过某个按钮点击事件来手动检查更新。 接下来,需要在渲染进程(Vue 组件)中显示更新提示和进行更新操作。具体步骤如下: 1. 在渲染进程的代码中,可以监听 `message` 事件来接收主进程发送的消息,从而在用户界面上显示更新提示。 2. 监听到更新提示后,可以弹出一个对话框,询问用户是否进行更新。如果用户选择更新,可以通过 `ipcRenderer.send()` 方法向主进程发送消息,触发下载和安装更新的过程。 3. 主进程监听到渲染进程发送的更新请求后,可以通过 `autoUpdater.downloadUpdate()` 方法来下载更新文件。 4. 下载完成后,通过 `autoUpdater.quitAndInstall()` 方法来安装更新并重启应用。 以上就是使用 Vue Electron 实现自动更新的基本步骤。需要注意的是,还需要在应用的打包配置中加入相应的逻辑,以使自动更新在不同平台下运行正常。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值