# CreatorBuildWindowsAPP **Repository Path**: binary_development_chenshuai7685780/creator-build-windows-app ## Basic Information - **Project Name**: CreatorBuildWindowsAPP - **Description**: CreatorBuildWindowsAPP 基于electron的CocosCreator发布Windows方案 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 8 - **Created**: 2022-06-28 - **Last Updated**: 2024-04-01 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # CreatorBuildWindowsAPP CreatorBuildWindowsAPP 基于electron的CocosCreator发布Windows方案 # 【win】全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率 # ## 前言 ## CocosCreator关于发布Windows的资料非常少，甚至[官方的文档](https://docs.cocos.com/creator/3.3/manual/zh/editor/publish/)左侧目录里连个“发布windows”的标题都没有，发win的坑太多了 比如安装VisualStudio的时候有一个**Windows 8.1 SDK和UCRT SDK**模块，2.x版本不勾就报错，而3.x不报错，文档就没有写。**希望官方可以完善相关文档** ![](https://img-blog.csdnimg.cn/img_convert/75076d31c812eab89cdc72d393770ed8.png) 打包Windows后，并不是全屏的，如何去全屏游戏呢，如何在游戏中去自由控制全屏窗口化或者去修改分辨率呢？这方面的资料基本为零，我只找到了一个关于全屏的[资料](https://blog.csdn.net/wudics/article/details/85346288)，也只对2.x有效 我使用了一种很有意思的方案实现了**全屏、窗口化、动态修改分辨率和获取屏幕支持的所有分辨率**！那就是 **Electron + HTML + nircmd + node-win-screen-resolution插件** 用这一套方案，不需要去打包Windows，只需要发布web-mobile，使用electron框架做成桌面应用，利用第三方库和插件去实现 文末有源码 ### 技术点 ### - Electron和Creator的通讯 - 在Creator里封装好API随意调用 - 获取电脑当前分辨率，获取屏幕支持的所有分辨率 - 修改电脑的分辨率 - 调用一些原生接口，比如静音、休眠、截图等 来看看效果 ![](https://img-blog.csdnimg.cn/img_convert/d589e036081d624f62d2a0dfc30a2443.png) ![](https://img-blog.csdnimg.cn/img_convert/f818e5ef7990930dd1a750d1b73f9e72.png) ![](https://img-blog.csdnimg.cn/img_convert/46649820239993107583960de7d6eb3e.png) ![](https://img-blog.csdnimg.cn/img_convert/6a2d66d29168d39e544fdc2d257cf645.png) ## 一、Electron项目 ## ### 什么是Electron ![](https://img-blog.csdnimg.cn/img_convert/f7f4f08fb9bc3d45576d78df9965d418.png) 简单来说，Electron可以把网页变成桌面应用，支持发布到Windows、macOS和Linux [中文文档](https://www.electronjs.org/docs) 本文只做发布Windows ### 安装electron（已经安装完成的可以跳过） **已经安装了electron的可以跳过** 首先要安装nodejs和electron，我的电脑上已经安装了不能重复安装，我特意开了一个win10虚拟机重新开始安装环境 安装electron，首先要安装nodejs [官网下载nodejs](http://nodejs.cn/download/) 直接下载安装，一路下一步即可 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1facf4d8a26d4fc49b1b932435608c14.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 安装完右键左下角win图标，打开power shell（打开cmd也可以） ![在这里插入图片描述](https://img-blog.csdnimg.cn/68b901eeabe04322b6d2b26226bd0d1f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_11,color_FFFFFF,t_70,g_se,x_16) 分别输入 ```bash node -v ``` ```bash npm -v ``` 显示版本就可以了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/cc9219fd6d77437dba8e86130db6ea48.png) 接下来安装electron，在安装之前建议先把npm换成淘宝源 ```bash npm config set registry https://registry.npm.taobao.org/ ``` 不换会特别慢，甚至导致错误 检测是否配置成功 ```bash npm config get registry ``` 然后全局安装electron ```bash npm install -g electron ``` 我这里安装的时候报了错 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e2416718ead14e1cbcce750a13389019.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 意思是npm有新版本需要更新 那就按照他的要求输入 ```bash npm install -g npm@7.24.1 ``` 然后再安装electron，就成功了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5103a49e8699463eb6d5a77a8c86c9ba.png) 成功之后输入 ```bash electron ``` 弹出一个这样的窗口就算安装成功了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/9e62454e300747f98cd31ef79b987816.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 查看版本（之后会用到） ```bash electron -v ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/9e003c10fabc4deaa16ed3dbc493156a.png) ### 把CocosCreator项目打包web变成桌面应用 新建一个3.x的hello world项目 啥也不用改直接打包web-mobile ![在这里插入图片描述](https://img-blog.csdnimg.cn/dea6ddd4a7d24d0faa5cd48b3088d4ac.png) 在任意位置新建一个文件夹，就叫他**test**吧（路径最好不要中文） 把刚刚打包好的所有文件复制到 test 文件夹 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d43518bb5550463c92b0cee038b27060.png) 按住shift不松手，在文件夹的空白部分右键，打开power shell ![在这里插入图片描述](https://img-blog.csdnimg.cn/101fc36216d24353aff9c0b76b1bf333.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 输入 ```bash npm init ``` 然后一直按回车 这样就创建了package.json文件 ![在这里插入图片描述](https://img-blog.csdnimg.cn/6c6b9097a90240e8bc6eeca87ca26787.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_17,color_FFFFFF,t_70,g_se,x_16) 把它改成下面这样，作者、描述可以随便写 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8ff025fb15ac4e07902ae9c623ccd7b6.png) electron项目需要一个入口文件，它就是main.js（可以叫它**主进程**），刚刚创建的package.json的main就指向了它，不过它还不存在，那就新建一个main.js吧 文档的话： 任何 Electron 应用程序的入口都是 main 文件。 这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程(稍后详细介绍)。 main.js的代码如下 先把代码复制粘贴进去，一会详细讲 ```javascript 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文件中含有标签，此属性将被忽略。 // title: "我的应用", // 网页功能设置，必须写这些，如果不写Cocos就不能调用封装好的事件 webPreferences: { nodeIntegration: true, enableRemoteModule: true, contextIsolation: false, }, }) // 窗口中显示的网页 // __dirname,表示main.js所在的目录路径 win.loadURL(__dirname + "/index.html"); // 全屏 win.setFullScreen(true); // 最大化窗口 // win.maximize(); // 删除窗口的菜单栏 win.removeMenu(); // 任务栏图标是否闪烁 win.flashFrame(true); // 监听窗体关闭事件，当窗体已经关闭时，将win赋值为null，垃圾回收。 win.on('closed', () => { win = null; }) } ``` 然后在test文件夹的所在目录（注意不是test文件夹内）打开power shell，输入 ```bash electron test ``` 这样就运行了 不出意外，你会看到hello world场景的小人在慢慢地跳舞，而且还是全屏的![在这里插入图片描述](https://img-blog.csdnimg.cn/95ffdb4d3c7448e6b710b9f1acd6314e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 这里有概率会出现一个错误，不影响程序正常运行，就没有去管他，不知道为什么引起也不知道怎么解决，希望大佬们，交流、指导！感谢！！！ ![在这里插入图片描述](https://img-blog.csdnimg.cn/7396f83bc6df427c89afa04e2a4c1ea0.png) 现在，来看看main.js都写了什么吧 首先从electron引入了BrowserWindow和app模块 ![在这里插入图片描述](https://img-blog.csdnimg.cn/31e8c120c0f3486d80684e1ddde84fc2.png) **BrowserWindow是创建并控制浏览器窗口** **app是控制应用程序的事件生命周期** [app官方文档](https://www.electronjs.org/docs/api/app) [BrowserWindow官方文档](https://www.electronjs.org/docs/api/browser-window) 声明窗体变量，方便之后对窗口进行全屏、大小设置等等 程序加载完成后创建一个窗口 在最后一个窗口被关闭的时候退出应用 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4f92ef4fec594f918b20c86048eaa2b4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_10,color_FFFFFF,t_70,g_se,x_16) 来看看createWindow方法是怎么创建窗口的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d8223bd9f19c425893f8535b43bff626.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_12,color_FFFFFF,t_70,g_se,x_16) new出一个BrowserWindow实例，设置一些属性，这里有超级多的属性可以自定义，根据自己的需求想怎么样就怎么样，[文档](https://www.electronjs.org/docs/api/browser-window)写的很详细很详细了，还多很多实例方法，之后就是用这些方法实现全屏、窗口化等 代码中的网页功能设置这几行代码必须有，非常重要，没有它之后electron不能和Cocos的代码通讯 ![在这里插入图片描述](https://img-blog.csdnimg.cn/b94b8bbf07fc487d83eb63a0c025e14d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 为什么能看到小人跳舞呢，窗口要显示什么呢？窗口最终将显示一个网页，而这个网页，就是刚刚打包好的web-mobile中的index.html，代码用loadURL指定了窗口将显示的网页就是main.js所在目录的index.html，之前讲过main.js叫做**主进程**，我们的网页就叫做**渲染进程** ![在这里插入图片描述](https://img-blog.csdnimg.cn/c5483e72b87a4121a988ac4e7908ebd4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_15,color_FFFFFF,t_70,g_se,x_16) 这里就可以使用一些窗口的实例方法设置窗口刚创建完的样子，比如是否全屏、是否最大化窗口等等，这里一定要有 ```javascript win.removeMenu(); ``` 不写这句代码会造成最上面有一层菜单，作为一个游戏这肯定不是想要的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ba72d7f6da8c439f8aad93ff1b5e02bc.png) ### CocosCreator代码和Electron的通讯（渲染进程和主进程的通讯） [官方的打包steam方案中也有提到与electron的通讯](https://mp.weixin.qq.com/s/hxGYUWYU5vhtl82_kk3v2Q) 刚才的main.js，只能在窗口创建完的时候执行一些实例方法，如何在打包好的网页、在Cocos中调用这些方法呢？ 在主进程main.js中，从electron导入[ipcMain模块](https://www.electronjs.org/docs/api/ipc-main) **这个模块可以在主进程中添加渲染进程可以调用的事件** ![在这里插入图片描述](https://img-blog.csdnimg.cn/44f8488dcf6c423eb8470edda2c6d33f.png) 这么写，就注册了两个事件供渲染进程调用，aaa，bbb就是自定义的名字，每个事件都有一个固定的名字 aaa是一个void函数，没有返回值，而bbb有字符串作为返回值 ```javascript // 添加一个事件供渲染进程调用 ipcMain.on('aaa', (event, arg) => { console.log("aaa main"); }) // 添加一个有返回值的事件供渲染进程调用 ipcMain.on('bbb', (event, arg) => { event.returnValue = 'hello world'; }) ``` 在Creator中新建一个TS脚本取名Electron Electron.ts ```typescript import { _decorator, Component, Node } from 'cc'; const { ccclass, property } = _decorator; // electron模块，打包web-mobil后在HTML中定义全局变量electron const electron = (window as any).electron; @ccclass('Electron') export class Electron extends Component { onLoad () { // 执行主进程的方法 this.aaa(); console.log("返回值结果：", this.bbb()); } // 执行主进程自定义的方法 aaa () { electron.ipcRenderer.send("aaa"); } // 返回主进程中自定义的字符串 bbb (): string { return electron.ipcRenderer.sendSync("bbb"); } } ``` 渲染进程调用主进程注册好的事件需要借助[ipcRenderer模块](https://www.electronjs.org/docs/api/ipc-renderer) 首先在脚本里面获取一下electron，这里是全局变量，等打包web-mobile后需要在index.html里面加上 这里只是说一下，后面还会讲 ```bash window.electron = require('electron'); ``` 获取到了electron，就可以使用ipcRenderer模块接收事件了，调用一个void函数和调用一个有返回值的函数所用方法可不一样哦 随便找个节点把脚本挂上 这时候运行会报错，报错就对了，这是正常现象，因为代码根本找不到electron，必须在打包好的index.html里面定义electron（马上就要详细讲了） ![在这里插入图片描述](https://img-blog.csdnimg.cn/0e06945b74934329a471a1dc6e71d7bf.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_19,color_FFFFFF,t_70,g_se,x_16) 打包web-mobile ![在这里插入图片描述](https://img-blog.csdnimg.cn/324d6503dd2f493e901b1137100d707b.png) 放到test文件夹，替换掉之前的文件 在Creator的代码里从全局变量获取了electron，但并没有定义全局变量electron ![在这里插入图片描述](https://img-blog.csdnimg.cn/b4a2163d5a9f45e99b182f60a0b1eef0.png) 必须在打包之后的index.html的body里面加上scripts定义electron，就像下面这样，这样才不会找不到electron而报错 ```html <script> window.electron = require('electron'); </script> ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/9960d7212b294763bb0ca2dd7e8e65e6.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 在main.js中加上一句代码，写在窗口创建之后，这是打开网页的开发者工具 ```bash win.openDevTools(); ``` 加上这句代码之后，在运行会出现开发者工具 ![在这里插入图片描述](https://img-blog.csdnimg.cn/9906717452d64d38bcb6d4fbdf4d401c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) **注意：主进程的log只会出现在启动electron项目的cmd/power shell窗口中，而渲染进程的log会出现在开发者工具的控制台（console）里** **小提示：每次运行都输入electron test嫌麻烦，可以新建一个cmd文件，里面就写electron test，以后每次只双击这个cmd文件就可以了** ![在这里插入图片描述](https://img-blog.csdnimg.cn/aaa1b80447164a69af535ff5bb722a2e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 这样就实现了渲染进程调用主进程的方法 ## 二、使用nircmd.exe调用原生API ### 什么是nircmd，它都能干什么？ NirCmd是一套免费的命令列指令，提供许多控制Windows的参数。让你运用命令行的方式，来执行一些常用的动作，例如**修改分辨率，增加或减少计算机音量，模拟键盘或鼠标按下，让电脑进入休眠**等等 [官网（英文）](http://www.nirsoft.net/utils/nircmd.html) [中文文档](https://blog.csdn.net/greless/article/details/52267572?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163211778416780261965710%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163211778416780261965710&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-4-52267572.first_rank_v2_pc_rank_v29&utm_term=nircmd&spm=1018.2226.3001.4187) 网上搜索一下，很多网站都可以下载，因为官网实在是太慢了进不去所以就不从官网下了 [非官方下载](https://xiazai.365xxz.com/Soft/N/NirCmd_2.71_XiaZaiBa.zip) **注意！！！nircmd.exe有很大可能会被误报成病毒，但它真的是没有病毒的，下面是官网的解释** **注意！！！nircmd.exe有很大可能会被误报成病毒，但它真的是没有病毒的，下面是官网的解释** **注意！！！nircmd.exe有很大可能会被误报成病毒，但它真的是没有病毒的，下面是官网的解释** ![在这里插入图片描述](https://img-blog.csdnimg.cn/b8162348ae194727b16cb526054c02b5.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 下载之后，只需要nircmd.exe这一个文件即可，别的东西都可以删了，用不到 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2fb74e49d084411fb420b2c3060f7a54.png) 其他的都删喽只留nircmd.exe ![在这里插入图片描述](https://img-blog.csdnimg.cn/f8ad806879d44afb9310f940e485a306.png) 这一个小小的EXE文件就可以进行那么多操作，真是太厉害了，之后修改分辨率，就要用到它 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8b87b66eac9b4479957874365f342899.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) ### 如何使用nircmd.exe 在nircmd.exe文件所在位置打开**cmd**，不要打开power shell 在上面的输入框输入cmd就可以在当前目录打开cmd了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8d08758a9a8846aa949dd2d04de7dec9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_14,color_FFFFFF,t_70,g_se,x_16) 输入 ```bash nircmd.exe mutesysvolume 1 ``` 这是设置为静音的指令，输入完以后电脑就会被静音 明白了吗？nircmd.exe就是这么用的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c8d4cb2261f54b2096099b83c6f4cc2c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 需要注意，因为cmd窗口是在nircmd.exe所在路径下打开的，所以直接输入 ```bash nircmd.exe mutesysvolume 1 ``` 才有效果，如果不在nircmd.exe所在路径打开cmd，输入这个则会错误 只要在前面加上nircmd.exe的所在目录，就可以在任意cmd中使用了，我的电脑上nircmd.exe在D:\ElectronDemo\test下 ```bash D:\ElectronDemo\test\nircmd.exe mutesysvolume 1 ``` ### 在代码中使用nircmd.exe [nodejs子进程官方文档](http://nodejs.cn/api/child_process.html#child_process_child_process_exec_command_options_callback) 只要用代码打开一个cmd窗口，输入自定义的字符串，然后回车，就完成了指令的输入 可以用子进程模块来实现 在主进程中导入子进程模块 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d484f0d13b9f4154b5a1fe408ad23264.png) 把nircmd.exe放到**test**文件夹下 在窗口创建后，加上一句代码 ```bash // __dirname表示当前文件夹，之前讲过 exec(__dirname + "/nircmd.exe mutesysvolume 1") ``` 再运行，会发现电脑直接静音了 完美~ 我的例子里只选了几个我认为很有意思的指令写出来，nircmd.exe还可以干更多事 ![在这里插入图片描述](https://img-blog.csdnimg.cn/db34bec15df442a7b566dfbec20b23fa.png) ## 三、获取屏幕支持的所有分辨率和当前分辨率 ### node-win-screen-resolution插件 这是让我最头疼的问题，在这个问题上花的时间最长，一直不知道怎么实现，直到在github看见了这个插件 [github地址](https://github.com/xan105/node-win-screen-resolution) 这个插件是C++编写的，nodejs不能直接拿来用，需要进行**构建**，**编译成二进制的node文件**，这样才可以拿来用 **编译这个插件，是我噩梦的开始！** ### 编译插件 [编译文档](http://nodejs.cn/api/addons.html#addons_building) **我已经编译好了，都在源码里面，在文末，可以直接拿来用，这里看看就好了，不用再去编译一遍了** 不知道为什么作者在开源这个插件的时候为什么不把node文件一起上传 这两句构建代码，configure顺利通过，build总是报错 ```bash node-gyp configure node-gyp build ``` 我翻遍了网上几乎所有关于构建C++插件的文章，不断解决报错，不断换版本，编译这个网上说需要啥模块的都有，我就瞎安了一大堆，人家说需要什么我都下了，也不知道在VisualStudio里面多下载了多少模块，build之前，生成的解决方案还需要手动修改附加依赖项和忽略特定默认库，再build才能成功 [详细看这里](https://blog.csdn.net/yukin_xue/article/details/7735715?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163298481816780366511968%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163298481816780366511968&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-7735715.first_rank_v2_pc_rank_v29&utm_term=nafxcw.lib%28afxmem.obj%29%20:%20error%20LNK2005:%20%22void%20*%20__cdecl%20operator%20new%28unsigned%20__int64%29%22%20%28??2@YAPEAX_K@Z%29%20%E5%B7%B2%E7%BB%8F%E5%9C%A8%20LIBCMT.lib) ![在这里插入图片描述](https://img-blog.csdnimg.cn/9a346792ab0a4c17b90a397da3fbd8e1.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/8e2e632a9a244d25ad157be10cc42b52.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 总之，编译这个插件我也就失败了一百多次吧 编译完是两个node文件，可以在代码里直接使用 ![在这里插入图片描述](https://img-blog.csdnimg.cn/64fd8e3f254b41998088be0b82b9efec.png) ### 在代码中使用 插件lib下的index.cjs使用了bindings模块，这个模块在开发的时候使用没有任何问题，打包后死活用不了，百度后说是electron不能使用bindings，查了[解决办法](https://blog.csdn.net/absurd/article/details/54232785?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163318767016780271510807%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163318767016780271510807&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-1-54232785.first_rank_v2_pc_rank_v29&utm_term=electron%E4%BD%BF%E7%94%A8bindings&spm=1018.2226.3001.4187)也没弄好，索性就不用bindings了，稍微修改了一下index.cjs ![在这里插入图片描述](https://img-blog.csdnimg.cn/184d5cefc3474990b9fbfe565644a27f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_18,color_FFFFFF,t_70,g_se,x_16) ![在这里插入图片描述](https://img-blog.csdnimg.cn/94df0f61c936431683608f64416bf4f4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) **插件从github上下载来并不能直接用，需要编译，还得手动改下index.cjs让它不用bindings，我都弄好了，在文末源码里面就有** 结构应该是这样的，两个二进制node文件，一个lib库，一个test文件夹里面的脚本用来测试 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5c542444969944ed87d14c9d55860956.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_11,color_FFFFFF,t_70,g_se,x_16) 在test文件夹下打开power shell，运行test脚本，如果成功输出分辨率就说明没问题 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2770d3c6f4754fea8fee583ac75dda14.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 这个获取到的列表和系统设置里面的分辨率列表是一样的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/65fd9417ceef4c2e83ae4d2bcc235aca.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) test.cjs首先导入index.cjs，然后获取，直接导入index.cjs来用就可以，test只是用来测试的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/160bbb2a83ef4925abfdebd4108d243e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) ## 四、在Creator代码中封装API 其实一二三已经把核心都讲完了，这回再来做一个整体的封装 代码太多就不直接放出来了，都在源码里面 这些都是在Cocos里面封装好的API，可以随意调用 在Cocos里面运行会报错，这是正常现象，必须在打包好的index.html里面的body里加上下面的代码，用electron运行才不会报错 直接用Electron.ts里面的静态方法就可以，主进程是配套写好的 ```html <script> window.electron = require('electron'); </script> ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/ff8f8fe4c538435fa291ffe162d0197f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_13,color_FFFFFF,t_70,g_se,x_16) nircmd.ts ![在这里插入图片描述](https://img-blog.csdnimg.cn/f9b91e39df51451183a81d9badd9659c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) ## 五、构建，发布exe（只想用不想搞懂原理） 哈哈，懒人都直接看这里了 默认你已经安装好了nodejs和electron 我做了一个方案，只需要把打包完的网页放到game文件夹下，就可以发布出exe ![在这里插入图片描述](https://img-blog.csdnimg.cn/f52faae8a9aa43f5b9e1d08bc7aa7348.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) ### Cocos中API的封装 直接用Electron.ts里面的静态方法就可以，主进程是配套写好的 当前，你也可以去修改主进程，自定义一些方法供Cocos代码调用 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ba20374734454b199e71de6d8b5726a7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) ### 修改package.json中的electron版本 将使用electron-packager打包 首先安装依赖 ```bash npm install -g electron-packager ``` 把打包好的web-mobile文件放到game文件夹下 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5677b6887e3a4a78a1babc30f514b821.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_17,color_FFFFFF,t_70,g_se,x_16) 在打包好的index.html的body里面，加上这三句代码 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1a2f14c00d2e44c899203b13a0972ee3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) ```html <script> window.electron = require('electron'); </script> ``` 要修改package.json的结尾electron的版本号 ```json "scripts": { "package-win": "electron-packager . Game --win --out ../WindowsDemo --arch=x64 --electronVersion 15.0.0 --overwr ite --ignore=node_modules --icon=../icon/icon.ico" } ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/e44a8ad55b5945d5b5edc4a6d9c51544.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_10,color_FFFFFF,t_70,g_se,x_16) 版本这里一定要填写正确，打开cmd输入electron -v既可以查看版本 ![在这里插入图片描述](https://img-blog.csdnimg.cn/615bb9b23c2e4f6d8b5e70400e15a79f.png) ![在这里插入图片描述](https://img-blog.csdnimg.cn/90920622a76b44008e8a7a80880579a2.png) [打包参数参考](https://blog.csdn.net/a1170201028/article/details/59108126?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163326472016780261930316%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163326472016780261930316&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-6-59108126.first_rank_v2_pc_rank_v29&utm_term=electron-packager%E6%89%93%E5%8C%85%E5%8F%82%E6%95%B0) ### 改图标 有改图标需求直接在icon文件夹下把icon.ico换下来 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8f4d24ad67c0438fb116de3232de7043.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_18,color_FFFFFF,t_70,g_se,x_16) ### 构建 最后运行cmd文件，构建完会多出一个WindowsDemo文件夹，下次再次构建的时候要把它删除才可以再次构建 ![在这里插入图片描述](https://img-blog.csdnimg.cn/93ee29c917754c3a868405ad2203b437.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_19,color_FFFFFF,t_70,g_se,x_16)![在这里插入图片描述](https://img-blog.csdnimg.cn/e666910930eb427793c48e8d70aca6fe.png) 不运行cmd文件，在game文件夹下power shell输入，同理 一定要注意electron版本号 ```bash electron-packager . Game --win --out ../WindowsDemo --arch=x64 --electronVersion 15.0.0 --overwr ite --ignore=node_modules --icon=../icon/icon.ico ``` **构建完如果打不开，出现下面这种，或者全屏就卡住等奇葩情况** **不要悲伤，不要心急** ![在这里插入图片描述](https://img-blog.csdnimg.cn/67a53d6ced8942289d7c82e971332f48.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) [改一下兼容性就好了，亲测有效](https://blog.csdn.net/u013015629/article/details/109105001?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163307819416780255262999%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163307819416780255262999&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-109105001.first_rank_v2_pc_rank_v29&utm_term=Uncaught%20Exception:Error:%20The%20specified%20procedure%20could%20not%20be%20found.?&spm=1018.2226.3001.4187) ![在这里插入图片描述](https://img-blog.csdnimg.cn/f2ed6081d87341d8a778a488a989aad9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_16,color_FFFFFF,t_70,g_se,x_16) ## 六、做成安装包 首先打包成exe ![在这里插入图片描述](https://img-blog.csdnimg.cn/73c04483b87147f99012a33d14c678b8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_10,color_FFFFFF,t_70,g_se,x_16) 打开VisualStudio 文件---新建---项目 选择Setup Project，然后点确定 ![在这里插入图片描述](https://img-blog.csdnimg.cn/dc39a61605e5489c84554693e87946f9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 注意！：如果找不到这个选项，需要手动安装Microsoft Visual Studio Installer Projects 打开工具---扩展和更新---在左侧找到联机，搜索[Microsoft Visual Studio Installer Projects](https://marketplace.visualstudio.com/items?itemName=VisualStudioClient.MicrosoftVisualStudio2017InstallerProjects)进行安装 这个会很慢，在网上搜一下，有很多离线安装包的下载，我就是从网上下载的离线安装包 ![在这里插入图片描述](https://img-blog.csdnimg.cn/0cd0054b2b9a46fabcbed45c765498ad.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 选中打包之后的所有文件，放到这里 左侧三个英文分别是 Application Folder --- 应用程序文件夹 User's Desktop --- 用户的桌面 User's Programs Menu --- 用户的程序菜单 ![在这里插入图片描述](https://img-blog.csdnimg.cn/eacc5216454e46fe998fcb2be8a11ff1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 要想有桌面快捷方式，就给Game.exe创建快捷方式，放到桌面文件夹 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2ae2cede8d2242ec941734eb32370337.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) ![在这里插入图片描述](https://img-blog.csdnimg.cn/dd6c42d3954e4993801a46916e8c3846.png) 应用程序菜单也可以放一个 ![在这里插入图片描述](https://img-blog.csdnimg.cn/70b4613757f84c329507fe59a254414c.png) 在生成菜单下找到快捷键为U的选项，然后等待他生成完 ![在这里插入图片描述](https://img-blog.csdnimg.cn/cc63b64e2dac41a9862344d241be022c.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_14,color_FFFFFF,t_70,g_se,x_16) ![在这里插入图片描述](https://img-blog.csdnimg.cn/2f21d6f964ed4cc6916da0f180f06f25.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 打开项目路径，就能看见安装包了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/05e40c6a404d4036bfb45b31f91d1b89.png) 这两个运行哪个效果好像都一样 ![在这里插入图片描述](https://img-blog.csdnimg.cn/63baf5242f444dd1b75fcb18adef6fd8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) 一路下一步，之后就会看到桌面上的快捷方式和最近添加的快捷方式了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/81bb25ae16b745d79e20b5f83f053a0a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_11,color_FFFFFF,t_70,g_se,x_16) ![在这里插入图片描述](https://img-blog.csdnimg.cn/5f5e2b5c166f43289da846c3156c1916.png) 在应用和程序里面可以直接卸载 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5f8287138a8b4bc8a775e16523f6780d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_15,color_FFFFFF,t_70,g_se,x_16) 也可以运行之前的安装程序删除 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e86f4505a1ca4d8f816f50bc9cd35f60.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) ## 七、源码和体验地址 直接发布Windows的方案 gitee：https://gitee.com/propertygame/creator-build-windows-app 发布Windows的CocosCreator例子 gitee：https://gitee.com/propertygame/cocos-creator-desktop-demo 体验地址（**不限速飞速下载**） https://wwi.lanzoui.com/iHISKutnlmf [**如果不能正常运行，改一下兼容性**](https://blog.csdn.net/u013015629/article/details/109105001?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163307819416780255262999%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163307819416780255262999&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-1-109105001.first_rank_v2_pc_rank_v29&utm_term=Uncaught%20Exception:Error:%20The%20specified%20procedure%20could%20not%20be%20found.?&spm=1018.2226.3001.4187) 构建之后包体大了不少，但是作为一个PC游戏，这样的大小是完全在可以接受的范围内的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e28223daebbf45529f589f292af54aad.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcHJvcGVydHnjgILjgII=,size_20,color_FFFFFF,t_70,g_se,x_16) ## 结尾 这是我目前为止写的最详细、所用时间最多的一篇文章了 如果这篇文章帮到了你，点个赞吧！ 技术Q群：1130122408 微信公众号：property游戏开发 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c5d86812353d458084ddc3950bf42124.png)