3-创建一个透明的窗口

芋圆社区 > 编程 > 【项目】桌宠之旅 > 3-创建一个透明的窗口

742

2023-07-02

2023-07-18

Hey、小怪兽

• 下面需要创建一个桌面的窗口用来显示桌宠，首先引入需要的东西：
- app：Electron中控制应用程序的事件生命周期的东西
- screen：检索有关屏幕大小、显示器、光标位置等的信息
- BrowerWindow：创建并控制浏览器窗口
- path：Node.js一个东西，这里主要用来使用path的方法

const { app, screen, BrowserWindow } = require("electron");
const path = require("path");

• 初始化窗口：
```
// 主窗口
let mainWindow = null;
```
• 写一个创建窗口的方法：
- 用screen.getPrimaryDisplay().workAreaSize获取了当前的屏幕尺寸，解构出来width和height
- new一个窗口，它的属性是390的宽度高度（这里因为我搞到的桌宠图片是390x390的）
- x和y就是窗口的位置，这样写会让它显示在右下角
- preload脚本的地址：这里用了Node.js提供的path.resolve()，__dirname是一个全局变量，表示当前模块的目录路径，这里将会返回preload脚本文件的绝对路径，上一章节我们创建的preload.js是在/src/_preload/preload.js下的
- webContents.openDevTools开启调试工具，可以不开启，也就是Chrome的F12控制台
- loadFile就是加载的HTML页面，就是上一章节的/src/index.html
- on方法监听"ready-to-show"，如果可以显示了的话，窗口会显示

const createMainWindow = () => {
    // 获取当前桌面的宽度和高度
    const size = screen.getPrimaryDisplay().workAreaSize;
    const { width, height } = size;

    mainWindow = new BrowserWindow({
        width: 390,
        height: 390,
        // 起始位置是屏幕宽度减去窗口宽度，再减去10个像素
        x: width - 390 - 10,
        y: height - 390 - 10,
        // Preload 脚本
        webPreferences: {
            preload: path.resolve(__dirname, "../_preload/preload.js"),
        },
    });

    // 开启调试工具
    // mainWindow.webContents.openDevTools();

    mainWindow.loadFile(path.resolve(__dirname, "../index.html"));

    mainWindow.on("ready-to-show", () => {
        mainWindow.show();
    });
};

• 最后在外层加上执行方法，得到一个当Electron已初始化后fulfill的Promise后创建窗口：

app.whenReady().then(() => {
    createMainWindow();
});

• 还是在终端启动pnpm start：
• 完美显示窗口了，还是需要小小的改进一下：
- 桌宠肯定是背景透明的，没有这些窗口边框和菜单栏
- 桌宠肯定是要一直置顶的，它会显示在你所有应用的上方
• 先去/src/index.html里写点东西，到html文件夹里输入英文的感叹号，按Tab键或者回车，如果没有的话就复制俺的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

• html的初始内容写好，先写个红色的方框代替桌宠：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaroPet</title>
    <style>
        .taro-pet {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="taro-pet" class="taro-pet"></div>
</body>
</html>

• 终端按ctrl+c可以中止程序，再pnpm start：
• 出来了！是红色的方框！假设这个就是桌宠，再回到/src/_main/main.js，加上这些东西：

mainWindow = new BrowserWindow({
    width: 390,
    height: 390,
    // 起始位置是屏幕宽度减去窗口宽度，再减去10个像素
    x: width - 390 - 10,
    y: height - 390 - 10,
    // 隐藏菜单栏
    autoHideMenuBar: true,
    // 设置为透明窗口
    transparent: true,
    // 隐藏窗口边框
    frame: false,
    // 窗口置顶
    alwaysOnTop: true,
    // 隐藏任务栏图标
    skipTaskbar: true,
    // 禁止改变窗口大小
    resizable: false,
    // 先隐藏窗口
    show: false,
    // Preload 脚本
    webPreferences: {
        preload: path.resolve(__dirname, "../_preload/preload.js"),
    },
});

• 完美，已经用Electron创建了一个透明的窗口显示桌宠了！
• /src/_main/main.js完整代码：

const { app, screen, BrowserWindow } = require("electron");
const path = require("path");
// 主窗口
let mainWindow = null;

const createMainWindow = () => {
    // 获取当前桌面的宽度和高度
    const size = screen.getPrimaryDisplay().workAreaSize;
    const { width, height } = size;

    mainWindow = new BrowserWindow({
        width: 390,
        height: 390,
        // 起始位置是屏幕宽度减去窗口宽度，再减去10个像素
        x: width - 390 - 10,
        y: height - 390 - 10,
        // 隐藏菜单栏
        autoHideMenuBar: true,
        // 设置为透明窗口
        transparent: true,
        // 隐藏窗口边框
        frame: false,
        // 窗口置顶
        alwaysOnTop: true,
        // 隐藏任务栏图标
        skipTaskbar: true,
        // 禁止改变窗口大小
        resizable: false,
        // 先隐藏窗口
        show: false,
        // Preload 脚本
        webPreferences: {
            preload: path.resolve(__dirname, "../_preload/preload.js"),
        },
    });

    // 开启调试工具
    // mainWindow.webContents.openDevTools();

    mainWindow.loadFile(path.resolve(__dirname, "../index.html"));

    mainWindow.on("ready-to-show", () => {
        mainWindow.show();
    });
};

app.whenReady().then(() => {
    createMainWindow();
});

• /src/index.html完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TaroPet</title>
    <style>
        .taro-pet {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="taro-pet" class="taro-pet"></div>
</body>
</html>

上一篇：2-修改项目结构

下一篇：4-nodemon实现热加载

3-创建一个透明的窗口

回复