electron踩坑系列之一

分类：Electron作者：编程之家用户

前言

以electron作为基础框架，已经开发两个项目了。第一个项目，我主要负责用react写页面，第二项目既负责electron部分+UI部分。

做项目，就是踩坑， 一路做项目，一路踩坑，坑多不可怕，就怕忘记坑。

坑前准备

项目模板

开发，当然就需要搭建项目，搭建项目github上有不少模板。

你可以去 awesome-electron 的 boilerplates部分看到比较流行的模板。
比如：
electron-react-boilerplate
electron-vue
electron-quick-start
electron-boilerplate

用模板相当于上高速，嗖嗖的飞起，不错的选择。
这些模板基本都是把静态页面和electron部分的开发，集成到一个项目里面，有利有弊。

我们项目采用的是分离式的：
electron部分： 负责提供能力，比如读写文件，操作注册表，启动和挂关闭第三方程序，网络拦截，托盘等
UI部分： 绘制页面，必要的时候调用electron封装的能力。

到这里， electron部分与UI部分的交互，我们打开窗体的时候，
nodeIntegration是设置为false的，所有的通讯都是通过一个所谓的bridge来连接的。

bridge通过preload的属性注入，起到了一定的隔离。

我们项目均采用TS开发
前后端两个项目都是基于TS开发，好处不用说。
问题在于，如何将bridge部分友好的提供给UI部分。
也很简单，typescript 编译的时候，其实有一个declaration的选项。
基于bridge单独起一个配置文件，里面仅仅include需要的文件，执行build的，再拷贝到UI项目里面，UI项目就能得到友好的提示。

主进程和渲染进程的通讯

electron-better-ipc 是不错的选择，原理就是利用EventEmitter的once特性，内部的每次通讯都是一个新的事件类型。
对于超时和错误捕捉，主向多个渲染进程发消息，都还得自己去增强。

我们是自己维护了一个调用信息, 发送的数据有一个key来标识，目前看来，还算稳定。

日志

electron-log是不错的选择，简简单单的就能记录主进程和渲染进程的日志。
但是不能记录node唤起的子进程的日志，真要想记录，子进程单独通知到外面，外面记录。或者单独自己弄一个写子进程的日志也没问题的。

日志多了肯定不行，就会有日志轮转。目前这个库，好像有一个简单粗暴的轮转策略，肯定是不够用的。

具体的可以到File transport

function archiveLog(file) {
  file = file.toString();
  const info = path.parse(file);

  try {
    fs.renameSync(file, path.join(info.dir, info.name + '.old' + info.ext));
  } catch (e) {
    console.warn('Could not rotate log', e);
  }
}

我这里就贴一段基本可用的， deleteFiles自定去实现，你可以保留几个文件，保留几天的文件，都是可以的。

// 50M
log.transports.file.maxSize = 50 * 1024 * 1024;

log.transports.file.archiveLog = function archiveLog(file: string) {
    file = file.toString();
    const info = path.parse(file);

    try {
        // 重命名
        const dateStr = getDateStr();

        const newFileName = path.join(info.dir, `${info.name}.${dateStr}${info.ext}`);

        console.log("archiveLog", file, newFileName);

        fs.renameSync(file, newFileName);

        // 删除旧文件
        deleteFiles(info.dir)
    } catch (e) {
        console.error('Could not rotate log', e);
    }
}

持久化的数据

electron-store 很不错。

我们采用的是内存数据 + config.json的模式，实际上本质没变。
如果是窗体之间的页面之间要共享数据，其实用localStorage和sessionStorage,indexedDB都是不错的选择。

入坑和填坑

原生模块.node结尾的文件引用报错

build时指定electron版本，headers头文件路径
https://www.electronjs.org/docs/tutorial/using-native-node-modules

这个官方是有很明确的指出来的

开发时正常，打包后提示，cannot find moudule "xxxx"

使用npm 安装，不用cnpm。
这是和不同的安装方式，文件目录结构不一致。
当然开发的时候，你是可以使用cnpm或者yarn的。
我没有尝试使用打包做一些修改让cnpm有效，你们要是知道，可以留言告诉我哈。

the specified module could not be found. "................\xxxx.node"

这个和上面那个有点类似，但是又不一样的。 下面这种情况可能是.node模块需要引用一些dll文件，却没有。比如常见的msvcr120.dll,msvcr110.dll,msvcp120.dll,msvcp110.dll这些文件，你把这些放到.node的同级目录。至于怎么区分32位和64位，哈哈，我知道您懂。

