Electron

简介

Electron用于通过Javascript、HTML、CSS来编写运行于Windows、macOS、Linux跨平台的桌面应用。

• 迅雷和VSCode就是electron写的
• 我的electron项目演示

简单的Electron应用

npm init -y
npm i --save-dev electron
npm start

其中,package.json中的main字段要指向主进程的js

通过electron-packager打包

打包为带有源码的可执行文件(不加密)

npx electron-packager <项目所在路径> <打包后的项目名称> <配置信息>

如下，将当前目录下的内容打包到dist目录下

npx electron-packager ./ myapp --out=dist

---

通过electron-builder打包

可以打包为一个编译后的安装包

• 可以结合electron-updater进行自动更新
• 无法编译一些模块，如ffi-napi
• 可以在package.json中通过build属性进行配置

  "build": {
    "appId": "TK.Troncell",
    "productName": "Troncell",
    "asar":false,//是否加密代码 默认为true
    "directories": {
      "output": "build_file"
    },
    "files":[//将哪些文件打包，默认打包所有
      "app_normal/*"
    ],
    "electronDownload": {
      "mirror": "https://npm.taobao.org/mirrors/electron/"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowToChangeInstallationDirectory": true,
      "runAfterFinish": true
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://192.168.2.154:8080/"
      }
    ]
  }

• --dir 打包为编辑后的直接执行文件(非安装包)
• --mac、--windows、--linux 指定打包的平台类型，默认为当前平台
• -mwl 编辑所有平台打包类型

asar加密与解密

asar仅仅是对resource/app目录的封装。

• 安装asar

npm install asar -g
asar --help

• 加密

asar p <被打包的目录> app.asar
asar pack <被打包的目录> app.asar

• 解密

asar e app.asar <解压后的目录>
asar extract app.asar <解压后的目录>

---

electron-forge

Electron Forge 是一个用来构建Electron应用的工具，将多个Electron构建工具整合为一个简单易用的工具包。

将electron-forge导入到当前Electron项目并打包

npx @electron-forge/cli import
npm run make

或直接使用electron-forge创建项目

electron-forge init 新项目名
npm start
npm run package//打出本地调试包到out下
npm run make//打出真正的发布包到out/make下

打包后web源码直接暴露在\out\notepad-win32-x64\resources\app\src目录下。

主进程和渲染器进程

• 主进程就是main.js，一个普通的Node.js脚本
• 每个页面就是一个渲染进程

主进程与渲染进程通讯

• webContents.send() 主进程主动发送消息
• webContents.executeJavascript() 主进程直接控制渲染器进程
• 在主进程中通过ipcMain通讯
  • ipcMain.on() 接受消息
  • event.returnValue 回复同步消息
  • event.reply()和event.sender.send() 回复异步消息，其中event.reply()可以发给iframe而event.sender.send()总是发给页面本身

const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.reply('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.returnValue = 'pong'
})

• 在渲染器进程中通过ipcRenderer通讯
  • ipcRenderer.on()接受消息
  • ipcRenderer.sendSync()发送同步消息
  • ipcRenderer.send()发送异步消息
  • ipcRenderer.sendTo()发送到指定webContent

const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

• 渲染器进程使用remote模块直接调用主进程(不推荐)
  BrowserWindow的enableRemoteModule需要为true

const { BrowserWindow } = require('electron').remote
const win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL('https://github.com')

---

API

• Electron API
  是根据流程类型分配的。这意味着某些模块可以在主进程或渲染进程中使用，有些模块两者中皆可使用。
• Node.js API
  主进程和渲染进程都可以直接访问Node.js API
  要从渲染过程中访问Node.js API，需设置 nodeIntegration:true。

---

electron-log

用于将log保存到本地文件

• windows下的默认保存路径%USERPROFILE%\AppData\Roaming\\log.log
• 对于打包后的项目，只有error和warn会进入log

npm i electron-log --save

var log = require('electron-log');
log.transports.file.file = "./hello.log";//改变输出log文件位置
log.error("hello world");

---

webContents

官方文档
是BrowserWindow/BrowserView实例的一个属性，具有多种回调、方法、属性用于监听及控制页面

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('http://github.com')

const contents = win.webContents
console.log(contents)

• contents.executeJavaScript(code[, userGesture])
  向页面中执行js，userGesture为true时认为是用户触发，hack触发一些必须user gesture的H5特性
• contents.sendInputEvent(Mouse/KeyboardEvent)
  模拟进行的鼠标/键盘操作

mainWindow.webContents.on("did-finish-load", function () {

  mainWindow.webContents.executeJavaScript(`clickMe();`, true);

  mainWindow.webContents.sendInputEvent({
    type: "mouseDown",
    x: 10,
    y: 10,
    button: "left",
    clickCount: 1,
  });
  mainWindow.webContents.sendInputEvent({
    type: "mouseUp",
    x: 10,
    y: 10,
    button: "left",
    clickCount: 1,
  });
});

---

一些注意点

在渲染进程中启用node

  const mainWindow = new BrowserWindow({
    width: 1920,//fullscreen:true时该配置失效
    height: 1080,//fullscreen:true时该配置失效
    fullscreen: true, //默认false,当显式设为false时全屏按钮会被隐藏
    frame:false,//窗口是否有边框 默认true
    icon: path.join(__dirname, "favicon.ico"), //图标
    webPreferences: {
      nodeIntegration: true, //允许页面中使用nodejs语法
      nodeIntegrationInWorker: true,
      webSecurity: false, //禁用同源策略允许跨域
      allowRunningInsecureContent: true, //允许在https网站中加载http的css和js
      preload: path.join(__dirname, "preload.js"), //界面的其它脚本运行之前预先加载一个指定脚本
    },
    show: false, //一开始不显示
    backgroundColor: "#FCF7ED", //背景色
  });

其中nodeIntegration:true允许在渲染进程(即每个页面)中写node脚本。由于module的差异性，此时引入JQuery等插件会导致出错，可通过如下方法修复

判断页面是否处于electron的node环境中

通过typeof判断module或global是"undefined"还是"object"

获取设备标识信息

mac地址

window.require("os").networkInterfaces();
（注意html中要使用window.require，否则因webpack环境中也有require("os")，导致未使用electron中的os模块）
返回值是一个包含所有网络连接方式的对象，同一设备连无线和有线时返回内容不同，且不同系统版本的key命名也不同，可使用node-getmac包获取（存疑）

硬盘/CPU序列号

通过调用系统命令获取，本质上node-getmac也是如此

require('child_process')
.exec('wmic diskdrive get SerialNumber',function(error, stdout, stderr){
  console.log("stdout",stdout)
})

require('child_process')
.execSync('wmic CPU get ProcessorID').toString()

executeJavaScript时注意变量的使用

错误用法中等于console.log(hello world)，显然无法执行

//错误用法
var str = "hello world";
executeJavaScript(`console.log(${str})`);
//正确用法
var str = JSON.stringify("hello world");
executeJavaScript(`console.log(${str})`);