关于前端:Electron增量更新三

写 Electron 这个系列以来，还是有不少同学问了一些问题的，次要是针对于 electron 增量更新的，之前我写过增量更新（二），然而其 Windows 形式须要管理员权限包，不太优雅，且如果想要拖拽性能的话，因为权限问题，提权后的软件会禁止拖动（将内部文件拖入软件窗口会有一个禁止图标），那么这一期我会对增量更新进行一次比拟具体的阐明以及提供长期提权更新的计划供大家参考。

Mac 更新

有些同学问了 Mac 平台下的零碎如何增量更新的，实际上 Mac 下的 Electron 的 asar 文件是能够间接替换的，故下载替换后，开个定时器重启就行了。

Windows

其实咱们的桌面软件大都不须要管理员权限的（就是软件上带盾牌的），咱们发现很多软件都是在须要更新时会有一个弹窗呈现，你点击后会对其进行长期提权进行更新，本期的指标就是实现这种长期提权的性能进行增量更新。

更新问题

其实咱们增量更新有两个难点，要想实现得攻克这两个次要问题：

1. 什么时候须要 uac 提权？
2. 怎么解决 Electron 利用启动后 app.asar 被占用锁定的问题？

更新阐明

1. Windows 零碎是有不同的用户权限级别的，比方我是普通用户在批改 c 盘某些文件夹的文件时，会有一个弹窗让你应用管理员权限创立或批改等等，当软件被装置在 c 盘时，咱们就须要管理员权限来替换 app.asar 文件。
2. 对于锁定问题，在增量二中曾经阐明了一下，解决形式就是敞开咱们的 Electron 利用，而后再进行 app.asar 文件的替换。

更新步骤

1. 编写 bat 脚本，在脚本中执行 Electron 利用的敞开，app.asar文件的替换，重启 Electron 利用，而后将 bat 脚本打包成 exe 文件。
2. 下载 update.asar（更新版本的 app.asar），判断用户软件是否装置在 c 盘，是：应用 sudo-prompt 这个包长期提权执行下面的 exe，不是：能够不必提权，间接应用 node 的 exec 执行下面的 exe。

更新筹备

模仿申请什么的前两期更新曾经说了，点击这里增量更新（二），看看步骤，这里就不再多做阐明。

构建 exe

@echo off
taskkill /f /im %3
timeout /T 1 /NOBREAK
del /f /q /a %1\app.asar
move %2\update.asar %1
ren %1\update.asar app.asar
explorer.exe %4

简略解释一下吧，%1 和 %2 为运行脚本传入的参数，比方 update.bat aaa bbb，那么 %1 为 aaa，%2 为 bbb，下面咱们执行 exe 时传入的，
也就是 %1 为 resourcesPath（也就是咱们的 app.asar 所在目录），%2 为下载更新的 update.asar 所在目录，%3 为软件的过程名称 (可在工作管理器中查看)，%4 为软件的启动 exe。
这里的逻辑是 Electron 利用，暂停 1 秒钟，而后删除 app.asar，将 update.asar 挪动到 app.asar 目录下，重命名为 app.asar，启动 Electron 利用。
下载 Bat To Exe Converter 这个软件，将 update.bat 转换为 update.exe，具体操作请看后面两期的具体阐明。

比照上一期的咱们发现启动时没用 start 命令了，而是用的 explorer.exe，它是 Windows 零碎自带的程序管理器，这里的解决是打包的 Electron 利用不带有管理员权限，然而如果咱们提权后执行此 exe 启动 Electron 利用，咱们会发现此时 Electron 利用也具备了管理员权限，故须要应用 explorer.exe 降权启动。

sudo-prompt

装置 sudo-prompt，npm i sudo-prompt，sudo-prompt 这个包和 node 的 exec 命令差不多，执行时会有一个提权弹窗呈现，用户确认后会以管理员权限执行命令，新建 sudoPrompt.js:

var sudo = require('sudo-prompt')
var options = {name: 'Electron',}

export default (shell) => {return new Promise((resolve, reject) => {sudo.exec(shell, options, function(error, stdout, stderr) {if (error) {reject(error)
        console.log('error:' + error)
        return
      }
      resolve(stdout)
      console.log('stdout:' + stdout)
    })
  })
}

// npm i https://github.com/xuxingeren/sudo-prompt
"sudo-prompt": "git+https://github.com/xuxingeren/sudo-prompt.git",

留神：sudo-prompt 这个包很久没保护了，当初最新的还有一些问题，次要是带有中文门路会出错，原作者曾经敞开了提不了 pr，我这边解决了一下，应用的话能够 fork 我的分支来进行构建，地址

主过程更新解决

更新前的筹备以及渲染过程解决这里就略过了，请见后面两期内容

import downloadFile from './downloadFile'
import sudoPrompt from './sudoPrompt'
import {app} from 'electron'
const fse = require('fs-extra')
const path = require('path')
const AdmZip = require('adm-zip')
import log from '../config/log.js'

export default async (data) => {
  const resourcesPath = process.resourcesPath
  // 下载咱们下面打包好的更新 exe，我这里是放在 app.getPath('userData')下的，其余地位也可
  if (!fse.pathExistsSync(path.join(app.getPath('userData'), './update.exe'))) {
    await downloadFile({
      url: data.upDateExe,
      targetPath: app.getPath('userData')
    }).catch((err) => {console.log(err)
      log.info(err)
    })
  }
  // 提权的计划，这里简写了
  const downloads = app.getPath('downloads')
  // 下载 update.asar，解压（其实不必压缩也可）在零碎的下载目录
  downloadFile({url: data.upDateUrl, targetPath: downloads})
    .then(async (filePath) => {const zip = new AdmZip(filePath)
      zip.extractAllToAsync(downloads, true, (err) => {if (err) {console.error(err)
          return
        }
        fse.removeSync(filePath)
        // 这里能够增加判断，如果软件是装置在 c 盘应用 sudoPrompt 进行提权执行 update.exe，不是的话能够间接执行 update.exe
        // 长期提权运行 exe，exe 中敞开主过程，替换装置 c 盘中的 asar（提权是为了解决 c 盘，如果装置其余盘，能够间接用 node.exec 运行 exe 替换）// 因为提权后的 exe 关上 electron，导致其启动后也会是管理员权限，故需降权进行启动，explorer.exe
        sudoPrompt(
          `"${path.join(app.getPath('userData'),
            './update.exe'
          )}""${resourcesPath}" ${downloads} "${process.env.VUE_APP_PRODUCTNAME}.exe""${app.getPath('exe')}"`
        )
      })
    })
    .catch((err) => {log.info(err)
      console.log(err)
    })
}

手动调试的话你能够在 cmd 中执行 update.exe xxx xxx xxx xxx 传入对应更新的地址看执行是否胜利。

本系列更新只有利用周末和下班时间整顿，比拟多的内容的话更新会比较慢，心愿能对你有所帮忙，请多多 star 或点赞珍藏反对一下

本文地址：链接
本文 github 地址：链接