【Electron】常用小功能实现合集

一、前言

本篇主要介绍在electron项目开发过程中，一些实用小功能点的实现。比如设置开机自启动、只允许打开一个应用、设置electron项目基地为中文、获取当前的系统数据等等。

二、功能点

接下来咱们就逐一来说一说这些功能点是如何实现的。

1.设置应用开机自启动

这个功能点基本上来讲，是每个应用都要有的，并且默认打开的。毕竟我们都想用户打开电脑的第一件事情，就是启动我们的应用。 实现起来很简单，代码如下

// 主进程中
import { app } from 'electron'
app.setLoginItemSettings({ openAtLogin: true }) 

以下是该方法的官方文档说明参数详情点击查看官方文档

app.setLoginItemSettings(settings)

• settings Object* openAtLogin boolean (可选) - true 登录时打开应用程序， false 将应用从登录启动项中删除。 默认值为 false.* openAsHidden boolean (可选) macOS - true 以隐藏方式打开应用程序。 默认为false。 用户可以从系统首选项中编辑此设置, 以便在打开应用程序时检查 app.getLoginItemSettings().wasOpenedAsHidden 以了解当前值。 此设置在 MAS builds 上不可用* path string (可选) Windows - 登录时运行的可执行文件。 默认为 process.execPath。* args string[] (可选) Windows - 传递给可执行文件的控制台参数。 默认为空数组。 注意用引号包裹路径。* enabled boolean (可选) Windows - true 将更改已启用的启动注册表项，并在任务管理器和 Windows 设置中 启用 / 禁用 应用程序。 默认值为 true。* name string (可选) Windows - 要写入注册表的值名称。 默认为应用的 AppUserModelId()。 设置应用程序的登录项设置。

2.设置应用默认为中文

若你的系统默认环境是英文的，你的菜单使用role的那些，就会变成英文的。我这边是要将应用设置为固定中文的。

// 主进程中
import { app } from 'electron'
app.commandLine.appendSwitch('lang', 'zh-CN') 

3.限制只可以打开一个应用

就像我们用一般软件一样，在同一台电脑上只能打开一个客户端。如果有这样的需求，将下面的代码放到你的主进程中就可以了

// 限制只可以打开一个应用
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {app.quit()
} else {app.on('second-instance', (event, commandLine, workingDirectory) => {// 当运行第二个实例时,将会聚焦到win这个窗口if (win) {if (win.isMinimized()) win.restore()win.focus()win.show()}})
} 

具体详情大家可以点击查看官方文档说明。

3.获取当前软件运行系统环境

这个我们要通过的nodejs的os模块来实现，代码如下

// 在住进程中
const os = require('os')
const log = require('electron-log')

// cpu架构

const arch = os.arch()

log.warn('cpu架构：' + arch)

// 操作系统内核

const kernel = os.type()

log.warn('操作系统内核：' + kernel)

// 操作系统平台

const pf = os.platform()

log.warn('平台：' + pf)

// 主机名

const hn = os.hostname()

log.warn('主机名：' + hn)

// 主目录

const hdir = os.homedir()

log.warn('主目录：' + hdir)

// cpu

const cpus = os.cpus()

log.warn('*****cpu信息*******')

cpus.forEach((cpu, idx, arr) => {
var times = cpu.times

log.warn(`cpu${idx}：`)

log.warn(`型号：${cpu.model}`)

log.warn(`频率：${cpu.speed}MHz`)

log.warn(`使用率：${((1 - times.idle / (times.idle + times.user + times.nice + times.sys + times.irq)) * 100).toFixed(2)}%`)
})
// 判断当前电脑芯片是不是M1的
const isM1 = arch === 'arm64' || cpus.some(item => item.model === 'Apple M1')
log.warn('isM1', isM1) 

这里判断当前电脑芯片是否为M1的，要通过两方面来判断，一是arch，二是cup来判断。根据我自己实际的测试结果，有些M1电脑的arch显示不准确，可能会显示为x64，因此要从两方面同时判断。

4.禁用缓存

即刷新页面后，不再走缓存，而是重新获取，也不会存缓存了。

// 主进程中
import { app } from 'electron'
app.commandLine.appendSwitch('--disable-http-cache') 

5.防止页面被冻结

当程序被隐藏时，可能会有影响，导致不能接收通知等

// 主进程中
import { app } from 'electron'
app.commandLine.appendSwitch('disable-features', 'CalculateNativeWinOcclusion') 

6.销毁所有窗口

在开发过程中，我们可能需要手动的去销毁窗口实例。

// 主进程中
import { BrowserWindow } from 'electron'
BrowserWindow.getAllWindows().forEach(item => {if (!item.isDestroyed()) {item.destroy()}
}) 

三、后记

在electron的开发过程中，经常会有一些小的需求，小的功能点需要我们去实现，这里做一个小的总结，可能不全，后续会整理整理，等攒够了，再给大家分享。

本篇完结！ 撒花！ 感谢观看！ 希望能帮助到你！

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取