nodegui搭建/你好/打包

news/2024/12/22 9:43:50/

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

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:1154return 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



请添加图片描述


http://www.ppmy.cn/news/46783.html

相关文章

【python零碎】

1. 拼接字符中,插入变量 >>> shepherd "Mary" >>> age 32 >>> stuff_in_string "Shepherd {} is {} years old.".format(shepherd, age) >>> print(stuff_in_string) Shepherd Mary is 32 years old. &…

2.3 连续性随机变量

思维导图: 学习目标: 我会按照以下步骤学习连续型随机变量: 复习概率论的基础知识,包括概率、期望、方差等概念和公式,以及离散型随机变量的概率分布函数和概率质量函数的概念和性质。 学习连续型随机变量的概念和性…

【Android安全】Soot 静态分析教程

参考教程 https://github.com/noidsirius/SootTutorial Windows Soot 环境配置 下载代码 git 拷贝仓库 git init git clone https://github.com/noidsirius/SootTutorial.git ./gradlew.bat build 报错:Unsupported class file major version 57 ./gradlew.b…

编译预处理:#if

用法 #if <expression> … #elif … #end <expression> 是整数常量比较的表达式&#xff0c;例如&#xff1a; defined表达式&#xff0c;例如 defined AAA, 或者 defined(AAA), 如果AAA是一个宏定义&#xff0c;return true&#xff0c;否则&#xff0c;return…

2023年全国最新安全员精选真题及答案55

百分百题库提供安全员考试试题、建筑安全员考试预测题、建筑安全员ABC考试真题、安全员证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 81.&#xff08;单选题&#xff09;扣件式钢管模板支架的剪刀撑应用旋转扣件进行固定&…

HTML—javaEE

文章目录 1.认识HTML2.HTML标签的使用2.1注释2.2标题2.3段落2.4换行2.5字体加粗、斜体字、删除线、下划线2.6图片2.7超链接2.8表格2.9列表2.10表单标签2.11div2.12span 3.HTML特殊符号 1.认识HTML &#xff08;1&#xff09;HTML是网页的编程语言&#xff0c;文件的内容主要由…

lamp 架构的搭建

php 解释动态页面 php来连接数据库 mysql 页面信息和端口信息 存放数据 apache 前端web服务器&#xff0c;展现页面 源码编译安装这三个服务 配置下载apache: systemctl stop firewalld 关闭安全机制&#xff0c;防火墙 可以一条命令:systemctl is-enabled firewalld 和 s…

计组2.3——浮点数的表示和运算

计组2.3 浮点数 #mermaid-svg-hwjyO2bt7hFXy1eD {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-hwjyO2bt7hFXy1eD .error-icon{fill:#552222;}#mermaid-svg-hwjyO2bt7hFXy1eD .error-text{fill:#552222;stroke:#552…