electron踩坑系列之一

時間 2021-04-07

標籤 vue node react git github web typescript npm json 後端欄目 React 简体版

原文原文鏈接

前言

以electron做爲基礎框架，已經開發兩個項目了。第一個項目，我主要負責用react寫頁面，第二項目既負責electron部分+UI部分。vue

作項目，就是踩坑，一路作項目，一路踩坑，坑多不可怕，就怕忘記坑。node

坑前準備

項目模板

開發，固然就須要搭建項目，搭建項目github上有很多模板。react

你能夠去 awesome-electron 的 boilerplates部分看到比較流行的模板。
好比：
electron-react-boilerplate
electron-vue
electron-quick-start
electron-boilerplategit

用模板至關於上高速，嗖嗖的飛起，不錯的選擇。
這些模板基本都是把靜態頁面和electron部分的開發，集成到一個項目裏面，有利有弊。github

咱們項目採用的是分離式的：
electron部分：負責提供能力，好比讀寫文件，操做註冊表，啓動和掛關閉第三方程序，網絡攔截，托盤等
UI部分：繪製頁面，必要的時候調用electron封裝的能力。web

到這裏， electron部分與UI部分的交互，咱們打開窗體的時候，
nodeIntegration是設置爲false的，全部的通信都是經過一個所謂的bridge來鏈接的。typescript

bridge經過preload的屬性注入，起到了必定的隔離。npm

咱們項目均採用TS開發
先後端兩個項目都是基於TS開發，好處不用說。
問題在於，如何將bridge部分友好的提供給UI部分。
也很簡單，typescript 編譯的時候，其實有一個declaration的選項。
基於bridge單獨起一個配置文件，裏面僅僅include須要的文件，執行build的，再拷貝到UI項目裏面，UI項目就能獲得友好的提示。json

主進程和渲染進程的通信

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都是不錯的選擇。

入坑和填坑

應用啓動頁面空白

簡單的排查順序
1.瀏覽器打開網頁地址
2.若是不能打開，查看網絡是否正常
3.網絡正常，ping域名
4.ping 不通, 說明域名有問題
5.打開 %appdata%, 查看日誌是否是有打開頁面超時的提示
6.關閉 360安全衛士，從新打開主播端

最後一條是關鍵哈。
不簽名，不過百的狀況下，升級啓動都極可能被360攔截。

原生模塊.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值會失敗。

問題不大：

咱們先到electron-buider的源碼裏面packages\app-builder-lib\src\util\hash.ts找到hash值生成的方法，這個hash值會被寫入latest.yml文件裏面
本地打包好exe
去簽名中心簽名，並覆蓋本地的exe
用hash.ts相同的方式再計算獲得hash值
回寫這些值到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來着，總讓人以爲有點複雜，其實仍是能夠直接在開發中測試的。

複製 resources\app-update.yml，重名命令dev-app-update.yml
build時複製到dist目錄

代碼層面作一點小修改

function checkUpdate() {
    // 開發環境
    if(!app.isPackaged){
        return autoUpdater.checkForUpdates();
    }
    return autoUpdater.checkForUpdatesAndNotify();
}

這裏還要額外注意

版本檢查的是electron的版本，因此latest.yml的版本要大
緩存的默認目錄爲 %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();
            }
        });

頁面ctrl + r會被刷新等

ctrl + r 刷新頁面
ctrl + shift + i 打開開發者工具

哈哈，要是不當心被用戶打開是否是有點搞笑了。

你能夠寫一個配置到配置文件，默認不容許打開，當須要去現場排查問題的時候，能夠打開。被打開確定有危險，可是方便調試。

我這裏作的頁面攔截

const BLACK_LIST = ["KeyI", "KeyR"];
function preventForceRefreshAndTool() {
    const env = process.env.ENV;
    console.log("process.env.ENV", process.env.ENV);
    if (env !== "prod") {
        return console.log("非產線環境，容許刷新和打開開發者工具");
    }

    window.addEventListener('keydown', (e: KeyboardEvent) => {
        const { ctrlKey, code, shiftKey } = e;

        console.log("keydown", e);
        // ctrl +  r
        // crtl + shift + i
        if (ctrlKey && shiftKey && BLACK_LIST.includes(code)) {
            console.log("globalShortcut：被阻止", ctrlKey, shiftKey, code);
            e.preventDefault();
        }
    
    }, false);
}

electron攔截

win.webContents.on('before-input-event', (event, input) => {
          console.log('before-input-event', input.control, input.shift, input.key)
          if (input.control && KEY_BLACK_LIST.includes(input.key.toUpperCase())) {
            event.preventDefault()
          }
     });