Windows下支持自动更新的电子脚手架应用方法

前言

我之前在Windows里写过一篇关于Electron自己的autoUpdater自动更新应用程序的文章，很多朋友私下问我具体的实现代码，但是因为我很忙(也很懒.)之前。

这两个星期在周末碰巧很空。除了在github上搭建一个支架之外，顺便对实现进行了优化。下面将从头开始详细介绍实现过程，这也是一个对小白非常友好的教程。

从头开始

输入您的工作目录，如d/workspace

#目录d/workspacemkdir电子-演示#创建新文件夹电子-democd电子-演示#输入文件夹电子-demonpm init #初始化npm。一路输入npm i电子-保存-开发#安装电子依赖touch main.js #新建文件main . js Touch index.html #新建文件index.html现在你的文件结构如下：

|- electron-demo |- main.js #空文件|-index.html #空文件|-package.json |-package-lock . JSON # NPM自动生成的文件|- node_modules确保package . JSON的名称、版本和描述字段不为空，main字段的值为main.js。

{ ' name ' : ' electronic-demo '，' version' :' 0.0.1 '，' description ' : ' electronic-demo '，' main' :' main.js'}主要流程和渲染流程

电子申请分为主流程和渲染流程。渲染过程是直接与用户交互的过程，也就是我们看到的窗口页面，而主过程主要负责控制应用的生命周期和各个渲染过程的通信。

我们的主进程代码是用main.js编写的，所以首先在你喜欢的代码编辑器中打开main.js，输入下面的代码：

const path=require(' path ')；const URL=require(' URL ')；const { app，BrowserWindow }=require(' electronic ')；app.on('ready '，()={ let win=new browser window({ width : 800，height: 600，webpreferences 3360 { devtools : true } })；win . LoadURl(URl . format({ path name : path . join(_ dirname，' index.html ')，protocol: 'file: '，slash : true })；});app.on('window-all-closed '，()=app . quit())；再次打开index.html并输入以下代码：

！DOCTYPE html html head meta charset=' UTF-8 '标题Hello World！/title/headbody h1Hello World！在/h1/body/html之后执行

#目录d/工作区/电子-演示节点_模块/。仓/电子。如果没有意外的话，你会看到这样一个弹出框：

我们还可以保存node_modules/。仓/电子。作为npm脚本，方便以后调用。打开package.json并添加以下内容：

脚本' : { '开始' : '电子。}将来只需要调用npm start。

在这一点上，我们有最简单的电子应用。如果您对继续开发应用程序本身更感兴趣，请前往官方的Electron文档，因为我们将重点关注如何使此应用程序自动更新。

自动更新

安装依赖关系

自动更新功能的实现依赖于电子构建器和电子更新器，所以我们需要先安装这两个依赖项。

#目录d/workspace/electronic-demon pm I electronic-builder-save-dev #必须作为开发依赖项安装，否则打包会出错。NPM I electronic-updater-save #必须作为运行依赖项安装，否则运行将出错。配置package.json

为了匹配package.json的打包，有必要添加字段构建：

build ' : { ' appid ' : ' com . XXX . app '，' publish ' :[{ ' provider ' : ' generic '，' URL ' : ' http://127 . 0 . 0 ' 13336 . 3:8080

脚本' : { '开始' : '电子。' build ' : ' electronic-builder-w ' }以后只需要调用npm运行build即可。

主要流程和渲染流程

打开main.js并按如下方式进行编辑：

