Electron+Vue：一触即发！解锁全屏震撼体验！

2023-10-02 06:42:12

Electron + Vue 的全屏盛宴：打造跨平台全屏应用

Electron 和 Vue 的完美结合

Electron 是一个用于构建跨平台桌面应用程序的框架，而 Vue 是一个流行的 JavaScript 框架，用于构建用户界面。当这两者结合时，你将获得强大的开发能力，轻松创建出具有全屏功能的桌面应用程序。Electron 的全屏 API 让你的应用可以无缝地切换到全屏模式，为用户带来更加沉浸式的体验。

一键全屏：轻松实现

Electron 提供了 BrowserWindow API，可以轻松控制应用窗口。要在应用启动时就以全屏模式运行，只需要在创建 BrowserWindow 对象时将 fullscreen 属性设置为 true 即可。

const { BrowserWindow } = require('electron');

const win = new BrowserWindow({
  width: 800,
  height: 600,
  fullscreen: true
});

win.loadURL('index.html');

动态全屏：随心所欲，自由切换

有时，你可能需要在运行时切换应用的显示模式。Electron 也为你提供了方便的 API 来实现这一点。你可以使用 setFullScreen 方法将应用切换到全屏模式，也可以使用 setNormal 方法将其切换回正常窗口模式。

win.setFullScreen(true);
win.setNormal();

自动适应屏幕：全屏无忧，无缝衔接

为了让你的应用在不同屏幕上都能完美呈现，你需要根据屏幕的宽高来调整窗口的大小。Electron 提供了 screen API，可以轻松获取屏幕的信息。你可以使用 screen.getPrimaryDisplay() 方法获取主屏幕的信息，然后使用 bounds 属性来获取屏幕的宽高。

const screen = require('electron').screen;

const primaryDisplay = screen.getPrimaryDisplay();
const { width, height } = primaryDisplay.bounds;

win.setSize(width, height);