The specified module could not be found.

AppData\Local\Temp\xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.tmp.node

https://stackoverflow.com/questions/41253450/error-the-specified-module-could-not-be-found
有提到大致的原生就是 .node缺少一些dll库。可以使用 http://www.dependencywalker.com/ 检查缺少啥

我做了四种尝试：

  • 安装 visual-c 组件 failed
  • 复制dll到asar同目录 failed
  • electron-builder 设置asar为false ok
  • C++模块文件夹移动asar包体外 ok

后两种是有效的，而且这个问题可能只出现在某些机器上。某些机器是正确的，某些机器却不正确。

electron-builder 打包后卸载或者更改程序中的发布者名称问题

首先说这个发布者是哪个字段，其实是package.json里面的author字段的name属性，当然可以有多种写法。

如果的你名字类似 牛潮(北京)有限公司，那么你打包出来就只会剩下 牛潮两个字，是不是有一些神奇。

这个其实是 electron-builder库packages\app-builder-lib\src\util\normalizePackageData.ts 或者额是 normalize-package-data库做了一些操作。
unParsePerson之后再parsePerson，英文括弧后面的东西就没了。怎么办，我现在是手动找到修改一下。

  function fixPeople(data: any) {
    modifyPeople(data, unParsePerson)
    modifyPeople(data, parsePerson)
  },

function unParsePerson (person) {
  if (typeof person === "string") return person
  var name = person.name || ""
  var u = person.url || person.web
  var url = u ? (" ("+u+")") : ""
  var e = person.email || person.mail
  var email = e ? (" <"+e+">") : ""
  return name+email+url
}

function parsePerson (person) {
  console.log("parsePerson person", person)
  if (typeof person !== "string") return person
  var name = person.match(/^([^\(<]+)/)
  var url = person.match(/\(([^\)]+)\)/)
  var email = person.match(/<([^>]+)>/)
  var obj = {}
  if (name && name[0].trim()) obj.name = name[0].trim()
  if (email) obj.email = email[1];
  if (url) obj.url = url[1];
  return obj
}

electron-builder打包签名问题

他这个打包可以签名，但是要你提供.pfx文件和密码。
这就有点老火了，公司的这两个东西一般不会轻易给你。
要么你们有统一的打包中心，那就没问题。
可惜我们公司只有统一的签名中心，签名之后，exe文件是有变化的，比如大小和最后修改时间，这就会导致更新的时候，检查hash值会失败。

问题不大：

  1. 我们先到electron-buider的源码里面packages\app-builder-lib\src\util\hash.ts找到hash值生成的方法，这个hash值会被写入latest.yml文件里面
  2. 本地打包好exe
  3. 去签名中心签名，并覆盖本地的exe
  4. 用hash.ts相同的方式再计算得到hash值
  5. 回写这些值到latest.yml文件

基本就是这样啦。

这里送一段基本能用的代码吧：


import { createHash } from "crypto"
import { createReadStream, statSync , readFileSync, writeFileSync } from "fs"
import path from "path";
import YAML from "yaml";

const jsonConfig = require("../package.json");
const version = jsonConfig.version;


const exeFilePath = path.join(__dirname, `../packages/${version}.exe`);
const yamlFilePath = path.join(__dirname, "../packages/latest.yml");
const jsFilePath = path.join(__dirname, "../packages/latest.js");

const bakYamlFilePath =  path.join(__dirname, `../packages/latest.bak.yml`);

// packages\app-builder-lib\src\util\hash.ts
function hashFile(file: string, algorithm = "sha512", encoding: "base64" | "hex" = "base64", options?: any): Promise<string> {
    return new Promise<string>((resolve, reject) => {
      const hash = createHash(algorithm)
      hash.on("error", reject).setEncoding(encoding)
  
      createReadStream(file, { ...options, highWaterMark: 1024 * 1024 /* better to use more memory but hash faster */ })
        .on("error", reject)
        .on("end", () => {
          hash.end()
          resolve(hash.read() as string)
        })
        .pipe(hash, { end: false })
    })
}

function getFileSize(path: string){
    const state = statSync(path);
    return state.size;
}


function getYAML(path: string){
  const file = readFileSync(path, 'utf8')
  const data = YAML.parse(file);
  return data;
}

