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

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

前言

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项目

什么是Electron

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

本文只做发布Windows

安装electron（已经安装完成的可以跳过）

已经安装了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 [email protected]

然后再安装electron，就成功了

成功之后输入

electron

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

查看版本（之后会用到）

electron -v

把CocosCreator项目打包web变成桌面应用

新建一个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文件中含有标签