const path=require(' path ')；const URL=必选(' URL ')；const { app，BrowserWindow，ipcMain }=require(' electronic ')；const { autoUpdater }=require(' electronic-updater ')；const FeedURl=` http://127。0 .0 .1:8080/$ {流程。platform } `；让网络内容；let create window=()={ let win=新浏览器窗口({ width : 800，height: 600，web preferences 3360 { dev tools : true } })；webContents=win.webContentswin。LoadURl(URl。格式({路径名：路径。join(_ dirname，' src/index.html ')，protocol: 'file: '，斜杠： true })；网络内容。opendevtools()；};让sendUpdateMessage=(消息，数据)={ webContents.send('message '，{ message，数据});};让checkForUpdates=()={ autoupdater。setfeedburl(feedburl)；autoUpdater.on('错误'，函数（消息){ sendUpdateMessage('错误'，消息)});' autoUpdater.on('检查更新，函数（消息){ sendUpdateMessage('检查更新，消息)});自动更新程序。开启('更新可用'，函数（消息){ sendUpdateMessage('更新可用'，消息)});自动更新程序。打开('更新-不可用，函数（消息){ sendUpdateMessage(' update-不可用，消息)});//更新下载进度事件自动更新程序。on(' download-progress '，function(progress obj){ sendUpdateMessage(' download progress '，progress obj)})autoupdater。on(' update-download '，函数(event，releaseNotes，releaseName，releaseDate，updateUrl，quit and date){ ipcmain。on(' updateNow '，(e，arg)={//此处有一些处理事件autoUpdater.quitAndInstall()的代码；})发送更新消息(“isUpdateNow”)；});//执行自动更新检查自动更新程序。checkforupdates()；};app.on('ready '，()={ createWindow()；setTimeout(checkForUpdates，1000)；});app.on('window-all-closed '，()=app。quit())；index.html:

！DOCTYPE html html head meta charset=' UTF-8 '标题你好世界！/title/headbody h1Hello World！/h1脚本const { ipcRenderer }=require(' electronic ')；ipcRenderer.on('message '，(事件，{消息，数据})={ console.log(消息，数据)；开关（消息){ case ' isUpdateNow ' : if(确认('现在更新？')){ ipcrenderer。发送(' updateNow ')；} breakdefault :文档。queryselector(' h1 ').innerHTML=消息；打破；} });/脚本/正文/html打包

新公共管理运行构建第一次运行会比较慢，运行结束后会在当前目录下新增一个距离文件夹，dist的目录结构如下：

|-dist |-win-unpacked |-electronic-auto update-脚手架Setup.exe |-electronic-auto update-脚手架设置。exe。区块图|-电子-构建器-效果-配置。YAML |-最新。yml win-未包装下是可执行文件，但是先别着急运行，我们还缺一个后台。

自动更新后台

聪明的你一定注意到，前面代码中我们有一个：

const FeedURl=` http://127。0 .0 .1:8080/$ {流程。platform } `；所以我们现在要做的就是一个可以接受这个请求的服务。

回到你的工作目录(d/工作区)

# 目录d/workspacemkdir电子-服务器光盘电子-服务器NPM init NPM I KOA-保存NPM I KOA-静态-保存触摸服务器。射流研究…打开server.js，输入如下内容：

//服务器。js let Koa=require(' Koa ')；let app=new Koa()；let path=require(' path ')；app。使用(require(' KOA-static '))(路径。解析(_ _ dirname '/packages ')；let server=app.listen(8080，()={ let { address，port }=server。address()；console.log('应用实例，访问地址为http://% s 3360% s '，地址，端口);});将之前打包出来的距离目录下的四个文件（除了未包装的)拷贝到这边的软件包/win32下（新建目录包/win32)，之后

# 目录d/工作区/电子-服务器启动到此为止，我们的自动更新服务就搭建完成了，现在来一波测试吧。

测试

进入电子演示/dist/win未包装找到可执行文件，双击运行，看到打开窗口的控制台中依次输出：

check-for-update update-不可用进入electronic-demo，打开package.json，将版本号更改为0.0.2，重新打包并将打包的文件复制到自动更新后台目录(d/workspace/electronic-server/packages/win32)。

进入e-demo，打开package.json，将版本号改为0.0.1，重新打包，再次进入dist/win-unpacked目录，运行exe，在打开窗口的控制台依次看到输出：

检查更新更新可用，并弹出提示“现在更新吗？」。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。