首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Electron实现应用更新的坑及路径的最佳实践

Electron实现应用更新的坑及路径的最佳实践

作者头像
码客说
发布于 2022-03-09 01:08:00
发布于 2022-03-09 01:08:00
1.4K00
代码可运行
举报
文章被收录于专栏:码客码客
运行总次数:0
代码可运行

前言

应用内更新的逻辑是,应用内检测受否需要更新,如果需要更新,安装包下载到本地后,进行打开安装,同时关闭当前应用。

旧版本的API

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const {shell} = window.require("electron");
shell.openItem(filepath);

旧版本是没有问题的。

新版本变更为

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const {shell} = window.require("electron");
shell.openPath(filepath);

但是这样就出现问题了,新版本打开是在子进程中,安装应用安装包时,应用进程是必须要关闭,如果应用进程关闭,安装包对应的子进程也会关闭,导致安装终止。

node-cmd

所以只能更换一种方式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install node-cmd -s

在Electron中

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const cmd = window.require('node-cmd');
cmd.run('start "" "' + filepath + '"');

注意启动应用应该这样

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
start "" "D:\Project\myapp.exe"

注意

  1. 路径要添加双引号,否则路径中有空格就无法打开应用。
  2. start命令后要添加"",否则打不开应用,第一个参数会被当做标题,第二个才是文件路径。

node-cmd简介

node-cmd模块中主要有run和get两类命令,其中run是执行cmd命令,get命令除了异步执行cmd命令外,在执行完毕后还会执行回调函数,返回命令行窗口的输出。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var cmd = require('node-cmd');

cmd.run('touch example.created.file');

cmd.get(
  'ls',
  function(data){
    console.log('the current dir contains these files :\n\n',data)
  }
);

完整示例

完整的下载应用代码示例:

渲染进程中

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const path = window.require("path");
const {app} = window.require("electron").remote;
const cmd = window.require('node-cmd');

async update_app_action() {
  let versionpath = this.version_obj["versionpath"];
  let versioncode = this.version_obj["versioncode"];
  let file_url = `${filedownloadUrl}${versionpath}`;
  let temp_path = remote.getGlobal("sharedObject").temp_path;
  try {
    if (!fs.existsSync(temp_path)) {
      fs.mkdirSync(temp_path, {recursive: true});
    }
  } catch (e) {
  }
  let filename = versioncode + "_" + versionpath.substring(versionpath.lastIndexOf("/") + 1);
  let temp_filename = "temp_" + filename;

  const filepath = path.join(
    temp_path,
    filename
  );

  const temp_filepath = path.join(
    temp_path,
    temp_filename
  );
  //文件存在直接打开
  if (fs.existsSync(filepath)) {
    cmd.run('start "" "' + filepath + '"');
  } else {
    // 不存在下载后打开
    if (fs.existsSync(temp_filepath)) {
      fs.unlinkSync(temp_filepath);
    }
    this.version_down = true;
    try {
      await this.download_file(file_url, temp_filepath);
      this.version_down = false;
      this.version_flag = false;
      fs.renameSync(temp_filepath, filepath)
      cmd.run('start "" "' + filepath + '"');
    } catch (e) {
      console.info("更新失败!")
    }
  }
}

download_file(file_url, path) {
  return new Promise((resolve, reject)=>{
    const url = require("url");
    const {http, https} = require("follow-redirects");
    let myhttp = http;
    if (file_url.indexOf("https:") !== -1) {
      myhttp = https;
    }
    const options = url.parse(file_url);
    let filldiv = document.getElementById("filldiv");
    try {
      const request = myhttp.request(options, (response)=>{
        const file_length = response.headers["content-length"];
        let downd_length = 0;
        let m_stream = fs.createWriteStream(path);
        response.on("data", (chunk)=>{
          downd_length += chunk.length;
          let down_progress = Math.ceil((downd_length * 100) / file_length);
          this.version_progress = down_progress;
          filldiv.style.width = down_progress * 4 + "px";
          //filldiv添加一个随机背景颜色
          filldiv.style.background = "#33C5B3";
          m_stream.write(chunk);
        });
        response.on("end", function() {
          m_stream.end();
          m_stream.on('close', ()=>{
            resolve(path);
          })
        });
      });
      request.end();
    } catch (e) {
      reject("下载失败!");
    }
  })
},

Electron路径最佳实践

如果渲染进程太多,不建议在渲染进程中获取路径,建议在主进程中设置。

主进程

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const {app} = require("electron");
const path = require("path");
const fs = require("fs");

global.sharedObject = {
  temp_path: "",
}

let basepath = "";

try {
  basepath = app.getPath("downloads");
} catch (e) {
  basepath = path.dirname(app.getPath("exe"));
}

if (/.*[\u4e00-\u9fa5 ]+.*$/.test(basepath)) {
  basepath = "C:\\";
}

let temp_path = path.join(
  basepath,
  "school_live_temp"
)

try {
  if (!fs.existsSync(temp_path)) {
    fs.mkdirSync(temp_path, {recursive: true});
  }
} catch (e) {
}

console.info("temp_path", temp_path);
global.sharedObject.temp_path = temp_path;

注意

在有些电脑上竟然无法使用app.getPath("downloads")获取路径,所以这里进行异常捕获。 有些电脑用户名是中文,而某些SDK不支持路径中包含中文和空格,这里也做了判断。