function saveYAML(path:string, content: any){
  writeFileSync(path,  YAML.stringify(content))
}

function saveJS(path:string, content: string){
  writeFileSync(path,  content)
}


;(async function updateLatestYML(){
  try{
    const hash = await hashFile(exeFilePath);
    const size = getFileSize(exeFilePath);

    console.log("hash:", hash);
    console.log("size:", size);

    const yamlData = getYAML(yamlFilePath);
    saveYAML(bakYamlFilePath, yamlData);
    console.log("yamlData:before", yamlData);


    const name = `${version}.exe`

    yamlData.version = version;
    const file = yamlData.files[0];
    file.url = name;
    file.sha512 = hash;
    file.size = size;

    yamlData.path = name;
    yamlData.sha512 = hash;

    console.log("yamlData:after", yamlData);
    saveYAML(yamlFilePath, yamlData);

    saveJS(jsFilePath, `window._lastest=${JSON.stringify(yamlData)}`);

  }catch(err){
    console.log("update latest.yml 失败", err);
  }
})();

本地测试electron-updater的问题

https://www.electron.build/auto-update#debugging
https://stackoverflow.com/questions/51003995/how-can-i-test-electron-builder-auto-update-flow
https://github.com/electron-userland/electron-builder/issues/3053#issuecomment-401001573
虽然官方建议单独使用一个啥server来着，总让人觉得有点复杂，其实还是可以直接在开发中测试的。

  1. 复制 resources\app-update.yml，重名命令dev-app-update.yml
  2. build时复制到dist目录

代码层面做一点小修改

function checkUpdate() {
    // 开发环境
    if(!app.isPackaged){
        return autoUpdater.checkForUpdates();
    }
    return autoUpdater.checkForUpdatesAndNotify();
}

这里还要额外注意

  1. 版本检查的是electron的版本，所以latest.yml的版本要大
  2. 缓存的默认目录为 %localappdata%/{默认是package.json里面name}-updater/pending，和electron-builder里面的是指有关

404返回的页面不会触发did-fail-load

你想想，我们很多时候打开的是远程的网页地址。 如果返回的状态码是404，明显不是我们想要的，如果我们依据did-fail-load事件去判断，是否加载失败，当然是不满足我们的需求的。

我们需要在远程加载失败的时候，使用本地的默认页面去给用户一些提示信息，以及可以关闭窗体。

这个时候就要did-frame-navigate出场，根据httpResponseCode的状态去使用本地备用页面了。

 win.webContents.on("did-frame-navigate",  (event: Electron.Event, url: string, httpResponseCode: number, httpStatusText: string, isMainFrame: boolean, frameProcessId: number, frameRoutingId: number) =>{
            console.log("did-frame-navigate", httpResponseCode, httpStatusText);
            if(httpResponseCode >= 400 && !this.isUsedFailedPage){
               return this.useFailedPage();
            }
        });

结语

到这里，老板已经走到我的身后，我默默的说，我总结一下问题。
老板说： 好样子的，不过你为嘛在上班时间写博客。
我： 流汗，各位，拜。

其他

electron-util 工具类
electron-router

原文地址：https://www.cnblogs.com/cloud-/p/14623127.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

