本文将介绍如何在Windows 10操作系统中借助WSL2开发基于Electron的Ubuntu窗口应用程序，可以实现在win10中编写代码并查看linux应用的运行效果。

借助此方法，仅需一台MacOS设备和一台Win10的设备，即可通过Electron开发和测试主流操作系统（Windows、Linux、MacOS）下桌面应用程序并可以有差异化的调用操作系统的原生API。

通过MacOS系统可以编译几乎所有平台的应用程序，例如可以在MacOS中编译Win10 x64、Linux ARM64等平台的应用程序。但是在win10或ubuntu中无法编译MacOS应用程序（可以借助虚拟机或者带有MacOS系统的Docker镜像实现MacOS平台应用程序的编译，但是可能无法正常进行签名）。关于Electron自动编译及自动更新、分发，可以参阅此视频教程。

接到一个需求，基于Electron开发Windows下的自助设备广告屏（上屏）自动播放视频的功能。设备下屏是带触控功能的屏幕，可以进行业务咨询、业务办理、视频咨询，上屏是不带触控功能的1080P屏幕。

两个屏幕接入了同一个主机，下屏是主屏幕，上屏是分屏（扩展屏）。为了避免下屏进行视频咨询的时候，上屏播放视频的声音影响到对话，因此上屏播放视频功能需要开放相应的API接口，在下屏播放视频或进行音视频咨询的时候，相关的开发者能够通过API对上屏视频禁音。

由于我们已经开发了Android平台的同款设备，因此Electron平台需要和Android平台保持一致的API。

Apple Silicon M1芯片可谓是性能爆炸，开发体验极佳，生态中适配速度也算得上势如破竹。借助Rosetta 2平稳过渡ARM64，实在是高明。在MacOS 11+系统中通过 Apple M1 编译原生M1 Electron应用程序也算得上轻松容易。

理论兼容M1芯片的Electron版本是11.2.3，实测兼容较好的版本是13.0.0-beta.5+。

electron-builder需升级至20.10+，建议版本22.10.5+。

本地Node.js版本请安装v15.5.0+。

MacOS建议升级到11.2.3+。

通过electron-builder编译Electron ARM64应用程序，需调整package.json配置文件。

在 Electron 12 及更高版本，设置了nodeIntegration: true及nodeIntegrationInWorker: true、nodeIntegrationInSubframes: true，渲染进程仍然可能出现require is not defined的报错。

这个报错还跟随有module is not defined或exports is not defined。

同样的报错在Electron 5+曾出现过，原因是发布v5.0.0的时候，官方将nodeIntegration默认值设置为了false（与此同时还将webviewTag设置为了false）。

近期，Electron 12.0.0 发布。修复了诸多异常。同时也将contextIsolation的默认值更改为true（详见：https://github.com/electron/electron/pull/27949）。

为了实现Electron的自动更新，曾撰文《Electron 应用分发系统（Electron自动更新）》，不少小伙伴反应说不知道正确的操作姿势。仔细想来，这个部署确实不简单，因此特意录制此视频。

视频从头开始讲解了如何搭建一个Electron官方示例，配置并实现push到git仓库后服务器端自动编译、自动上传编译后的文件到七牛对象存储、客户端捕获更新信息并且后台静默更新的配置全过程。

需要特别留意的是，每次发布新版本之前都需要修改package.json里面的version版本号，否则自动更新分发会失效。

Electron 应用分发系统提供应用程序编译（支持Windows、Linux、MacOS）、自动升级、分发服务。让Electron应用分发变得非常容易。

开源地址：https://github.com/yi-ge/electron-distribution

使用时需要注意，一个git仓库需对应一个Electron应用程序，一个Electron应用程序对应需要部署一套应用分发系统。

Electron 应用分发系统服务器端工作在64位Linux操作系统（必须）和MacOS（可选），默认编译x64应用程序, 其它平台及架构需要修改相应代码（不过这很容易实现）。

MediaDevices 为浏览器控制音频输入设备、音频输出设备、视频输入设备提供了接口。

使用场景

Electron 内置 Chromium 和 Node.js，为了提升用户体验，通常 Electron 封装的前端静态文件存储在客户端本地。但总有一些特殊情况，会使用到部分远程页面。

比如微信扫码登录，需要远程访问微信的登录站点，获得扫码结果后跳转到我们自己的服务器，然后通知到主进程来关闭对应的渲染进程。目前这个问题有更高效的解决方案，详见博文《无刷新微信扫码登陆解决方案》。

再比如，部分页面还没有实现前后端分离，为了产品尽快上线，也需要嵌入远程URL。

直接在Electron中访问远程地址是有风险的，控制远程地址切回本地页面也是较为繁琐的。

以上需求可以使用webview标签实现。这是Electron为我们提供的一个特殊组件，类似于iframe但跟iframe不同，确保了应用的安全性。类似于Android、ios的webview或Crosswalk，Electron中的webview也支持和渲染进程相互通讯。