0、github连接问题

警告：如果你的网络有任何有任何有任何有任何有任何有任何有任何有任何有任何有任何连接 github 的问题，彻底放弃该框架
请转到其他框架
electron-egg教程、electron-egg官网，或其他electron项目
Tauri教程、Tauri官网
NW.js、NWjs中文网
Gluon.js、Gluon官网
Neutralinojs、Neutralinojs官网
ultralight、Ultralight官网

1、官网

nodegui官网、nodegui的Github
其他版本：Vue NodeGUI、React NodeGUI、Svelte NodeGUI

2、安装git

阿里镜像、GitClone、git官网
可能的文件名：Git-2.40.0-64-bit.exe

3、安装CMake

CMake官网、腾讯软件，用IDM、Motrix等下载软件加速下载
可能的文件名：cmake-3.26.0-windows-x86_64.msi
安装时选择Add CMake to the system PATH for all users

4、安装Microsoft C++ 生成工具

访问微软官网下载生成工具，勾选使用 C++ 的桌面开发之后会自动勾选5个项目
取消勾选以下项目
用于 Windows 的 C++ CMake 工具
测试工具核心功能 - 生成工具
C++ AddressSanitizer
只保留以下两个(SDK版本不用管，Win10或Win11都行，勾什么就留什么，不用自己勾)
MSVC v143 - VS 2022 C++ x64/x86 生成工具
Windows 11 SDK (10.0.22000.0)

5、VSCode

安装VSCode
本文需要用到的插件：Live Server

6、安装nvm

访问下载地址下载安装nvm：
百度云分享
官网直装链接
nvm的github发行界面下载nvm-setup.exe
GitCode镜像下载nvm-setup.exe(登录获取下载链接，下载链接还是Github的，唯一的作用就是挑选版本的时候快点)

7、配置nvm

nvm install lts安装最新版本的Node.js，本文安装的是18.16.0
nvm install lts启用这个版本
运行cmd /c "nvm -v && node -v && npm -v"，正常输出版本号说明安装完成

8、下载nodegui-binary备用

https://github.com/nodegui/nodegui/releases/download/v0.57.1/nodegui-binary-v0.57.1-win32-x64.tar.gz

打开路径%localappdata%
手动创建缓存文件夹%LocalAppData%\nodegui-core-nodejs\Cache
将nodegui-binary压缩文件复制一份放入Cache文件夹

9、克隆nodegui-starter项目

运行git clone https://github.com/nodegui/nodegui-starter
或者运行git clone https://gitclone.com/github.com/nodegui/nodegui-starter

10、进入项目

cd .\nodegui-starter\

12、安装依赖

运行
cmd /c "set QODE_MIRROR=https://hub.gitmirror.com/https://github.com/nodegui/qodejs/releases/download/v16.4.3-qode/v16.4.3-qode-win32-x64.tar.gz&& set QT_LINK_MIRROR=https://mirrors.sjtug.sjtu.edu.cn/qt&& npm install"

13、安装报错

unable to verify the first certificate
尝试npm config set strict-ssl=false
安装完毕后恢复为true：npm config set strict-ssl=true

13、启动

npm start

14、启动报错

无法启动，提示如下报错

node:internal/modules/cjs/loader:1154
  return process.dlopen(module, path.toNamespacedPath(filename));
                 ^

Error: The specified module could not be found.

进入该路径：node_modules/@nodegui/nodegui
运行：npm run build:addon

15、启动成功

在这里插入图片描述

16、准备一张png图片

请添加图片描述
命名为winlogox200.png，放置在以下路径nodegui-starter\assets\winlogox200.png

17、软件窗口图标任务栏图标

在文件中nodegui-starter\src\index.ts搜索QMainWindow
例如

const win = new QMainWindow();
win.setWindowTitle("Hello World");

将其改为

const win = new QMainWindow();
win.setWindowTitle("Hello World");
import winlogo from '../assets/winlogox200.png';
win.setWindowIcon(new QIcon(winlogo));

npm start，窗口图标任务栏图标修改成功
在这里插入图片描述

18、打包预备

npx nodegui-packer --init HelloWorld
这个命令只需要运行一次
将会出现路径nodegui-starter\deploy\win32\HelloWorld

19、打包

npx nodegui-packer --pack ./dist
打包结果，免安装程序文件夹：nodegui-starter\deploy\win32\build\HelloWorld

20、运行

nodegui-starter\deploy\win32\build\HelloWorld\qode.exe
在这里插入图片描述

21、exe文件修改图标

21.1 转换为ico格式

访问greenfish官网下载greenfish icon editor pro
打开greenfish icon editor pro，F11修改语言为中文
使用greenfish icon editor pro打开图片nodegui-starter\assets\winlogox200.png
菜单栏，图像，从图像创建 Windows 图标…(Ctrl+Shift+I)
弹出尺寸选择窗口
默认不修改直接点击确定(或者也可以参考原exe资源，256×256/128×128/64×64/48×48/32×32/24×24/16×16)
Ctrl+S保存，保存类型设置为图标文件 (*.ico)
文件名必须为1，即生成文件为1.ico

21.2 resourcehacker

