【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率

• 【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率
• • 前言
  • • 技术点
  • 一、Electron项目
  • • 什么是Electron
    • 安装electron（已经安装完成的可以跳过）
    • 把CocosCreator项目打包web变成桌面应用
    • CocosCreator代码和Electron的通讯（渲染进程和主进程的通讯）
  • 二、使用nircmd.exe调用原生API
  • • 什么是nircmd，它都能干什么？
    • 如何使用nircmd.exe
    • 在代码中使用nircmd.exe
  • 三、获取屏幕支持的所有分辨率和当前分辨率
  • • node-win-screen-resolution插件
    • 编译插件
    • 在代码中使用
  • 四、在Creator代码中封装API
  • 五、构建，发布exe（只想用不想搞懂原理）
  • • Cocos中API的封装
    • 修改package.json中的electron版本
    • 改图标
    • 构建
  • 六、做成安装包
  • 七、源码和体验地址
  • 结尾

CocosCreator关于发布Windows的资料非常少，甚至官方的文档左侧目录里连个“发布windows”的标题都没有，发win的坑太多了

比如安装VisualStudio的时候有一个Windows 8.1 SDK和UCRT SDK模块，2.x版本不勾就报错，而3.x不报错，文档就没有写。希望官方可以完善相关文档

打包Windows后，并不是全屏的，如何去全屏游戏呢，如何在游戏中去自由控制全屏窗口化或者去修改分辨率呢？这方面的资料基本为零，我只找到了一个关于全屏的资料，也只对2.x有效

我使用了一种很有意思的方案实现了全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率！那就是

Electron + HTML + nircmd + node-win-screen-resolution插件

用这一套方案，不需要去打包Windows，只需要发布web-mobile，使用electron框架做成桌面应用，利用第三方库和插件去实现

文末有源码

• Electron和Creator的通讯
• 在Creator里封装好API随意调用
• 获取电脑当前分辨率，获取屏幕支持的所有分辨率
• 修改电脑的分辨率
• 调用一些原生接口，比如静音、休眠、截图等

来看看效果

简单来说，Electron可以把网页变成桌面应用，支持发布到Windows、macOS和Linux
中文文档

本文只做发布Windows

已经安装了electron的可以跳过

首先要安装nodejs和electron，我的电脑上已经安装了不能重复安装，我特意开了一个win10虚拟机重新开始安装环境

安装electron，首先要安装nodejs
官网下载nodejs
直接下载安装，一路下一步即可

安装完右键左下角win图标，打开power shell（打开cmd也可以）

分别输入

node -v

npm -v

显示版本就可以了

接下来安装electron，在安装之前建议先把npm换成淘宝源

npm config set registry https://registry.npm.taobao.org/

不换会特别慢，甚至导致错误
检测是否配置成功

npm config get registry

然后全局安装electron

npm install -g electron

我这里安装的时候报了错

意思是npm有新版本需要更新
那就按照他的要求输入

npm install -g npm@7.24.1

然后再安装electron，就成功了

成功之后输入

electron

弹出一个这样的窗口就算安装成功了

查看版本（之后会用到）

electron -v

新建一个3.x的hello world项目
啥也不用改直接打包web-mobile

在任意位置新建一个文件夹，就叫他test吧（路径最好不要中文）
把刚刚打包好的所有文件复制到 test 文件夹

按住shift不松手，在文件夹的空白部分右键，打开power shell

输入

npm init

然后一直按回车
这样就创建了package.json文件

把它改成下面这样，作者、描述可以随便写

electron项目需要一个入口文件，它就是main.js（可以叫它主进程），刚刚创建的package.json的main就指向了它，不过它还不存在，那就新建一个main.js吧

文档的话：
任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程(稍后详细介绍)。

main.js的代码如下
先把代码复制粘贴进去，一会详细讲

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

// 声明窗口的变量
let win;

// 当app完成初始化时，创建一个窗口
app.on('ready', createWindow);

// 在最后一个窗口被关闭时退出应用
app.on('window-all-closed', () => {
    app.quit();
});

// 创建一个窗口
function createWindow () {

    // 创建一个宽800，高600的窗口
    win = new BrowserWindow({
        // width 和 height 将设置为 web 页面的尺寸(译注: 不包含边框), 这意味着窗口的实际尺寸将包括窗口边框的大小，稍微会大一点。 默认值为 false.
        useContentSize: true,

        // 窗口宽高
        width: 800,
        height: 600,

        // 最小宽度和高度
        minWidth: 800,
        minHeight: 600,

        // 标题   默认窗口标题 默认为"Electron"。 如果由loadURL()加载的HTML文件中含有标签