本文将介绍如何在Windows 10操作系统中借助WSL 2开发基于Electron的Ubuntu窗口应用程序,可以实现在win10中编写代码并查看linux应用的运行效果。
借助此方法,仅需一台MacOS设备和一台Win10的设备,即可通过Electron开发和测试主流操作系统(Windows、Linux、MacOS)下桌面应用程序并可以有差异化的调用操作系统的原生API。
通过MacOS系统可以编译几乎所有平台的应用程序,例如可以在MacOS中编译Win10 x64、Linux ARM64等平台的应用程序。但是在win10或ubuntu中无法编译MacOS应用程序(可以借助虚拟机或者带有MacOS系统的Docker镜像实现MacOS平台应用程序的编译,但是可能无法正常进行签名)。关于Electron自动编译及自动更新、分发,可以参阅此视频教程。
WSL,即Linux的Windows子系统,是Windows 10的正式组件,可在Windows内部运行的完整Linux版本。
虽然WSL 1的文件系统运行缓慢,并且存在一些软件包兼容问题,但是WSL 2运行Ubuntu Linux已经相对成熟。WSL 2开箱即用,在Linux上运行的所有内容都可以在Windows上运行,只不过WSL 2当前不支持snap程序包。
我安装的是Ubuntu 20.04,关于WSL 2的安装,请参阅《Windows Subsystem for Linux Installation Guide for Windows 10》。

为了成功运行此文说明的Electron应用程序,请确保wsl --list -v命令显示的VERSION为2。
您还需要参阅上述链接安装Windows Terminal以确保完美的WSL 2体验。
由于WSL 2开箱即用,没有用于显示Linux应用程序的窗口管理器,因此我们必须安装一个窗口管理器并配置WSL 2才能使用在Windows中查看Linux应用的GUI运行效果。
我们需要安装VcXsrv Windows X Server,然后就可以在Win10中显示Ubuntu应用程序的GUI界面了。
为确保VcsXsrv正确运行,需要做两件事:
运行下述命令安装VcsXsrv:
choco install vcxsrv

如果正常安装了node.js并且运行了官方的编译工具一键安装脚本,那么choco命令是默认已经安装好的了。如果提示choco未找到/未安装,打开node.js安装目录,运行install_tools.bat即可(会自动安装chocolatey和其它必要的编译工具,如果安装失败,则是网络异常导致,请自行查阅相关资料解决)。
打开桌面的XLaunch。选择 Multiple Windows - Start no client,下一步。

选择Clipboard 和 OpenGL,添加-ac作为额外的VcXsrv运行参数。选择完成并允许VcXsrv访问本地网络。
添加下述环境变量设置命令到你使用的终端初始化文件中(默认bash是~/.bashrc,zsh则是~/.zshrc)。
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0
export LIBGL_ALWAYS_INDIRECT=true
重启终端或source相应的配置文件(例如source ~/.zshrc)。
要测试是否一切正常,可以尝试启动一个应用程序。让我们尝试基本的x11应用程序,以确保一切正常。
sudo apt install x11-apps
xcalc

如果看到华丽的x11 calc应用,说明VcXsrv及Ubuntu 20.04 on WSL 2运行正常。
通过安装Remote - WSL可以非常方便的在VS Code中编辑和运行在Ubuntu WSL 2中的代码。
安装后,在运行了WSL的终端执行
$ code .
即可直接通过VSCode打开当前目录/项目。

到目前为止,即可在WSL的Ubuntu环境正常运行带GUI的Electron应用了。无缝运行的体验,仿佛直接打开了Windows窗口。
虽然程序已经可以正常运行,但此时还需要解决一些细节问题。
目前是无法显示中文的,需要安装下述库实现中文显示。
sudo apt install fonts-noto-cjk
如果您暂停笔记本电脑(合上笔记本屏幕),则WSL的GUI窗口将消失。
解决方法: 安装最新版的VcXsrv即可,最新版的VcXsrv解决了此问题。
WSL在其自己的虚拟网络中运行。这意味着它不遵循您的Windows代理或防火墙配置。
其实在我看来这也算不上一个问题。这对于网络应用程序的测试是有利的。可以通过配置Ubuntu自带的防火墙实现防火墙功能。
至于VM内存溢出。如果您在WSL中运行一些占用大量内存的进程,则Windows可能无法马上回收它们使用的内存。可以通过设置WSL允许使用的最高内存加以限制(WSL2默认可以使用的内存大小为主机的80%)。
如果您的屏幕分辨率较大,但是尺寸较小,则设备厂商将会建议您在Win10中开启缩放功能。
在高DPI屏幕下,应用程序显示不清晰。
由于系统隔离,需要在Ubuntu中安装输入法。
由于系统隔离,可以复制粘贴文本,但部分格式的文件尚未被支持。可以购买X410代替VcXsrv,则可以复制粘贴简单的图片。
使用WSL 2在Windows中构建Electron应用程序是一个非常绝妙的操作,这简直是太棒了!
本文将介绍如何在Windows 10操作系统中借助WSL 2开发基于Electron的Ubuntu窗口应用程序,可以实现在win10中编写代码并查看linux应用的运行效果。
借助此方法,仅需一台MacOS设备和一台Win10的设备,即可通过Electron开发和测试主流操作系统(Windows、Linux、MacOS)下桌面应用程序并可以有差异化的调用操作系统的原生API。
通过MacOS系统可以编译几乎所有平台的应用程序,例如可以在MacOS中编译Win10 x64、Linux ARM64等平台的应用程序。但是在win10或ubuntu中无法编译MacOS应用程序(可以借助虚拟机或者带有MacOS系统的Docker镜像实现MacOS平台应用程序的编译,但是可能无法正常进行签名)。关于Electron自动编译及自动更新、分发,可以参阅此视频教程。
WSL,即Linux的Windows子系统,是Windows 10的正式组件,可在Windows内部运行的完整Linux版本。
虽然WSL 1的文件系统运行缓慢,并且存在一些软件包兼容问题,但是WSL 2运行Ubuntu Linux已经相对成熟。WSL 2开箱即用,在Linux上运行的所有内容都可以在Windows上运行,只不过WSL 2当前不支持snap程序包。
我安装的是Ubuntu 20.04,关于WSL 2的安装,请参阅《Windows Subsystem for Linux Installation Guide for Windows 10》。

