Electron霸屏功能总结

前言

这一段时间都在弄Electron的霸屏功能，Electron中提供了一个方法setKiosk,我以为他可以帮我解决很多的事情，但是实际上，霸屏的实现还需要我们自己干很多事。总结一下有以下这些事

触摸板三指和四指手势问题（Windows中）
多屏幕问题
系统组合键问题
鼠标侧键前进后退问题
共享屏幕问题
切换用户问题

我们来一一解决

后面有npm包地址，可以直接安装到项目中使用。也有源码仓库地址。

npm包基本都解决了，4要自己解决。

正文

触摸板三指和四指手势问题

检测三指和四指手势值，让用户修改。但是首先要要确认用户是台式还是笔记本。

可以看一下 juejin.cn/post/761081... 这篇文章

通过当前用户sid，查询触摸板三指和四指手势值为不为0，不为0则通知用户进行修改

如果我们在霸屏的时，触摸板三指和四指手势还能使用，那么就可以利用手势切到第二个桌面。所以我们要把他设置为无。

我们修改注册表，在HKCU:\\Software\\Microsoft\\Windows\\CurrentVersion\\PrecisionTouchPad路径下，有两个值ThreeFingerSlideEnabled、FourFingerSlideEnabled对应三指和四指。

如果你没有这两个值的话，表示你从来没有调过三指和四指的手势，并不影响。

可以通过PowerShell设置值，但是虽然值设置了，但是一直没有生效，试了好几种方法，总结让用户自己设置为无

详细代码可以见仓库地址。

多屏幕问题

这个好解决，创建窗口盖住副屏就可以了。

js 复制代码

 /**
   * 为所有非主屏创建黑幕覆盖窗口。
   */
  createCovers(): void {
    // 先清理旧副屏窗口，避免重复创建。
    this.disposeCovers();

    // 获取全部显示器列表。
    const displays = screen.getAllDisplays();
    // 获取主显示器。
    const primaryDisplay = screen.getPrimaryDisplay();

    displays.forEach((display) => {
      if (display.id === primaryDisplay.id) {
        return;
      }

      // 为副屏创建覆盖窗口。
      const coverWindow = new BrowserWindow({
        x: display.bounds.x,
        y: display.bounds.y,
        width: display.bounds.width,
        height: display.bounds.height,
        frame: false,
        backgroundColor: "#000000",
        resizable: false,
        focusable: false,
        movable: false,
        skipTaskbar: true,
      });

      // 明确覆盖窗口边界，确保跨屏精准覆盖。
      coverWindow.setBounds({
        x: display.bounds.x,
        y: display.bounds.y,
        width: display.bounds.width,
        height: display.bounds.height,
      });
      coverWindow.setAlwaysOnTop(true, "screen-saver", 1);
      coverWindow.setMenuBarVisibility(false);
      void coverWindow.loadURL("about:blank");

      this.coverWindows.push(coverWindow);
    });
  }

系统组合键问题

不禁用系统组合键的话，用户可以切换窗口。可以看一下这个文章，也是自己写的一个npm包。但是有一些系统组合键是没有办法禁用的，如Ctrl+Alt+Delete（安全选项界面）。

juejin.cn/post/753868...

鼠标侧键前进后退问题

修改路由的方式就可以了，我没有页面返回，你返回也没有用。

js 复制代码

navigate('/login', { replace: true });

共享屏幕问题

霸屏时不让屏幕被共享，Electron有一个属性

js 复制代码

  window.setContentProtection(true);

切换用户问题

上面提到可以进入Ctrl+Alt+Delete（安全选项界面），里面有一个切换用户按钮，这个按钮也可以去掉，这样就没有办法切换用户了。

但是要管理员权限，所以打包时要设置管理员权限。electron-builder设置

js 复制代码

"build": {
  "win": {
    "requestedExecutionLevel": "requireAdministrator"
  }
}

详细代码见仓库地址

js 复制代码

 /**
   * 设置是否允许显示"切换账户"入口。
   */
  public async setSwitchAccountEnabled(enabled: boolean): Promise<void> {
    try {
      // 非 Windows 平台直接跳过。
      if (process.platform !== "win32") {
        return;
      }

      // 目标注册表路径。
      const regPath =
        "HKLM:\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Policies\\System";
      // 注册表值：0=允许快速用户切换，1=隐藏快速用户切换。
      const hideFastUserSwitchingValue = enabled ? 0 : 1;
      // PowerShell 脚本（开启 Stop，确保异常可捕获）。
      const psScript = [
        "$ErrorActionPreference = 'Stop'",
        `Set-ItemProperty -Path '${regPath}' -Name 'HideFastUserSwitching' -Value ${hideFastUserSwitchingValue} -Type DWord`,
      ].join("; ");

      this.logger.info(`setSwitchAccountEnabled: ${enabled}`);
      await this.runPowerShell(psScript);
    } catch (error) {
      this.logger.error(
        `Failed to set HideFastUserSwitching: ${error instanceof Error ? error.message : String(error)}`,
      );
    }
  }

结尾

npm包地址： www.npmjs.com/package/zt-...

仓库地址：github.com/lzt-T/zt-el...