跳到主要内容

Electron 入门

· 阅读需 4 分钟
ahKevinXy

Electron是由Github开发的开源框架，它允许开发者使用Web技术构建跨平台的桌面应用。Electron=Chromium+Node.js+Native API，其中Chromium为Electron提供了强大的UI能力，可以不考虑兼容性的情况下，利用强大的Web生态来开发界面；Native API让Electron有了跨平台和桌面端的原生能力，比如说它有统一的原生界面，窗口、托盘这些

electron 工作流​

启动流程​

相关属于说明​

主进程

  • package.json 中 main 属性对应的文件
  • 一个应用只会有一个主进程
  • 只有主进程可以进行 gui的api 操作

渲染进程

  • windows 中展示的界面提供渲染进程表现
  • 一个应用可以有多个渲染进程

环境搭建​

工具

  1. vscode
  2. 命令行工具
  3. git
  4. node

#在x64机器上安装ia32位版本
npm install --arch=ia32 electron

# 使用 --platform 来指定开发平台 (例如, win32、linux 等):

npm install --platform=win32 electron


设置 中国代理

ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

跳过 二进制下载

ELECTRON_SKIP_BINARY_DOWNLOAD=1 yarn install


Electron 生命周期​

  • ready:app 初始化完成
  • dom-ready 一个窗口中的文本加载完成
  • did-finish-load 导航完成时触发
  • window-all-closed 所有窗口都被关闭时触发
  • before-quit 在关闭窗口之前触发
  • will-quit 在窗口关闭并且应用退出时触发
  • quit 当窗口关闭时触发 此时删除窗口引用

创建项目​

初始化应用​


# npm 
npm init

# yarn
yarn init


添加 electron DEVDEPENDENCY

信息

应用需要运行 Electron API，因此这听上去可能有点反直觉。 实际上，打包后的应用本身会包含 Electron 的二进制文件，因此不需要将 Electron 作为生产环境依赖。


# npm 
npm install electron --save-dev

# yarn 

yarn add electron --dev


导入模块​

  • app 应用程序的事件生命周期
  • BrowerWindow 负责创建和管理应用窗口

使用预加载脚本​

什么是预加载脚本​

Electron 的主进程是 一个拥有着完全操作系统访问权限的 Node.js 环境。 除了 Electron 模组 之外，您也可以访问 Node.js 内置模块 和所有通过 npm 安装的包。 另一方面，出于安全原因，渲染进程默认跑在网页页面上，而并非 Node.js里。

在进程之间通信​

可以使用 Electron 的 ipcMain 模块和 ipcRenderer 模块来进行进程间通信

标签：