admin 管理员组

文章数量: 887021

【Electron

1.前言

上帝在给你打开一扇窗的同时，会给你挖个坑

最近在做Electron-Vue支持Linux系统的调研。发现坑太多了，由于Linux的发行版太多再加上还有不同的UI，导致要做版本的支持会是一个让人很崩溃的事情。

首先让我们看看Linux系统下的表现形式。

2.Linux支持Electron客户端

先了解一下Linux世界用户较多的前2大主要分支，

• RedHat Red Hat Enterprise Linux 简称RHEL rpm (RedHat, CentOS, Fedora, Oracle…)
• Debian Ubuntu Server 简称Ubuntu deb (Debian, Ubuntu, Mint, MX Linux…)
• 还有：Arch, Gentoo, SUSE, BSD, Android等…

前两大分支的包管理有2大阵营，安装文件互不相融。

• 安装文件：*.rpm，RedHat分支，CentOS等，使用yum命令安装…
• 安装文件：*.deb，Debian分支，Ubuntu等，使用apt-get命令安装…

然后2边都推出了新的规则，希望能一统江湖：

• Flatpak 是 RedHat 的东西；
• Snap 是 Canonical 的东西。

因为我制作的deb包，所以主要在Debian和Ubuntu上的支持.

2.1 DeBian支持

关于Debian的支持，我是用的是Deepin系统去做的测试，从打包到安装，在Deepin系统上表现良好，可以正常的安装使用以及正常显示左面图标。

在Deepin系统下，通过npm run build打包后能正常安装使用

但是通过build命令生成时的package.json中关于icon的配置项，在实际打包时并没有被引用。而是使用了在创建deb包时的关于Icon的配置。

	"mac": {"icon": "build/icons/icon.icns"},"win": {"icon": "build/icons/icon.ico"},"linux": {"icon": "build/icons"}

该package.json中的配置图片指向了build/icons

而该图片是electron-vue自带的图片

在打成deb文件时的配置如下

而其中的指向的图片确实我自己定义的

而在安装deb文件后，却发现不管是快捷方式启动还是任务栏图片都指向了我的deb文件中的配置

所以在这里可以得出结论：在Deepin系统中，关于Electron-vue项目中的package.json中的build关注与icon的配置其实在build过程中是不生效的。在Deepin系统中，其实生成的任务栏图标，快捷方式图标都依赖于你在.desktop文件中的配置icon。其生成后的安装包和windows下的exe文件表现形式是相似的几乎不需要修改任何代码就可以移植到deepin中使用.

2.2 Ubuntu系统支持Electron项目

一开始我是将windows下Electron-vue的项目copy到Ubuntu。然后正常的打包，通过DEBIAN的方式去创建deb文件，安装deb文件，发现在应用列表中显示的图片是用户自己在deb配置中配置的。可以在应用了列表中支持显示

在任务栏中却不显示任何图片，不管是官方的图片还是用户自己定制的图片

就很懵逼，所以我就去Electron-vue官网查找有没有对应的设置，由于Electron-vue从2019年就不维护了，即便我在上面提了问题，也久久收不到回复。

于是我就尝试重新下载一个Electron-vue项目，不做任何修改，然后通过制作deb的方式去创建安装文件，发现在执行npm run dev的时候，在任务栏撒花姑娘依旧是一片空白(如上图所示)。

这么说，官方给出的Demo压根就不支持Ubuntu下的安装？还是说Demo中的配置有问题？

由于Electron-vue也没有人维护，便尝试着去github上去查一下Electron，看看有没有类似的问题。

大都碰到的问题都是托盘中的图标问题，跟我的问题有出入，因为我的应用程序是在托盘中显示正常，在任务栏显示不正常。

而有一部分问题指向了应用指示器，在一片文章上看到了关于应用指示器，其中提到了Electron。

1.修改应用指示器

参考：.html

It looks like Dropbox isn't the only AppIndicator that doesn't work in Ubuntu 17.04 Zesty Zapus (under Unity) due to the change of XDG_CURRENT_DESKTOP from "Unity" to "Unity:Unity7".

译文：由于XDG_CURRENT_DESKTOP从Unity改为Unity:Unity7，导致应用指示器无法在Unity下的Ubuntu 17.04 Zesty Zapus

Electron applications (such as the new Skype For Linux, WMail, PB For Desktop and many others) are affected as well, but in a different way. For Electron applications, the indicator is not displayed at all in Ubuntu 17.04 Zesty Zapus under Unity.

译文：Electron应用(比如linux下的Skype， WMail, PB和其他的一些桌面应用)也会受到影响，但表现的方式/形式不一样。对于Electron应用，在Unity下的Ubuntu 17.04 Zesty Zapus根本就没有这个应用指示器。

The fix is similar to the one applied to the Dropbox indicator. Simply run the application with "env XDG_CURRENT_DESKTOP=Unity". For example, to start Skype For Linux, you would use:
env XDG_CURRENT_DESKTOP=Unity skypeforlinux

译文：Electron应用指示器的修复类似于Dropbox。使用env XDG_CURRENT_DESKTOP=Unity来简单的执行程序。例如，启动在linux下Skype，你可以这么做：

env XDG_CURRENT_DESKTOP=Unity skypeforlinux

To make the fix permanent, copy the application desktop file from /usr/share/applications/ to ~/.local/share/applications/, then edit the file and change the "Exec" line by adding "env XDG_CURRENT_DESKTOP=Unity" (without the quotes) immediately after "Exec=".

译文：要想永久性的修复，需要将/usr/share/applications/下对应的应用.desktop文件copy到~/.local/share/applications/，然后编辑.desktop文件，在Exec所在行直接在"Exec="后面添加XDG_CURRENT_DESKTOP=Unity，

Some applications are set to start automatically and in that case, you'll have to edit the desktop file from ~/.config/autostart/ in the same way.

译文：一些其他的应用如果设置了自启动，在这种情况下，你必须用相同的方式去修改~/.config/autostart/下应用对应的desktop文件。

Note that some applications overwrite any changes made to their autostart files, located in ~/.config/autostart/. A way around this is to rename the autostart file, then in the application settings, set the application not to start on login. This way, the modified autostart file will be used (which has a different name and contains the workaround).

译文：注意，一些应用程序会覆盖对位于~/.config/autostart/中的自动启动文件所做的任何更改。解决这个问题的方法是重命名自动启动文件，然后在应用程序设置中，将应用程序设置为登录时不启动。这样，将使用修改后的自动启动文件(它有不同的名称，并包含解决方案)。

结果：没有解决对应的问题，怀疑应用指示器并非是解决任务栏图标不显示的问题。而且存在一些文件copy修改的操作，在实际安装中不友好。

2. 创建软连接

在Electron中搜索无果后，便将注意力转移到Ubuntu上，其中找到了类似的情况

于是尝试创建软连接的方式，没有解决对应的问题，因为Ubuntu20+ Gnome并没有对应的Steam文件

ln -s ~/.var/app/com.valvesoftware.Steam/.local/share/Steam ~/.local/share/Steam

搜索之后也没有对应的解决方案。

在开发环境下，在托盘菜单中显示的是三个点，并不是你的icon图片，但是在build之后是没有问题的，所以我就没有关注。

3. 回归最初

大概花了一周的时间去调研在Electron-vue，Elecctron，Ubuntu中任务栏图标不显示的的问题。都没有找到解决方案，所以不得不又把目光锁定到项目的最初。

由于在github上有出现过类似的问题，但是问题都被关闭了。便考虑了下是不是Electron版本的问题导致的，然后在后期版本中修复了这个问题。

查看了一下Electron-vue中的版本Electron版本居然还是v2版本，而Electron官方版本已经到v11了。决定升级一下Electron版本。

抛开自己的Electron-vue项目，转而到Electron-React项目，发现这个项目一直有人在维护，而且electron版本也是最近的，便构建了一个纯净的Electron-vue项目，然后构建deb文件，发现现象跟Electron-vue一样。

我不得不再次问号，……&%%&……%&……@…………@……#@@%￥@%￥

既然这样我就直接用Electron去构建一个项目，让一切回到最初，最简单的方式去验证。

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "electron ."},

我草，这…还是不显示。
我就&……&…………（&（&（&（（

官方在原Demo中使用的是这个命令

   "start": "electron",

执行yarn start的时候，奇怪的事情发现了


也就是我在构建原Electron项目时，通过yarn start启动的是原官方的项目，而执行yarn dev的时候执行的是自己构建的项目代码，也就是说官方的可以显示，而我自己的不能显示(在不改任何代码的情况下)。

于是问题就开始变得清晰了，也许在官方原项目进行打包的时候它配置了图片的路径，而我在实际开发自己的项目时并没有设置对应的图片。

那么开始coding…，在创建窗口的时候引入一张图片icon:'icon.png'

function createWindow () {const win = new BrowserWindow({width: 800,height: 600,frame:false,useContentSize: false,resizable: false,webPreferences: {nodeIntegration: true},icon:'icon.png'})win.loadFile('index.html')
}

于是奇迹出现了，它来了，它来了，它带着图片过来了

那这样的话，我就知道问题在哪了，启动程序时，任务栏的图片是在程序中生成的，而不是在构建应用时产生的。

所以在前面提到的关于package.json中的build配置并没有什么用

于是我又把目光转回到我的Electron-vue项目，加上了图片设置

// 创建窗体
function createWindow() {let appIcon //创建系统通知区菜单if (process.env.NODE_ENV !== 'development') {//生产环境appIcon = path.join(__static, './icon.png')} else {//研发环境appIcon = path.join(__dirname, './icon.png')}/*** Initial window options*/mainWindow = new BrowserWindow({height: 350,width: 400,useContentSize: false,resizable: false,frame: false,icon: appIcon})
}

需要注意的是：在Electron-vue生产环境的路径图片存放在static下

然后我就尝试在开发环境和生产环境，程序均可正常运行


无论是在任务栏，还是桌面快捷方式，还是在托盘中，均能正常显示。

终于结束了我一周的调研，结论就是：在选择框架上一定要选择有近期持续更新的架构，否则你选择的结构不维护了，连问问题都没有给你解答。

本文标签： Electron