Skip to main content

Electron

tray https://medium.com/@nahoc/lets-build-a-system-tray-cryptocurrency-tracker-for-mac-using-electron-part-1-7888747891b

tip
  • electron 主要是提供环境
  • 可以区分开发应用和打包应用
    • 开发使用自己熟悉的工具即可
    • 打包使用 electron-builder
  • electron 区分 render 和 main 进程
    • main 运行在 node 环境
    • render 运行在 web 环境
    • Web 和 后端/main 通过 ipc 交互
  • 前后端推荐使用 preload+contextBridge 进行建立 ipc 通讯
# 生成 tray 图标convert logo.png -resize 16x16 tray.png
echo -n 1 1.5 2 3 4 | xargs -d ' ' -n 1 -I {} sh -c 'convert logo.png -resize $(node -pe "16*{}") [email protected]{}x.png'
# 安装# https://electronjs.org/docs/tutorial/installation# 淘宝源开发依赖安装ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install electron --save-dev
# 淘宝源全局安装ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install electron -g# 或者ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ yarn global add electron
# Node ABI 版本yarn run -- electron -a
# -i,--interactive 交互式命令行# -r,--require 预加载模块# -a,--abi 显示 Node ABI# 应用入口 index.js, folder/package.json, folder/index.js, .html/.htm, http://,https://,file://electron --inspect=5858 -r ./.erb/scripts/babel-register ./src/main/main.dev.ts
# Mac 下需要 icns 作为图标, 如果安装了 libicns 可以使用命令转换png2icns app-icon.icns favicon-16x16.png favicon-32x32.png
# 使用 app-icon-1024.png 生成个个尺寸的图标, 并生成 icnsmkdir app-icon.iconsetsips -z 16 16     app-icon-1024.png --out app-icon.iconset/icon_16x16.pngsips -z 32 32     app-icon-1024.png --out app-icon.iconset/[email protected]sips -z 32 32     app-icon-1024.png --out app-icon.iconset/icon_32x32.pngsips -z 64 64     app-icon-1024.png --out app-icon.iconset/[email protected]sips -z 128 128   app-icon-1024.png --out app-icon.iconset/icon_128x128.pngsips -z 256 256   app-icon-1024.png --out app-icon.iconset/[email protected]sips -z 256 256   app-icon-1024.png --out app-icon.iconset/icon_256x256.pngsips -z 512 512   app-icon-1024.png --out app-icon.iconset/[email protected]sips -z 512 512   app-icon-1024.png --out app-icon.iconset/icon_512x512.pngcp app-icon-1024.png app-icon.iconset/[email protected]iconutil -c icns app-icon.iconsetrm -R app-icon.iconset

Notes

  • 上下文隔离 - Electron 12+ 默认开启
    • 开启后 preload 访问的 window 不是实际的 window
    • 通过 contextBridge 交互
  • Fuses - Package time feature toggles
  • MessagePort - 类似 window.postMessage,但指定 MessageChannel
    • 浏览器自有接口
    • 使用 ipcRenderer.postMessage 和 WebContents.postMessage 进行交互
    • electron 在主进程支持 MessagePortMain, MessageChannelMain 实现类似语意
    • 新增 close

默认 userAgent 包含了 electron 版本信息,可自定义

function createWindow() {  win = new BrowserWindow({ width: 800, height: 600 });  win.loadURL('http://www.whoishostingthis.com/tools/user-agent/', { userAgent: 'Chrome' });
  win.on('closed', () => {    win = null;  });}

FAQ

vs NW.js vs Neutralinojs#

  • neutralinojs/evaluation - Neutralinojs vs Electron vs Nw.js
  • Electron vs NW
  • Why I prefer NW.js over Electron?
    • 支持 chrome.* 接口
    • 支持 chrome 扩展
    • 支持 bytecode
      • electron 可以自己手动添加
    • 支持移除 dev 工具
    • 支持旧系统
    • 入口可以是 js 或 html
    • 原生 PDF 插件
    • 最新版 Chromium
    • NW.js 支持直接使用 --url 打开一个页面
  • Electron
    • 内建自动更新
    • 更大的社区
    • 对 gyp 模块支持的更好
      • electron-rebuild

Mac 打包后非常大#

osx       - 117.3 mblinux32   -  60.3 mblinux64   -  55.2 mbwin ia32  -  47.8 mbwin x64   -  66.2 mb