为了成功运行此文说明的Electron应用程序,请确保wsl --list -v命令显示的VERSION为2。
您还需要参阅上述链接安装Windows Terminal以确保完美的WSL 2体验。
由于WSL 2开箱即用,没有用于显示Linux应用程序的窗口管理器,因此我们必须安装一个窗口管理器并配置WSL 2才能使用在Windows中查看Linux应用的GUI运行效果。
我们需要安装VcXsrv Windows X Server,然后就可以在Win10中显示Ubuntu应用程序的GUI界面了。
为确保VcsXsrv正确运行,需要做两件事:
运行下述命令安装VcsXsrv:
choco install vcxsrv

如果正常安装了node.js并且运行了官方的编译工具一键安装脚本,那么choco命令是默认已经安装好的了。如果提示choco未找到/未安装,打开node.js安装目录,运行install_tools.bat即可(会自动安装chocolatey和其它必要的编译工具,如果安装失败,则是网络异常导致,请自行查阅相关资料解决)。
打开桌面的XLaunch。选择 Multiple Windows - Start no client,下一步。

选择Clipboard 和 OpenGL,添加-ac作为额外的VcXsrv运行参数。选择完成并允许VcXsrv访问本地网络。
添加下述环境变量设置命令到你使用的终端初始化文件中(默认bash是~/.bashrc,zsh则是~/.zshrc)。
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0
export LIBGL_ALWAYS_INDIRECT=true
重启终端或source相应的配置文件(例如source ~/.zshrc)。
要测试是否一切正常,可以尝试启动一个应用程序。让我们尝试基本的x11应用程序,以确保一切正常。
sudo apt install x11-apps
xcalc

如果看到华丽的x11 calc应用,说明VcXsrv及Ubuntu 20.04 on WSL 2运行正常。
通过安装Remote - WSL可以非常方便的在VS Code中编辑和运行在Ubuntu WSL 2中的代码。
安装后,在运行了WSL的终端执行
$ code .
即可直接通过VSCode打开当前目录/项目。

到目前为止,即可在WSL的Ubuntu环境正常运行带GUI的Electron应用了。无缝运行的体验,仿佛直接打开了Windows窗口。
虽然程序已经可以正常运行,但此时还需要解决一些细节问题。
目前是无法显示中文的,需要安装下述库实现中文显示。
sudo apt install fonts-noto-cjk
如果您暂停笔记本电脑(合上笔记本屏幕),则WSL的GUI窗口将消失。
解决方法: 安装最新版的VcXsrv即可,最新版的VcXsrv解决了此问题。
WSL在其自己的虚拟网络中运行。这意味着它不遵循您的Windows代理或防火墙配置。
其实在我看来这也算不上一个问题。这对于网络应用程序的测试是有利的。可以通过配置Ubuntu自带的防火墙实现防火墙功能。
至于VM内存溢出。如果您在WSL中运行一些占用大量内存的进程,则Windows可能无法马上回收它们使用的内存。可以通过设置WSL允许使用的最高内存加以限制(WSL2默认可以使用的内存大小为主机的80%)。
如果您的屏幕分辨率较大,但是尺寸较小,则设备厂商将会建议您在Win10中开启缩放功能。
在高DPI屏幕下,应用程序显示不清晰。
由于系统隔离,需要在Ubuntu中安装输入法。
由于系统隔离,可以复制粘贴文本,但部分格式的文件尚未被支持。可以购买X410代替VcXsrv,则可以复制粘贴简单的图片。
使用WSL 2在Windows中构建Electron应用程序是一个非常绝妙的操作,这简直是太棒了!