导读 ：本文简述了 PC 客户端业务在文库中疾速落地的过程，其中包含了后期的技术选型，方案设计，PC 客户端跨平台原理，以及 Electron 框架的利用细节。从利用深刻到原理，解说 PC 客户端跨平台技术，如何实现跨平台渲染，如何实现原生 API 的调用，和如何进行不同指标平台的利用构建。通过浏览本文，能够疾速上手基于 Electron 框架进行 PC 客户端业务的开发。

全文 2545 字，预计浏览工夫 7 分钟

前言

跨平台技术在挪动客户端平台（Android & iOS）上曾经倒退了多年，从 Hybrid App 到小程序，再到 React Native 和 Flutter 曾经失去比拟宽泛的利用。无论是前端计划，桥接计划，还是自渲染计划，都须要解决三个问题：

• 如何进行 UI 渲染？
• 如何实现原生 API 的调用？
• 如何进行客户端构建？

不同的挪动客户端跨平台计划都有本人的解决形式，然而在 PC 客户端平台上，大部分传统应用软件还是以单平台开发为主。近期文库业务开始启动 PC 客户端的我的项目，同时反对 Windows 平台和 MacOS 平台，从技术的角度心愿通过 PC 客户端的跨平台技术，以更低的老本，更高效的迭代来适应互联网产品的节奏，同时保障不同平台下的一致性体验。本文通过 PC 客户端跨平台框架的剖析及跨平台业务利用进行开展。

一、技术选型

文库的 PC 客户端次要波及到桌面 OS 的 Windows 和 MacOS，以后这两种平台的应用软件开发包含了单平台开发、两头平台开发、跨平台开发几种模式，其中依据目前文库业务研发人员构造和相熟水平，Flutter 和 Electron 是重点去考查的 PC 客户端跨平台框架。因为文库在文档页面渲染上的技术积攒，能够疾速复用到业务场景中，所以最终抉择了 Electron 跨平台技术计划。

二、Electron 框架介绍

接下来，介绍一下 Electron 框架到底是什么？如何实现跨平台的？其实要回到开篇提到的跨平台须要解决的通用问题，UI 渲染、原生 API、客户端构建。Electron 是通过集成浏览器内核，通过前端的技术来实现不同平台下的渲染，Electron 框架次要解决以下问题：

• 渲染与服务的交融，即 UI 和底层服务的交融；
• 不同平台下零碎 API 的调用及封装；
• 不同平台下利用构建；

了解 Electron 框架原理，其难点在于 Chromium 和 Node.js 是如何互通的，因为咱们晓得他们都有本人独立的事件循环，不解决这个问题就无奈实现渲染和服务的交融，所以须要先理解 Electron 的多过程架构。

2.1 Electron 多过程架构

Electron 多过程架构参考了 Chromium 的多过程架构，行将渲染过程与主过程隔离，之所以如此设计是因为与 OS 从单用户到多任务的倒退过程相似，为防止一个出错的页面或插件 bug 引起整个浏览器和全副标签敞开。每个浏览器标签应用独立的过程，爱护整个利用免受渲染过程中 Bug 和故障影响。在理论业务中，UI 都是在渲染过程进行的，当须要应用零碎服务时如 I /O、DB、Push 等等，通过 IPC 形式在主过程中实现，Electron 框架自身已提供了 IPC 能力，包含 ipcMain 和 ipcRenderer，具体应用能够查问 Electron 官网文档，有比拟具体的阐明和利用示例。

2.2 Chromium 与 Node.js 交融

把 Chromium 和 Node.js 两套独立的体系进行通信是 Electron 重点解决的问题之一，依据官网公布的相干介绍，首先尝试了用 libuv 来替换 Chromium 的 message loop，每个平台都有本人的 GUI 音讯循环，实现过程绝对简单，最终因为资源耗费和提早的问题无奈失去无效解决，所以放弃了。目前 Electron 框架通过在一个独自的线程中轮询 Node 的事件循环的形式来实现 Chromium 与 Node.js 交融。具体实现能够查看框架源码，本文不进行开展阐明。

Node_bindings.cc 源码

源码地址：https://github.com/electron/electron/blob/master/shell/common/node_bindings.cc

===

三、Electron 业务实际

3.1 多过程计划

文库同样采纳相似 Chromium 的多过程计划，其中主过程负责原生服务的调用和业务服务的提供，以及 Window 的治理，能够将每个 Window 了解为一个渲染过程。渲染过程包含主 Window（如图中绿色 1 区域所示）和内容 Window（如图中红色 2 区域所示），内容 Window 复用是因为在理论应用过程中创立和开释 Window 会有显著的加载耗时，并且更多的 Window 会减轻内存占用。所以无论是切换导航栏或者标签都通过内容 Window 进行加载，并且记录页面状态，实现页面的状态复原，以及离屏渲染。

3.2 基于线上业务疾速迭代

PC 客户端局部页面与线上页面是统一的，所以这部分没必要进行反复开发，尽量通过去复用线上业务，次要的工作就是对线上页面进行 PC 客户端适配，页面布局、视图屏蔽、自适应等等。目前应用注入的形式去实现，另外线上业务也是常常变动的，所以注入的代码尽量也是通过云端管制。具体形式是通过 Window、BrowserWindow、WebView 中的 webContent 进行注入，这里须要检测页面生命周期，须要在页面加载实现后进行注入。

3.3 Debug & Release

Electron 框架会将代码进行编译，再进行打包，开发中每次都须要肯定的工夫运行客户端程序，很影响效率。所以能够 Debug 模式下通过 Node 服务进行运行，Release 模式下才进行编译打包，来实现开发中的所见即所得。

===

四、总结和瞻望

除了 Electron 框架在 PC 客户端上的利用，文库业务也在挪动客户端上引入 Flutter 框架，并应用新的框架重构文档相干的能力。随着 Flutter 2.0 的公布，对 PC 客户端更敌对的反对，以及文库业务基于 Flutter 的文档能力建设欠缺，通过 Flutter 构建 Windows，MacOS，Android，iOS 全平台版本客户端成为可能，也在继续的摸索中。

举荐浏览 ：

当技术重构遇上 DDD，如何实现业务、技术双赢？

接口文档主动更改？百度程序员开发效率 MAX 的秘诀

技术揭秘！百度搜寻中台低代码的摸索与实际

百度智能云实战——动态文件 CDN 减速

化繁为简 – 百度智能小程序主数据架构实战总结

百度搜寻中台海量数据管理的云原生和智能化实际

百度搜寻中“泥沙俱下”的加盟信息，如何靠 AI 解决？

———- END ———-

百度 Geek 说

百度官网技术公众号上线啦！

技术干货 · 行业资讯 · 线上沙龙 · 行业大会

招聘信息 · 内推信息 · 技术书籍 · 百度周边

欢送各位同学关注