electron打包中的坑如何解决
这篇文章主要讲解了“electron打包中的坑如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“electron...
electron打包的坑如何解决
这篇文章主要介绍“electron打包的坑如何解决”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“electron打包的坑如何...
VSCode中如何调试Electron应用的主进程代码
这篇文章主要为大家分析了VSCode中如何调试Electron应用的主进程代码的相关知识点，内容详细易懂，操作细节合理，具有一定参考价值。如果感兴趣的话，不妨跟着跟...
如何在VSCode上调试Electron应用的主进程代码
这篇“如何在VSCode上调试Electron应用的主进程代码”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价
使用electron-vue搭建桌面应用程序项目
vue-cli+electron一种新的脚手架(vue-electron)vue-electron主要业务逻辑都放在src下的renderer文件夹内，和之前的vue-cli搭建项目流程没有任何区别 GIT地址：https://github.com/SimulatedGREG/electron-vue 搭建项目：1.全局安装脚手架：npminstall--globalvue-cli
electron安装
1、首先成功安装Node.js。2、配置好环境变量path,参加上一篇博客《NodeJs安装》3、全局安装electron，并测试。如下图
为Electron 安装 vue-devtool等扩展
相关代码:https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js在SPA逐渐成为构建优秀交互体验应用的主流方式后，使用Electron开发跨平台的软件是一个优秀的解决方案。下面简单介绍一下Electron-vue安装vue-devtool的方式。安装步骤下载vue-de
Electron学习一——— electron的基础创建
前言本人是做java开发的（菜鸟），做web项目的朋友们基本上都会遇到同样一个，永远不知道客户会怎么样使用，或者说永远不知道客户会用什么浏览器打开我们做出来的应用，就算你跟他说明了一定得用某某某浏览器打开，还是有人会用别的浏览器打开，这种情况通常我们会去做适配（前端），最近公司有需求
electron-builder的使用初接触，有些含义不懂
electron-builder是将electron做的桌面应用打包成安装包的插件。一、安装使用yarn安装，使用npm安装的有问题（没有尝试），先安装yarn工具。npminstall-gyarn安装electron-builderyarnaddelectron-builder--save-dev二、配置在package.json 中配置"build":{
asar 如何解密加密？electron 的 asar 的具体用法
来源：https:/ewsn.net/say/electron-asar.html 在electron中，asar是个特殊的代码格式。asar包里面包含了程序猿编写的代码逻辑。默认情况下，这些代码逻辑，是放置在resource/app目录下面的，明文可见，这样的话，也就有了代码加密（asar打包）的需求 asar如何解密加密？electron的asar的
iview框架使用electron运行图标无法显示问题
 字体图标丢失问题解决方案 重新打包文件npmrunbuild再次运行electron 
electron-vue 图片加载失败后使用默认头像
<img:src="item.headUrl"alt=""class="contact-head":onerror="morenImage">data(){return{morenImage:'this.src="static/image/head.png"',//默认头像}}
electron-vue打包引用的图标不显示问题
在electron-vue中使用了字体图标，但是打包成.exe文件后图标不显示，路劲问题把字体图标放到static目录下就可以了，静态图片也一样我原来放在其它地方不行改到static目录就可以了
electron-vue 设置cookie
//设置登录cookiesetCookie(name,value){varDays=30;varexp=newDate();vardate=Math.round(exp.getTime()/1000)+Days*24*60*60;constcookie={url:this.webApi,name:name,value:value,e
Electron笔记
vue部分cnpminstall-gvue-clivueinitsimulatedgreg/electron-vuemy-projectelectron下载失败解决办法：单独设置electron为淘宝镜像，npmconfigsetelectron_mirrorhttps:/pm.taobao.org/mirrors/electron/yarnconfigsetelectron_mirrorhttps:/pm.taobao.org
electron打包分发
原始的方式打包下载对应的版本号的ReleaseElectron然后把对应的项目方便整理成这样的目录结构(Windows下)node_modules重新安装，不然可能启动失败把整文件夹给别人就可以了如果想改名子可以用改名工具rcedit应用程序打包成一个文件为了缓解windows路径名过长的问题（就
electron开发客户端注意事项兼开源个人知识管理工具“想学吗”
窗口间通信的问题electron窗口通信比nwjs要麻烦的多electron分主进程和渲染进程，渲染进程又分主窗口的渲染进程和子窗口的渲染进程主窗口的渲染进程给子窗口的渲染进程发消息1234567891011subWin.webContents.on('dom-ready', () => {    subWin.webCo
javascript – 具有下载属性的电子问题
按照上一个问题here,我有一个使用Electron平台和Javascript的桌面应用程序,我使用以下方法将HTML5画布转换为JPEG：<aid="download"download="Path.jpg">DownloadJPG</a>然后,functiondownload(){vardt=canvas.toDataURL('image/jpeg');this.href
Electron实现第一个应用 &quot;hello world&quot;
一.什么是Electron?它和NW.js的区别是什么？Electron是GitHub开发的桌面应用开发框架，它支持使用HTML、CSS、JavaScript来构建跨平台的桌面应用。Electron和NW.js(NW.js是什么可以百度下)的区别是：1.整合Chromium和Node.js的方式不同。在NW.js中，Chromium是直接被打补丁打进去
electron-vue 打开文件目录，打开文件夹，
1.打开父子模态创建，<button@click="showModalHandler">父子模态窗口</button>/enderer渲染器中主注册事件showModalHandler(){ipcRenderer.send("child-down-modal");}//主进程中触发事件/***父子模态窗口*/letchildDownModal;ipcMain.on(&#
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot