Electron

前言

本文只是为了普及、尝鲜框架 electron ，并非是一份学习文档，目的是为了快速启动并使用。因此，很多细节、逻辑、原理都没有涉及，但是文章中有各种链接，可以帮助大家学习，可以自行点击学习。

注意：本文所有内容来均源于官网、Github。

链接

GitHub

官网

问题社区

简介

Electron是什么

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

学习前提

熟悉该文档之前，需要你有Node.js和web开发经验。 如果您需要了解这两个方面的开发知识，我们推荐您使用以下学习资源：

• 来自Mozilla开发社区(Mozilla Developer Network)的web入门教程
• NodeJS官方入门指南

此外，如果您熟悉Chromium进程模型，您将更好了解 Electron 的工作原理。 You can get a brief overview of Chrome architecture with the Chrome comic, which was released alongside Chrome’s launch back in 2008. 尽管Chrome发布十多年了，【Chrome comic】漫画中介绍的核心原理仍然有助于理解Electron。

快速上手

官网Quik start

除去通过官网的方式，这边建议直接采用推荐的脚手架速度搭建一个electron应用。electron-quick-start

这次也从这里进行演示

1. Clone

注意：先确保本地环境有Node和npm

git clone https://github.com/electron/electron-quick-start.git

2. 认识整体、启动

这个时候你的文件夹下面应该是这样的结构：

.
├── LICENSE.md
├── README.md
├── index.html
├── main.js
├── package-lock.json
├── package.json
├── preload.js
└── renderer.js

index.html:

启动的时候展示的首页，通过 main.js 引入。

Main.js:

启动的时候吊起的 Node 服务。

Preload.js:

预加载脚本。

预加载 脚本连接到渲染器时派上用场。 预加载脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。

启动：

查看 package.json 并启动 electron 。

npm start

这个时候你就能看的到启动的框了。

3. 回顾

整体上来看，electron 通过本地调启 Node 服务，去加载 main.js ，然后在这个文件中去加载 index.html ，最终渲染展示。

打包

最快捷的打包方式是使用 Electron Forge。

1. 将 Electron Forge 添加到应用的开发依赖中，并使用其 import 命令设置 Forge 的脚手架

npm install --save-dev @electron-forge/cli
npx electron-forge import

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

2. 使用 Forge 的 make 命令来创建可分发的应用程序：

npm run make

> my-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

Copy

Electron Forge creates the out folder where your package will be located:

// Example for macOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app