渲染进程

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const remote = window.require("electron").remote;
let temp_path = remote.getGlobal("sharedObject").temp_path;
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-03-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Electron+Vue开发爬虫客户端2-自动下载网页文件
插件官网地址: https://nklayman.github.io/vue-cli-plugin-electron-builder/
码客说
2021/01/12
3.4K0
Electron+Vue使用Nodejs开发爬虫
String - You can request the following paths by the name:
码客说
2020/11/13
1.7K0
NodeJS日志记录(Electron项目)
electron-log supports the following log levels:
码客说
2021/07/07
3.2K0
Electron启程
Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个 Node. js 的变体,它专注于桌面应用而不是 Web 服务器端。
码客说
2019/10/21
5.9K1
electron开发技术知识点笔记
GYP是一种构建自动化工具。node程序中需要调用一些其他语言编写的 工具 甚至是dll,需要先编译一下,否则就会有跨平台的问题,例如在windows上运行的软件copy到mac上就不能用了,但是如果源码支持,编译一下,在mac上还是可以用的。node-gyp在较新的Node版本中都是自带的(平台相关),用来编译原生C++模块。
huahuadavids
2022/10/21
1.6K0
Electron各版本API变更及版本升级报错汇总
每个版本都有废弃和移除的API,废弃的依旧可以用,所以这里只列一些常用的被移除的API及对应的替换方法。
码客说
2021/09/30
1.9K0
记录一次electron踩坑
vue引入electron的ipcRenderer等其它模块会出现这种情况 解决方案 自定义事件 使用渲染进程捕捉
代码哈士奇
2021/01/26
1.8K0
记录一次electron踩坑
Electron实践笔记
社交魔方平台是京东的 SNS 活动搭建平台,其内置了很多模板,每一个模板都有一个模板 JSON 用于生成表单,运营同学、商家配置了这个表单后就可以生成活动页面了。模板 JSON 是标准的结构化数据,包含名称、类型、控件类型、校验器、默认值等等字段。以往都是采用手写 JSON 的方式,这是非常低效的,而且容易出错。针对其结构化数据的特点可以用 GUI 的方式去编辑,我们基于 Electron[1] 参考 Github Desktop 客户端[2] 的架构编写了一个 JSON 编辑器(参见下图),通过填写表单的方式生成 JSON。所以在这里记录下这个 Electron 编辑器开发过程中可以记录的点和从 Github Desktop 客户端代码中值得学习的点。
前端迷
2019/10/22
1.2K0
预加载脚本 | Electron 安全
相信看了前面的文章,大家对于预加载脚本已经非常了解了,对于之前篇章中已经测试并解释清楚的部分,不会再次详细解释
意大利的猫
2024/04/22
8650
预加载脚本 | Electron 安全
Electron中excel读取
https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.16.0/math.min.js
码客说
2022/10/04
1.8K0
Electron实现在线升级 热更新 遇到的问题
一个项目正式交付客户使用了,对于版本的升级和代码更新是个一直困扰的问题,由于之前一直都是内部人员使用,可以让他们每次都下载完整压缩包(压缩后大概 40-50MB),但对于正式的终端用户,这个体验是不可接受。 参考过 Electron 官方文档,里面提及的方案兼容性并不好(Linux 不支持),需要准备的东西不少,而且交互上也不满意;本文介绍方案的细节及中间遇到的一些坑。
javascript.shop
2019/09/04
4.8K1
Electron实现在线升级 热更新 遇到的问题
我的第一个Electron应用
hello,好久不见,最近笔者花了几天时间入门Electron,然后做了一个非常简单的应用,本文就来给各位分享一下过程,Electron大佬请随意~
街角小林
2023/05/31
1.6K0
我的第一个Electron应用
如何为Electron应用实现一个简易的更新功能
官方其实已经提供了几种很便捷的方案:https://www.electronjs.org/docs/tutorial/updates 但是不是需要github,就是需要搭建一个服务端,因为我们的场景很小,electron只是一个壳,所以更新的需求不强烈,只是一个以防万一的功能,所以我们想寻求一个简单的方式来处理。
BennuCTech
2022/11/11
1.7K0
解决Electron安装报错问题
Electron是一个优秀的跨平台桌面端应用的框架,官网给出的简绍很简单:使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用。好多朋友也想试试使用前端技术来做一个桌面应用,但是往往在安装的时候就直接报错了,大多数的错误是:
kai666666
2020/10/19
8.2K1
解决Electron安装报错问题
electron+vue从0到1实现一个桌面端日期时间倒计时软件实践(持续更新)
我正在参加跨端技术专题征文活动,详情查看:juejin.cn/post/710123…
十里青山
2022/08/22
1.7K0
electron+vue从0到1实现一个桌面端日期时间倒计时软件实践(持续更新)
electron开发客户端注意事项
electron分主进程和渲染进程,渲染进程又分主窗口的渲染进程和子窗口的渲染进程
liulun
2019/05/25
2.4K3
Electron加载插件支持Flash
https://www.slimjet.com/chrome/google-chrome-old-version.php
码客说
2022/03/24
4.3K1
Electron加载插件支持Flash
创建发布一个cli工具
执行kun create hellow,打印name: hellow。 现在支持 kun create <name>,kun -V,而且action中可以执行一下操作,并且能得到用户传入的参数。 6.安装 chalk.js 控制台粉笔工具,方便改变打印的颜色
刘嘿哈
2022/10/25
2.5K0
客户端开发(Electron)数据存储
Dear,大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 前言: 数据存储在应用开发中也是必不可少的一块功能,在Electron开发中支持将数据持久
前端小鑫同学
2022/12/26
3.3K0
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js
本次看到了小影很好看,但是目前看了稍微有些知名的平台都是vue,毕竟vue超过普通html+css性能太多了,vue的渲染机制决定的,请注意奥我们python开发的落地页修改下只是临时用,并且赠送给客户,python使用一定要注意合法合规!!
卓伊凡
2025/02/14
1630
相关推荐
Electron+Vue开发爬虫客户端2-自动下载网页文件
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档