在开始之前，我想您一定会有这样的困惑：标题里的 是什么？能做什么？许多伟大的公司使用框架的原因又是什么？
带着这些问题和疑惑，通过本文的介绍，可助您全面地认识这门新兴的技术，迅速找到其入门途径，并理解为何被称为当下开发桌面App的最佳选择。
初探
一、是什么？（为何称之为“跨平台桌面浏览器”）
前端开发的魅力，在于开发者随时要面临全新技术的挑战！
曾几何时，作为前端开发者的你可曾想过：如何利用HTML、CSS和构建跨平台的桌面应用程序？借助 ，这项工作将比你想象的更加简单。作为一个使用新兴技术（包括，HTML和CSS），可以帮助用户建立与系统功能的交互，让开发人员可以更专注于应用程序本身。
设计之初便充分结合了当今最好的Web技术，作为一个跨平台的“集成框架”，它可以轻松地与Mac、和Linux兼容。而所谓的“集成框架”也就是它将“”和“Node.js”很好的集成在了一起，并明确分工，负责硬件部分，“”和“Node.js”负责界面与逻辑，大家井井有条，共同构成了一个成本低廉却十分高效的解决方案，在快速交付上甚至比还要快速。
发展里程碑
简而言之， JS是一个运行时框架，它允许用户使用HTML5、CSS和创建桌面套件应用程序，而大部分应用程序都是由两种非常受欢迎的技术混合而成：Node.js和。因此，您编写的任何Web应用程序都可以在 JS 上正常运行。
的内置功能包括：
二、 可以用来做什么？（哪些场景需要使用）
以平台应用开发为例，大部分人首先会想到使用成熟的开发方案，如QT(C++)、WPF(C#) 等。但面临以下几种使用场景，这些方案将显得捉襟见肘：
在这里有一个实际的例子：
在项目中，用户需要将基于web版的表格编辑器封装成APP使用，同时增加文件操作的能力，如导入导出excel、导入PDF等，而是一个纯前端的表格控件，开发人员全部由前端开发组成，对C++和C#并不熟悉，如果投入过大的时间精力用来学习其他开发语言，整个项目的技术管理和项目管理将变得无法控制。除此之外，鉴于项目本身对应用的业务逻辑要求并不高，只是套一个具有浏览器属性的运行环境即可，因此，单独为此配置C++、C# 开发人员将无形中提升更多项目成本。
为此，我们引入了框架：现有的前端开发人员能在不学习其他语言的情况下，直接搞定上述需求，这就是 为我们带来的价值。
三、为什么选择 ？（的出现为前端开发者谋得了一份好差事）
可以这么说，这个框架让网路里流传很广的一句话不再是玩笑：“不要和老夫说什么C++、Java，老夫行走江湖就一把JS，遇到需求撸起袖子就是干”。可以帮助前端开发者在不需要学习其他语言和技能的情况下，快速开发跨平台桌面应用。
的出现将蚕食很大一部分桌面客户端领域的市场份额，鉴于它的跨平台特性，在不同系统之间仅需少量的优化工作。可想而知，这个成本到底有多低。
在开发的体验上，是基于""和"Node.js"的，所以几乎所有的Node.js模块都可以在上运行，并很容易使用“npm”搭积木的方式快速交付一个产品。
四、大型应用使用框架的成功案例
1. 纯前端表格控件
是一款基于 HTML5 的纯前端电子表格控件web前端开发最佳实践 pdf，以“高速低耗、高度类似Excel、可无限扩展”为产品特色，提供移动跨平台和浏览器支持，同时满足 .NET、Java、App 等应用程序中的 Web Excel 组件开发、数据填报、在线文档、图表公式联动、类 Excel UI 设计等业务场景，在数据可视化、Excel 导入导出、公式引用、数据绑定、框架集成等场景下无需大量代码开发和测试，极大降低了企业研发成本和项目交付风险。
2.
，作为第一个在浏览器中运行的客户端，是一个完全由编写并使用进行点对点传输的客户端应用。无需任何插件，扩展或安装，将用户链接到分散的浏览器到浏览器网络，以确保有效的文件传输。
使用框架开发，使其尽可能轻量、无广告且开源。此外，使用还有助于流式传输，并充当混合客户端，将应用程序连接到所有流行和网络。
3.
桌面是一个使用了和React作为框架的桌面应用程序，提供无缝的跨平台体验，允许用户专注于他们的内容和设计，而不会被任何浏览器标签所分心。
4. Slack
Slack采用了框架构建，鉴于其高性能表现和无框架外观，将带来与浏览器完全不同的体验方式。对于寻求更集中的工作空间的团队来说，Slack 绝对是最适合的应用程序之一。虽然Slack 融合了很多技术web前端开发最佳实践 pdf，但大多数资源文件和代码都是远程加载的，它们结合了的渲染引擎和Node.js运行时和模块系统。
5.
作为下载量最高的应用程序，也是基于框架构建的。帮助开发人员以低廉的成本完成了几乎所有工作，并通过更加简化和创新的技术，为用户带来全新的桌面体验方式。
架构实现
基本文件结构
有一个基本的文件结构，类似于我们在创建网页时使用的文件结构：
-quick-start
的架构主要分为两部分：主进程和渲染进程
回顾以往的web开发，我们的代码，无论是HTML、CSS还是，都是运行在浏览器沙盒中的，我们无法越过浏览器的权限访问系统本身的资源，代码的能力被限制在了浏览器中。浏览器之所以这么做，是为了安全的考虑。设想一下，我们在使用浏览器的时候，会打开各式各样不同来源的网站，如果代码有能力访问并操作本地操作系统的资源，那将是多么可怕的事情。
假设：你在某天不小心打开了一个恶意的网站，可能你存储在硬盘上的文件就被偷走了（都用不着去修电脑）。
但我们要开发的是桌面应用程序，如果无法访问到本地的资源肯定是不行的。将巧妙的融合了进来，让作为整个程序的管家。管家拥有较高的权限，可以访问和操作本地资源，使用原本在浏览器中不提供的高级API。同时管家也管理着渲染进程窗口的创建和销毁。所以，我们将这个管家称之为主进程。在使用开发的程序中，会使用main.js作为程序的主入口，该文件内代码执行的内容，就是主进程中执行的内容。
主进程
主进程控制应用程序的生命周期。 用来运行 .json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。它内置了完整的Node.js API，主要用于打开对话框以及创建渲染进程。此外，主进程还负责处理与其他操作系统交互、启动和退出应用程序。
主进程就像是应用程序的管家，负责管理整个应用程序的生命周期以及所有渲染进程的创建。
按照惯例，主进程位于名为main.js的文件中，你可以通过在.json文件中修改配置属性来更改主进程文件。
比如，我们可以打开.json并更改配置属性：
“main”: “main.js”, -> “main”: “mainTest.js”,
请注意，有且只有一个主进程。且主进程销毁时，所有渲染进程也将一并销毁。在浏览器的默认策略下，每一个tab都是独立的进程，也正是利用了这一策略。
渲染进程
渲染进程是应用程序中的浏览器窗口。与主进程不同，可以有许多渲染进程，且每个进程都是独立的。由于 使用了 来展示web 页面，所以 的多进程架构也被使用到。 每个中的 web 页面运行在它自己的渲染进程中。
正是因为每个渲染进程都是独立的，因此一个崩溃不会影响另外一个，这些要归功于的多进程架构。
如何保持进程通信？
即便中的所有进程同时存在并保持独立运行，但他们仍然需要以某种方式进行沟通，尤其是在他们负责不同任务的时候。
为了保持进程通信，有一个进程间通信系统（IPC也就是内部进程通信）。您可以使用IPC在主进程和渲染进程之间传递信息。
// 在主进程中
global.sharedObject = {
someProperty: 'default value'
}
// 在第一个页面中
require('electron').remote.getGlobal('sharedObject').someProperty= 'new value'Copy
// 在第二个页面中
console.log(require('electron').remote.getGlobal('sharedObject').someProperty)
进程通信的实现方式：
说句题外话：在两个网页（渲染进程）间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API。 其中比较好的方案是用 API， ，或者web前端开发最佳实践 pdf Electron从入门到实践，前端开发者开发桌面App的最佳选择，但这些不是今天的主题。
如何构建 系统架构？
为了降低构建整个 带来的复杂度，通过 来访问 的 API。 是一个独立的、引入了 模块及其所有依赖的共享库。用户不需要一个强劲的机器来构建。
只用了的渲染库而不是其全部组件。这使得升更加容易，但也意味着缺少了 里的一些浏览器相关的特性。
打包
原来打包步骤略微繁琐，如今由于社区发展，产生了很多优秀的打包工具，让我们可以不用关注很多细节，（比如asar）
我们仅需做的 ：将app 的目录结构整理好，提供对应的资源，如icon等，然后使用工具制作镜像即可将资源打包成为各个平台下的APP应用。
打包工具的选择
通常情况下，我们选择- （跨平台支持性较好，上手成本低）
快速上手实践
这里我准备了一个演示，这个演示我将以的一个应用为例，展示如何将Web应用转换为桌面应用。
我这里使用-进行项目文件的打包，您可以直接在项目根目录通过 npx -命令执行打包命令。
项目打包过程可能需要些时间，在这期间，我向您介绍一下 打包的配置文件，您可以根据您的实际情况配置如下文件以满足您的需求。
"build": {
"appId": "your.id", // appid
"productName": "程序名称",// 程序名称
"files": [ // 打包需要的不过滤的文件
"build/**/*",
"main.js",
"node_modules/**/*"
],
"directories": {
"output": "./dist-out", // 打包输出的目录
"app": "./", // package所在路径
"buildResources": "assets"
},
"nsis": {
"oneClick": false, // 是否需要点击安装，自动更新需要关掉
"allowToChangeInstallationDirectory":true, //是否能够选择安装路径
"perMachine": true // 是否需要辅助安装页面
},
"win": {
"target": [
{
"target": "nsis", // 输出目录的方式
"arch": [ // 输出的配置ia32或者x64/x86
"x64"
}
],
"publish": [ // 自动更新的配置
{
"provider": "generic", // 自己配置更新的服务器要选generic
"url":"http://127.0.0.1:8080/updata/" //更新配置的路径
}
}
缓慢的打包进程结束后，您应该可以在项目目录中的build目录看到生成的exe文件。
点击安装，它就像一个普通的桌面应用程序一样开始了安装进程。（这里的软件名称和软件logo都是我们项目中配置好的）。
安装完成后，打开程序，这里我们可以看到打包好的应用和在Web端访问时的效果别无二致，同时也能够像其他桌面应用程序一样，支持离线使用。
以上就是教程的全部内容了，最后，有什么问题欢迎讨论，如果对您有帮助，欢迎点赞/关注/留言友爱三连走起来~