访问resourcehacker官网下载resourcehacker
打开resourcehacker，将nodegui-starter\deploy\win32\build\HelloWorld\qode.exe拖拽到resourcehacker窗口中
菜单栏 Action Add an Image or Other BinaryResource…(Ctrl+M)打开添加图标对话框
点击Add Binary or Image Resource也是一样的
在这里插入图片描述
点击Select File…选择1.ico，点击Add Resource，提示WARNING，点击Delete删除原图标，替换新图标

替换后Ctrl+S保存
碍于Windows图标缓存机制，仔细辨别图标是否替换成功
（新建一个Windows系统没见过的文件夹名(！这很重要，为了让缓存失效)，将exe放进去，查看图标是否修改成功）
确认修改成功，则删除resourcehacker生成的备份文件qode_original.exe

22、打包为安装包

Actual Installer Free打包

缓存文件分析

脚本文件：
nodegui-starter\node_modules@nodegui\nodegui\scripts\setupBinary.js
硬编码：
const SETUP_DIR = path.resolve(__dirname, ‘…’, ‘build’, ‘Release’);
const packageVersion = packageJson.version;
const tarballName = nodegui-binary-v${packageVersion}-${os.platform()}-${os.arch()}.tar.gz;
const url = https://github.com/nodegui/nodegui/releases/download/v${packageVersion}/${tarballName};
await setupArtifact({
outDir: SETUP_DIR,
id: ‘nodegui-core’,
displayName: Precompiled NodeGui binary,
downloadLink: url,
skipSetup: () => false,
});
下载地址：
https://hub.gitmirror.com/https://github.com/nodegui/nodegui/releases/download/v0.57.1/nodegui-binary-v0.57.1-win32-x64.tar.gz
缓存位置：
%LocalAppData%\nodegui-core-nodejs\Cache
nodegui-binary-v0.57.1-win32-x64.tar.gz
解决方案：
无解，应聘微软总部的保安连连微软的WIFI吧

脚本文件：
nodegui-starter\node_modules@nodegui\qode\src\config.js
nodegui-starter\node_modules@nodegui\qode\src\setup.js
环境变量||硬编码：(该环境变量为直接下载式链接)
const appPaths = envPaths(‘qode’); //qode?不是qode-nodejs?
const downloadLink = process.env.QODE_MIRROR || https://github.com/nodegui/qodejs/releases/download/${gitTagVersion}/${downloadArchiveName};
module.exports = {
downloadLink,
libVersion,
extractDir,
cacheDir: appPaths.cache,
qodePath,
};
const archivePath = path.resolve(cacheDir, path.basename(downloadLink));
下载地址：
https://github.com/nodegui/qodejs/releases/download/v16.4.3-qode/v16.4.3-qode-win32-x64.tar.gz
缓存位置
%LocalAppData%\qode-nodejs\Cache
v16.4.3-qode-win32-x64.tar.gz
解决方案：
QODE_MIRROR=https://hub.gitmirror.com/https://github.com/nodegui/qodejs/releases/download/v16.4.3-qode/v16.4.3-qode-win32-x64.tar.gz

脚本文件：
nodegui-starter\node_modules@nodegui\nodegui\config\qtConfig.js
nodegui-starter\node_modules@nodegui\nodegui\scripts\setupMiniQt.js
环境变量||硬编码：(该环境变量为拼接式链接。该环境变量对macOS无效？)
const MIRROR = Boolean(process.env.QT_LINK_MIRROR) ? process.env.QT_LINK_MIRROR : ‘https://download.qt.io’;
const QT_VERSION = ‘5.15.2’;
const SETUP_DIR = path.resolve(__dirname, ‘…’, ‘miniqt’);
const qtHome = path.resolve(SETUP_DIR, QT_VERSION, ‘msvc2019_64’);

link: ${MIRROR}/online/qtsdkrepository/windows_x86/desktop/qt5_5152/qt.qt5.5152.win64_msvc2019_64/5.15.2-0-202011130602qtbase-Windows-Windows_10-MSVC2019-Windows-Windows_10-X86_64.7z,
skipSetup: checkIfExists(path.resolve(qtHome, ‘bin’, ‘Qt5Core.dll’)),
下载地址：
https://s3.jcloud.sjtu.edu.cn/899a892efef34b1b944a19981040f55b-oss01/rsync/qt/56403c4efaedfcf67c2ebc981f4aa9ad2620225b
镜像列表参考：
https://download.qt.io/online/qtsdkrepository/windows_x86/desktop/qt5_5152/qt.qt5.5152.win64_msvc2019_64/5.15.2-0-202011130602qtbase-Windows-Windows_10-MSVC2019-Windows-Windows_10-X86_64.7z.mirrorlist
缓存位置：
%LocalAppData%\nodegui-mini-qt-nodejs\Cache
5.15.2-0-202011130602qtbase-Windows-Windows_10-MSVC2019-Windows-Windows_10-X86_64.7z
5.15.2-0-202011130602qtsvg-Windows-Windows_10-MSVC2019-Windows-Windows_10-X86_64.7z
5.15.2-0-202011130602qttools-Windows-Windows_10-MSVC2019-Windows-Windows_10-X86_64.7z
解决方案：
QT_LINK_MIRROR=https://mirrors.sjtug.sjtu.edu.cn/qt