Skip to content

pfan123/electron-react-boilerplate

Repository files navigation

electron-react-boilerplate

electron-react-boilerplate -- Electron App 开发的 react 模板。

Electron Official Documentation

electron-builder Official Documentation

Usage

clone 仓库

git@github.com:pfan123/electron-react-boilerplate.git

安装

yarn start

开发

yarn dev // 开发调试

yarn build  // 打包 electron、webview 文件

yarn postinstall // 正式环境同步依赖

yarn start // 预览

yarn dist // 打包安装包

构建打包

electron-builder A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box.

Electron开发桌面应用

Electron 是一款可以利用 Web技术 开发跨平台桌面应用的框架,最初是 Github 发布的 Atom 编辑器衍生出的 Atom Shell,后更名为 Electron。Electron 提供了一个能通过 JavaScript 和 HTML 创建桌面应用的平台,同时集成 Node 来授予网页访问底层系统的权限。目前常见的有NWheXElectronMacGapMacGap案例switchhost,可以打造桌面应用。

electron结构

electron项目

electronic-wechat

WeFlow

Hozz

hummingbird

ElectronOCR

N1

Electron 运行流程

Electron 运行流程

Electron 主进程和渲染进程

  • Electron 运行 package.jsonmain 脚本的进程被称为主进程。

  • 在主进程中运行的脚本通过创建 web 页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。

  • 由于 Electron 使用了 Chromium来展示 web 页面,所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。

  • 主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow实例被销毁后,相应的渲染进程也会被终止

electron 主进程

Electron 主进程和渲染进程中的模块

electron 模块

Electron remote 模块

remote 模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯 (IPC) 的简便途径

Electron 中, 与 GUI 相关的模块(如 dialog, menu 等)只存在于主进程,而不在渲染进程中 。为了能从渲染进程中使用它们,需要用ipc模块来给主进程发送进程间消息。使用 remote 模块,可以调用主进程对象的方法,而无需显式地发送进程间消息,这类似于 JavaRMI

Electron快速上手demo

electron-boilerplate

electron-connect

参考资料: