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

3-创建一个透明的窗口

724
0
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实现热加载

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

0-桌宠开发前言

1-搭建环境和创建简单的应用程序

2-修改项目结构

3-创建一个透明的窗口

4-nodemon实现热加载

5-获取桌宠每一帧图片

6-Pixi.js加载桌宠初始动画

7-添加鼠标事件

8-获取区域颜色和判断桌宠本体

9-设置进程通信和鼠标穿透

10-实现桌宠拖拽

11-实现桌宠随机动作

12-实现桌宠播放语音

13-实现桌宠词板功能

14-设置系统托盘

15-实现桌宠模组切换

16-桌宠数据和状态拓展

17-生成ICO图标和准备打包

18-完成开发并打包桌宠应用

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点