Vue进行Electron开发近期增补记录

继上一篇文章: 如何用Vue开发Electron桌面程序? 这篇就够了! - 简书 (jianshu.com)

这篇文章主要介绍

  • asar包的简单保护
  • 支持快捷键的使用
  • 菜单的动态修改
  • 日志功能

1. asar的包的使用

从上篇我们知道, asar包可以用7z的插件或者直接使用asar命令解压, 但是有时候我们不像让人解压直接看到我们的代码逻辑, 可以使用一个库来修改, 即asarmo

image.png

我也有幸贡献了代码, 将它的write方法修改成返回Promise对象, 方便进行同步操作, 比如打增量包
feat: make asarmor.write() return the Promise by klren0312 · Pull Request #10 · sleeyax/asarmor (github.com)

const { Asarmor, Trashify, FileCrash } = require('asarmor')
const { join } = require('path')
const AdmZip = require('adm-zip')
const pkg = require('./package.json')
exports.default = async ({ appOutDir, packager, outDir }) => {
  try {
    const asarPath = join(packager.getResourcesDir(appOutDir), 'app.asar')
    console.log(`applying asarmor protections to ${asarPath}`)
    const asarmor = new Asarmor(asarPath)
    asarmor.applyProtection(new FileCrash('background.js.LICENSE.txt'))
    asarmor.applyProtection(new Trashify(['.git', '.env']))
    await asarmor.write(asarPath)

    const targetPath = join(appOutDir, './resources')
    const zip = new AdmZip()
    zip.addLocalFolder(targetPath)
    const partUpdateFile = `update-win-${pkg.version}.zip`
    zip.writeZip(join(outDir, partUpdateFile))
  } catch (err) {
    console.error(err)
  }
}

asarmo库有以下几个功能(使用7z插件进行解压, 虽然都会报错, 但是只有第一种时无法将文件解压出来, 其他其实都已经解压出来了)

  1. 对压缩包中的指定文件进行损坏(一定是不会被调用的文件, 不然会使electron也无法访问, 导致无法运行)
    image.png
image.png
  1. 生成大量随机文件填充压缩包, 解压的时候阻塞解压(可以指定文件的体积, 例如10G, 则解压时会进行10G文件解压), 但是这样似乎不会导致文件无法解压, 取消解压后, 其实文件已经解压出来了


    image.png

    image.png

    image.png
  2. 往压缩包里添加不存在文件


    image.png

    image.png

    image.png

asarmo实现这些的主要原理就是通过chromium-pickle来对asar打包和解包的工具, 对包的header信息进行修改, 从而使解压出现错误

  1. 上面的第一种方法, 我们可以看到, 我们指定的文件size修改成了负值


    image.png
  2. 第二种方法, 我们可以看到, header信息里被添加了很多随机文件


    image.png
  3. 第三种方法, 我们可以看到, 添加了我们指定的不存在的文件


    image.png

2. 支持快捷键的使用

electron官方已经支持了快捷键的使用, 可以访问globalShortcut
了解
我们可以在窗口focus的时候注册快捷键, 然后在blur的时候注销快捷键

// 窗口聚焦
win.on('focus', () => {
    globalShortcut.register('Alt+A', () => {
       // 相关逻辑
    })
})
// 窗口失焦
win.on('blur', () => {
  globalShortcut.unregister('Alt+A')
})

3. 菜单的动态修改

获取const menuInstance = Menu.buildFromTemplate(this.template)创建的菜单实例
通过menuInstance.items获取菜单数组, 来修改相关菜单

4. 日志功能

使用winston来实现日志功能,
通过winston-daily-rotate-file: A transport for winston which logs to a rotating file each day. (github.com)对日志进行限制, 定期清除

封装日志组件

const { transports, createLogger, format } = require('winston')
const { combine, timestamp, printf } = format
require('winston-daily-rotate-file')
const path = require('path')

const dateFormat = date => {
  const addZero = num => {
    if (num < 10) {
      return '0' + num
    } else {
      return num
    }
  }
  const year = date.getFullYear()
  const month = addZero(date.getMonth() + 1)
  const day = addZero(date.getDate())
  const hour = addZero(date.getHours())
  const minute = addZero(date.getMinutes())
  const second = addZero(date.getSeconds())
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}

const myFormat = printf(({ level, message, timestamp }) => {
  return `${dateFormat(new Date(timestamp))} - ${level}: ${message}`
})

const app =
  process.type === 'browser'
    ? require('electron').app
    : require('electron').remote.app

const logDir = path.resolve(app.getPath('userData'), 'logs')

// const logLevel = process.env.NODE_ENV === 'production' ? 'info' : 'debug';
const logLevel = 'debug'

const levels = {
  debug: 0,
  info: 1,
  warn: 2,
  error: 3
}

const d = (level, message) => {
  if (levels[level] >= levels[logLevel]) {
    const consoleLevel = level === 'debug' ? 'log' : level
    console[consoleLevel](message)
  }
}

// App进程
function AppLogger() {
  const appLogFileName = path.resolve(logDir, 'appLogs%DATE%.log')
  const transport = new transports.DailyRotateFile({
    level: logLevel,
    filename: appLogFileName,
    maxSize: '5m',
    maxFiles: '15d,100m' // 15天以前的自动删除,文件大小超过100m时将旧文件删
  })

  this.logger = createLogger({
    format: combine(timestamp(), myFormat),
    transports: [transport]
  })
  return this
}

AppLogger.prototype.debug = function debug(message) {
  d('debug', message)
  return this.logger.debug(message)
}

AppLogger.prototype.info = function info(message) {
  d('info', message)
  return this.logger.info(message)
}

AppLogger.prototype.warn = function warn(message) {
  d('warn', message)
  return this.logger.warn(message)
}

AppLogger.prototype.error = function error(message) {
  d('error', message)
  return this.logger.error(message)
}

const appLogger = new AppLogger()

module.exports = {
  appLogger
}

使用日志组件

import { appLogger } from './Logger'
appLogger.info(`------ 日志 ------`)
image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容