1.自行创建Electron项目

2.安装electron-builder 打包工具

yarn add electron-builder

或者

npm install electron-builder -D

并配置package.json

{"name": "demo","version": "1.1.1","description": "A minimal Electron application","productName": "MyApp","startUpState":true,"main": "main.js","scripts": {"start": "electron .","pack": "electron-builder --dir","dist": "node ./bin/clear.js && electron-builder --win --ia32"},"files": "dist/**/*","build": {"appId": "com.wish.app","publish": [{"provider": "generic","url": "http://localhost:2060/zip"}],"mac": {"target": ["dmg","zip"]},"win": {"icon": "/icon/admin.ico","target": ["nsis","zip"]}},"repository": "https://github.com/electron/electron-quick-start","keywords": ["Electron","quick","start","tutorial","demo"],"author": "GitHub","license": "CC0-1.0","devDependencies": {"electron": "^5.0.6","electron-builder": "^21.1.0"},"dependencies": {"del": "^5.0.0","electron-updater": "^4.1.2","regedit": "^3.0.3"}
}

3.安装electron-updater(自动更新工具)

yarn add electron-updater --save-dev

或者

npm i electron-updater --save-dev

4.主进程增加事件

// Modules to control application life and create native browser window
const {app, BrowserWindow,ipcMain} = require('electron')
const regedit = require('regedit');
const path = require('path')
const { autoUpdater } =require("electron-updater");
const package = require('./package.json')
let name = package.productName;
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindowfunction createWindow () {// Create the browser window.
  mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration:true,// preload: path.join(__dirname, 'preload.js')
    }})// and load the index.html of the app.
  mainWindow.loadFile('index.html')// Open the DevTools.
  // mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
  mainWindow.on('closed', function () {// Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null})
}// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)// Quit when all windows are closed.
app.on('window-all-closed', function () {// On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') app.quit()
})app.on('activate', function () {// On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) createWindow()
})
//开机自启与关闭启动
ipcMain.on('startFun', (e, arg) => {console.log(arg)console.log(app.getLoginItemSettings().openAtLogin)if(arg==app.getLoginItemSettings().openAtLogin) return;if(arg){app.setLoginItemSettings({openAtLogin: arg,path: process.execPath})}else{app.setLoginItemSettings({openAtLogin: false})}
});// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
//自动更新
//执行自动更新检查
const feedUrl = `http://ts.wish3d.com/wk/Test/`; // 更新包位置
  autoUpdater.setFeedURL(feedUrl);let message = {error: '检查更新出错',checking: '正在检查更新……',updateAva: '检测到新版本,正在下载……',updateNotAva: '现在使用的就是最新版本,不用更新',};autoUpdater.on('error', function (error) {sendUpdateMessage(message.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)
}

5.渲染进程

//监听自动更新事件
const { ipcRenderer } = require("electron");var update = document.getElementById('update');
update.addEventListener('click',function(){//发送请求执行自动更新
    ipcRenderer.send("checkForUpdate");
})
let len = 5,timer=null;ipcRenderer.on("message", (event, text) => {console.log(event)console.log(text)timer=null;var sp = document.createElement('span');sp.style.top=len+'px';len+=30sp.style.padding="0 20px"sp.innerText=text;document.getElementById('message').append(sp);clearTimeout(timer);timer = setTimeout(()=>{document.getElementById('message').innerHTML=''len=5},4000)
});
ipcRenderer.on("downloadProgress", (event, progressObj)=> {console.log(progressObj);document.getElementById('progress').innerHTML=(progressObj.toFixed(2))+'%'
});
ipcRenderer.on("isUpdateNow", () => {document.getElementById('mode').className='active';document.getElementById('ok').addEventListener('click',function(){ipcRenderer.send("isUpdateNow");})});
document.getElementById('cancel').addEventListener('click',function(){document.getElementById('mode').className='';
})
window.onunload=function(){ipcRenderer.removeAll(["message", "downloadProgress", "isUpdateNow"])
}
//开机启动
document.getElementById('startUp').onclick=function(){ipcRenderer.send('startFun',true);
}//关闭开机启动
document.getElementById('startUpOff').onclick=function(){ipcRenderer.send('startFun',false);
}

6.本地测试搭建node服务器访问静态资源

1.在空文件夹下npm init -y 

2、server.js

const express = require('express');
const app = express();app.use(express.static('public')); //监控静态资源 app.listen(2060,()=>{ console.log('loaclhost:2060') }) 

package.json

{"name": "async","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start":"node server.js"},"keywords": [],"author": "","license": "ISC","dependencies": {"express": "^4.17.1"}
}

3.安装express

yarn add express

4.开启服务

npm start

应用

1.打包

2.复制如图到服务发布路径

3.在之前可以先打一个包,作为原基础包运行,点击更新

注意事项:千万不要在中文目录下运行

Electron应用实现自动更新相关推荐

  1. Electron使用electron-updater自动更新

    electron-updater官方文档 安装electron-log是为了方便本地调试 yarn add electron-updater yarn add electron-log 版本号是根据你 ...

  2. electron打包可选择安装位置,可自动更新

    Electron打包调参软件(windows版) ----------------------------------可选安装位置,可自动更新,手动更新 一:引包:electron,electron- ...

  3. electron 利用 electron-builder实现自动更新

    2019独角兽企业重金招聘Python工程师标准>>> 这篇文章是对应用文档的补充,这边刚开始用electron-forge 但没有相关的教程,放弃. 1.先学会用electron- ...

  4. electron 自动更新 热跟新

    electron 自动更新 热跟新 自动跟新之后不用重新安装 使用electron-upadta 自动跟新之后需要用户在重新安装一遍程序,用户体验不好,开发electron-hot-updata 插件 ...

  5. electron自动更新版本electron-updater

    首先来看效果图: 打包electron生成新的exe安装包:npm run dist 使用simplehttpserver开启存放打包好的exe安装包与yml文件的本地服务(打包目录里有这两个文件) ...

  6. Vue+Electron学习系列 (三) -- 自动更新

    Vue+Electron学习系列 ​​​​​​​1️⃣Vue+Electron学习系列 (一) -- 初识​​​​​​​ 2️⃣ Vue+Electron学习系列 (二) -- 打包发布 3️⃣ Vu ...

  7. 【Electron】酷家乐客户端开发实践分享 — 软件自动更新

    作者:钟离,酷家乐PC客户端负责人 原文地址:webfe.kujiale.com/electron-au- 酷家乐客户端:下载地址 www.kujiale.com/activity/13- 文章背景: ...

  8. 一招解决BS转CS模式:浏览终端开发-Electron集成打包、本地配置文件及自动更新

    将普通的网页转换为桌面应用并兼容现在的H5,基本的思路都是打包封装谷歌公司的开源版Chromium 使其充当与本地应用通讯的媒介: 成本比较低的是electron  CefShap(C#)  至于bl ...

  9. 使用 electron-updater 自动更新应用

    前端工程师可以使用 Electron 非常方便的编写出 PC 端应用,而应用更新的方式也有很多,详细可见更新应用程序. 我的项目是基于 electron-vue 搭建的,构建打包生成安装包,则用的是 ...

最新文章

  1. html中隐藏溢出怎么写,html-如何隐藏表行溢出?
  2. 传统IT和新IT并行推进 EMC两条腿走路助力企业数字化转型
  3. django框架--路由系统
  4. windows 安装python-pcl 测试ok
  5. python人机猜拳游戏_Python实现剪刀石头布小游戏(与电脑对战)
  6. 操作系统概念学习笔记 15 内存管理(一)
  7. poj 1729 Jack and Jill (搜索,bfs)
  8. leetcode60. 第k个排列(回溯算法)
  9. 上海区块链会议演讲ppt_进行第一次会议演讲的完整指南
  10. 源码网络-推荐精品×××站
  11. java pfx提取私钥加签,详解pfx证书提取公私钥的方法
  12. 图解:SQL SERVER2005的安装
  13. 2、linux网络编程--无连接与面向连接的区别
  14. 各种排序算法总结和比较
  15. STM32F7xx基于HAL库的USB_CDC接收数据的函数调用
  16. 智慧灯杆系统设计架构简介
  17. 拼图c语言程序,C语言实现拼图小游戏
  18. 读论文——Pre-Training with Whole Word Masking for Chinese BERT(2021 11.25)
  19. 山东平度纵火案告破:村主任与地产商联手施暴
  20. 使用 awk 处理一个对齐问题

热门文章

  1. 洛谷 P2265 路边的水沟
  2. NavMenu 导航菜单导航样式修改
  3. 缩尾处理、均值和中位数的差异检验
  4. python 自定义contourf图的colorbar
  5. WIFI共享精灵--省流量的好办法
  6. Paper Reading - 综述系列 - Hyper-Parameter Optimization(下)
  7. 提示“User Profile Service服务未能登录,无法加载用户配置文件。”
  8. html+css面试题
  9. bfs算法 c语言,基于BFS算法的贪吃蛇(一)----基本架构
  10. 【数字图像处理】图像直方图均衡化、空域滤波(均值滤波、中值滤波)、图像锐化(Laplace算子)、图像傅里叶变换实验