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

2024-10-08 12:20:28

前言

之前写过一篇关于 Windows 下通过 Electron 自带的 autoUpdater 实现应用自动更新的文章，很多小伙伴私信问我要具体实现代码，不过因为之前一直很忙（还有懒...）。

这两周正好周末比较空，除了在 github 上搭建了一个脚手架，还顺便把实现优化了一波，下面将会带着大家从零开始详细介绍实现过程，对小白也很友好的教程哦。

从零开始

进入你的工作目录，比如 d/workspace

# 目录 d/workspace
mkdir electron-demo # 新建文件夹 electron-demo
cd electron-demo # 进入文件夹 electron-demo
npm init # 初始化 npm，一路回车即可
npm i electron --save-dev # 安装 electron 依赖
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 的name，version，description这三个字段都不为空，main 字段的取值为 main.js 。

{
 "name": "electron-demo",
 "version": "0.0.1",
 "description": "electron-demo",
 "main": "main.js"
}

主进程和渲染进程

Electron 应用分为主进程和渲染进程。渲染进程是直接与用户产生交互的进程，也就是我们看到的一个个窗口页面，而主进程主要负责控制应用的生命周期，负责各个渲染进程的通信等。

我们的主进程代码写在 main.js 中，所以首先在你心爱的代码编辑中打开 main.js，输入如下代码：

const path = require('path');
const url = require('url');
const {
  app,
  BrowserWindow
} = require('electron');

app.on('ready', () => {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      devTools: true
    }
  });

  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    })
  );
});

app.on('window-all-closed', () => app.quit());

再打开 index.html，输入如下代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>

<body>
  <h1>Hello World!</h1>
</body>

</html>

之后执行

# 目录 d/workspace/electron-demo
node_modules/.bin/electron .

不出意外的话你会看到一个弹出框，像这样：

我们也可以把 node_modules/.bin/electron . 保存成 npm 脚本，方便以后调用。打开 package.json，添加如下内容：

 "scripts": {
  "start": "electron ."
 }

以后只需要调用 npm start 即可。

到这里，我们已经有了一个最简单的 Electron 应用，如果你对继续开发应用本身更感兴趣的话，请移步Electron 官方文档，因为接下来我们会专注在怎么让这个应用实现自动更新。

自动更新

安装依赖

自动更新功能的实现依赖 electron-builder 和 electron-updater，所以我们需要先安装这两个依赖。

# 目录 d/workspace/electron-demo
npm i electron-builder --save-dev # 必须安装为开发依赖，否则打包会出错
npm i electron-updater --save # 必须安装为运行依赖，否则运行会出错

配置 package.json

为了配合打包 package.json 需要新增字段 build：

 "build": {
  "appId": "com.xxx.app",
  "publish": [
   {
    "provider": "generic",
    "url": "http://127.0.0.1:8080"
   }
  ]
 },

同样为了执行方便，我们需要添加一个 npm 脚本，打开 package.json，添加如下内容：

 "scripts": {
  "start": "electron .",
  "build": "electron-builder -w"
 }

以后只需要调用 npm run build 即可。

主进程和渲染进程

打开main.js，编辑后内容如下：

const path = require('path');
const url = require('url');
const {
  app,
  BrowserWindow,
  ipcMain
} = require('electron');
const { autoUpdater } = require('electron-updater');
const feedUrl = `http://127.0.0.1:8080/${process.platform}`;

let webContents;

let createWindow = () => {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      devTools: true
    }
  });

  webContents = win.webContents;

  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'src/index.html'),
      protocol: 'file:',
      slashes: true
    })
  );

  webContents.openDevTools();
};

let sendUpdateMessage = (message, data) => {
  webContents.send('message', { message, data });
};

let checkForUpdates = () => {
  autoUpdater.setFeedURL(feedUrl);

  autoUpdater.on('error', function (message) {
    sendUpdateMessage('error', message)
  });
  autoUpdater.on('checking-for-update', function (message) {
    sendUpdateMessage('checking-for-update', message)
  });
  autoUpdater.on('update-available', function (message) {
    sendUpdateMessage('update-available', message)
  });
  autoUpdater.on('update-not-available', function (message) {
    sendUpdateMessage('update-not-available', message)
  });

  // 更新下载进度事件
  autoUpdater.on('download-progress', function (progressObj) {
    sendUpdateMessage('downloadProgress', progressObj)
  })
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
    ipcMain.on('updateNow', (e, arg) => {
      //some code here to handle event
      autoUpdater.quitAndInstall();
    })
    sendUpdateMessage('isUpdateNow');
  });

  //执行自动更新检查
  autoUpdater.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>Hello World!</title>
