【Electron 快速入门-1】简介

451 阅读2分钟

简介

从前端的角度来理解:Electron 是 web 除了浏览器运行环境外的另一个运行环境,只是它还包含了 Node 的环境与操作系统与原生 API 环境。

官方:Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。 这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行,或者通过 Mac App Store 或微软商店进行分发。 通常,你可以使用操作系统 (OS) 特定的本地应用程序框架来创建一个桌面应用程序。 Electron 可以使用你了解的技术来编写应用程序。

环境准备

Mac 上,只需要安装 Node.js 即可

建议您安装最新可用的 LTSCurrent 版本。

在 windows 上,一个完整的环境就麻烦的多了,具体如下:

创建最简单的项目

上面我们说到 Electron 其实就是 web 的一个运行环境而已,那 web 运行在哪儿呢?

结合上方所述的 Demo,其实 Electron 的运行流程大概如下:

  • yarn dev 启动应用,运行入口文件 main.js
  • 通过electron 系统原生 api : BrowserWindow 打开一个系统窗口。
const win = new BrowserWindow({

    width: 800,

    height: 600

  })

  
  • 窗口中加载一个网页:
win.loadURL('https://www.baidu.com')
  • loadURL 既可以加载一个网页,也可以加载一个本地 Html 文件。
  • loadFile 只可以夹在一个本地的 Html 文件。
  • loadURL 和 loadFile 在写法上有差异,一般我们使用 loadURL 就行,更多差异可以查看官方 API 文档:www.electronjs.org/docs/api/br…

综上所述:

  • Web 运行在 Electron 的一个窗口里。

也许到这里你有疑惑,就是开发 Electron 和开发 Web 整体上有哪些差异呢?

创建 Electron + React + Ts + Webpack + Electron-builder 项目

在具体的业务项目中,最基本的 demo 远远不能满足需求,我们更多的可能是需要和前端框架结合,因此,下面是基于 react 的项目的完整构建流程。

在创建 electron 项目时,我们可以:

  • 首先创建 Web 应用,比如:create-react-app
  • 集成 electron
  • 做 webpack 相关配置
  • 做构建相关配置

具体如下:

当然,这块也有对应的开源项目:

直接使用开源的模板,一个是里面存在着许多模板性的东西,不知道是不是需要的,另一方面,一些配置,也不是很明白其作用。还有就是,这样的模板项目,其框架升级后,也没法享受其带来的好处,除非照着把自己的项目都改一遍,还是挺复杂的。比如这个开源项目其实结构变动就挺大的。越来越接近 web 开发的结构。