</head>

<body>
  <h1>Hello World!</h1>
  <script>
    const { ipcRenderer } = require('electron');

    ipcRenderer.on('message', (event, { message, data }) => {
      console.log(message, data);
      switch (message) {
        case 'isUpdateNow':
          if (confirm('现在更新？')) {
            ipcRenderer.send('updateNow');
          }
          break;
        default:
          document.querySelector('h1').innerHTML = message;
          break;
      }
    });
  </script>
</body>

</html>

打包

npm run build

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

|- dist
 |- win-unpacked
 |- electron-autoupdate-scaffold Setup.exe
 |- electron-autoupdate-scaffold Setup.exe.blockmap
 |- electron-builder-effective-config.yaml
 |- latest.yml

win-unpacked 下是可执行文件，但是先别着急运行，我们还缺一个后台。

自动更新后台

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

const feedUrl = `http://127.0.0.1:8080/${process.platform}`;

所以我们现在要做的就是一个可以接受这个请求的服务。

回到你的工作目录（d/workspace）

# 目录 d/workspace
mkdir electron-server
cd electron-server
npm init
npm i koa --save
npm i koa-static --save
touch server.js

打开 server.js，输入如下内容：

// server.js
let Koa = require('koa');
let app = new Koa();
let path = require('path');

app.use(require('koa-static')(path.resolve(__dirname + '/packages')));

let server = app.listen(8080, () => {
  let { address, port } = server.address();

  console.log("应用实例，访问地址为 http://%s:%s", address, port);
});

将之前打包出来的 dist 目录下的 4 个文件（除了 win-unpacked）拷贝到这边的 packages/win32 下（新建目录 packages/win32），之后

# 目录 d/workspace/electron-server
npm start

到此为止，我们的自动更新服务就搭建完成了，现在来一波测试吧。

测试

进入 electron-demo/dist/win-unpacked 找到可执行文件，双击运行，看到打开窗口的控制台中依次输出：

checking-for-update
update-not-available

进入 electron-demo，打开 package.json，把版本号改为0.0.2，重新打包后拷贝打包文件到自动更新后台目录(d/workspace/electron-server/packages/win32)。

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

checking-for-update
update-available

并且出现弹窗提示「现在更新？」。

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

如何使用electron-builder及electron-updater给项目配置自动更新

说明: 本文的自动更新功能使用的项目为 electron-vue 脚手架搭建一个默认项目. 参考的文章如下: electron-vue 中文文档 electron-builder 文档 Windows 下支持自动更新的 Electron 应用脚手架 Electron 文档 Docs / API / autoUpdater 开始:新建一个 electron 项目首先你得有一个需要配置自动更新功能的 electron 项目.这里我为了测试自动更新功能是否成功搭建使用的是 electron-vue
Windows下支持自动更新的Electron应用脚手架的方法

前言之前写过一篇关于 Windows 下通过 Electron 自带的 autoUpdater 实现应用自动更新的文章,很多小伙伴私信问我要具体实现代码,不过因为之前一直很忙(还有懒...). 这两周正好周末比较空,除了在 github 上搭建了一个脚手架,还顺便把实现优化了一波,下面将会带着大家从零开始详细介绍实现过程,对小白也很友好的教程哦. 从零开始进入你的工作目录,比如 d/workspace # 目录 d/workspace mkdir electron-demo # 新建文件夹
Windows下安装Redis及使用Python操作Redis的方法

首先说一下在Windows下安装Redis,安装包可以在https://github.com/MSOpenTech/redis/releases中找到,可以下载msi安装文件,也可以下载zip的压缩文件. 下载zip文件之后解压,解压后是这些文件: 里面这个Windows Service Documentation.docx是一个文档,里面有安装指导和使用方法. 也可以直接下载msi安装文件,直接安装,安装之后的安装目录中也是这些文件,可以对redis进行相关的配置. 安装完成之后可以对redi
解析windows下使用命令的方式安装mysql5.7的方法

解压zip压缩包,创建my.ini文件内容如下这里注意一下sql_mode 这里写的是让MySQL使用习惯类似Oracle,具体哪些什么意思大家很容易百度查到 [mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] sql_mode='NO_AUTO_VALUE_ON_ZERO,STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO
Windows下将Python文件打包成.EXE可执行文件的方法

在使用Python做开发的时候,时不时会给自己编写了一些小工具辅助自己的工作,但是由于开发依赖环境问题,多数只能在自己电脑上运行,拿到其它电脑后就没法运行了.这显得很不方便,不符合我们的初衷,那么有没有一种什么办法可以使我们编写好的程序,可以直接在各种windows下运行的呢? 答案是:有的,说到windows大家都能想到( .exe )这个东西吧!没错,就是把Python编写的代码打包成可执行的 exe 文件,直接在系统上运行,这个问题不久完美解决了吗? 下面就来讲讲如何实现,具体如下: 安装
Windows下CMD执行Go出现中文乱码的解决方法

在cmd下运行go程序或者是GOLAND的Terminal下运行go程序会出现中文乱码的情况. go run ttypemain.go �� Ping [127.0.0.1] �� 32 �ֽڵ��:�� 127.0.0.1 �Ļظ�: �ֽ�=32 ʱ��<1ms TTL=128�� 127.0.0.1 �Ļظ�: �ֽ�=32 ʱ��<1ms TTL=128�� 127.0.0.1 �Ļظ�: �ֽ�=32 ʱ��<1ms TTL=128�� 127.
python在windows下实现ping操作并接收返回信息的方法

本文实例讲述了python在windows下实现ping操作并接收返回信息的方法.分享给大家供大家参考.具体分析如下: 这段python代码调用windows下的ping命令,通过subprocess在其子进程里面实现,由于windows下的ping和linux下的ping返回的消息不太一样,所以这段python代码要想在linux下运行,需要修改一下正则匹配复制代码代码如下: import subprocess import re p = subprocess.Popen(["ping
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法

本文实例讲述了PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法.分享给大家供大家参考,具体如下: 1.php mail()函数在windows不能用,需要安装sendmail. 2.从http://glob.com.au/sendmail/ 下载sendmail组件 3.解压sendmail.zip到目录下,我安装的路径是: F:\root\sendMail 4.配置php.ini,主要配置以下3项 5.修改 sendmail.ini,文件路径:F:\root
Android编程实现应用自动更新、下载、安装的方法

本文实例讲述了Android编程实现应用自动更新.下载.安装的方法.分享给大家供大家参考,具体如下: 我们看到很多Android应用都具有自动更新功能,用户一键就可以完成软件的升级更新.得益于Android系统的软件包管理和安装机制,这一功能实现起来相当简单,下面我们就来实践一下. 1. 准备知识在AndroidManifest.xml里定义了每个Android apk的版本标识: <manifest xmlns:android="http://schemas.android.com/a
windows下上传shell脚本不能运行的解决方法

windows下上传shell脚本至linux,其格式将为dos.dos模式的shell脚本将不能再linux下正确运行,需要修改文件模式为unix. 1 查看文件模式方法 linux服务器上,用vi编辑器打开shell脚本,随后进入命令行模式,输入"set ff",即可查看文件模式. 查看文件指令: 显示的文件格式: 2 修改文件模式的方法在命令行模式下,输入"set ff=unix",即可将dos模式修改为unix模式. 修改文件模式命令: 查看修改后的文件模
Electron autoUpdater实现Windows安装包自动更新的方法

前言 Electron帮助我们突破浏览器的界限,通过Electron构建的桌面应用拥有各种浏览器应用梦寐以求的能力. Electron提供的autoUpdater还可以帮助我们实现桌面应用的自动更新. 文件结构首先,我们已经有了一个基于Electron做的应用,项目中有两个package.json.这样做的一个原因是将devDependencies和dependencies分开了,另外就是不需要在打包的时候再去指定哪些依赖不需要一起打到安装包里面去了(通过ignore参数). 目录结构类似于这

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

相关推荐

随机推荐