nodegui搭建/你好/打包

已于 2023-04-27 19:26:34 修改
阅读量1.1k 收藏 2
点赞数
文章标签： electron nodegui javascript 前端 node.js
于 2023-04-17 16:03:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39124701/article/details/130185807
版权

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 use 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


请添加图片描述

三巧
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用于 node.js 的类似 Web 的 GUI 工具包，开销最小。 轻量级、GPU 渲染的电子替代品。
06-08
标题永久链接主页/注意：我注意到（从越来越多的星星中）有些人对此感兴趣，您能否在此跟踪问题中提交您的用例？ 会对我有很大帮助，谢谢。 涂鸦用于 node.js 的实验 GUI 工具包。 我们的想法是重新实现 DOM 和样式的足够子集，以便您可以使用 react 和其他 Web 框架，包括大多数相关库，但要使其尽可能简单，以便即使在 Raspberry 等廉价设备上也能流畅运行皮。 诀窍是使用 GPU 渲染所有内容，并将范围和抽象保持在最低限度。 有一天，它可能成为电子的可行替代品，但您将永远无法仅使用现有的网络应用程序并使用它运行它（但反过来应该是可能的）。 import * as React from 'react' import { render } from 'react-dom' const Counter = () => { const [count, setCount] = React.useState(0) const dec = () => setCount(count - 1) const inc = () => setCount(count + 1) return
一个用于使用Node.js和CSS building构建跨平台的本机桌面应用程序的库。 对于React NodeGui，请访问：https://github.com/nodegui/react-nodegui:atom_symbol:-C/C++开发
05-26
NodeGUI使用JavaScript +样式强大CSS构建高性能，本机和跨平台的桌面应用程序。 GUI NodeGUI由Qt5供电，与使用JavaScript +强大CSS（如样式）的NodeGUI ...更多示例：https://github.com/nodegui/examples功能:dna:Cros
Vue NodeGUI：打造高性能的跨平台桌面应用
最新发布
gitblog_00054的博客
05-17 550
Vue NodeGUI：打造高性能的跨平台桌面应用 项目地址:https://gitcode.com/nodegui/vue-nodegui Vue NodeGUI 是一个创新的项目，它将优雅的 Vue 框架与强大的 Qt5 底层库结合，让你可以构建高性能、原生且跨平台的桌面应用程序。这个项目由社区热情贡献者共同维护，拥有丰富的文档和良好的开发者支持。 项目介绍 Vue NodeGUI 提供了一个...
使用Node构建桌面GUI
热门推荐
跟派大星学编程
08-02 1万+
1. 安装 NVM 它是Node.js的版本管理工具，使用它可以很方便的安装各个版本的Node.js 下载地址： https://github.com/coreybutler/nvm-windows/releases 简单使用： 安装Node.js 使用nvm install version arch命令下载需要的版本。arch参数表示系统位数，默认是64位，如果是32位操作系统，需要执...
探索NodeGUI：下一代跨平台桌面应用开发框架
gitblog_00065的博客
03-20 457
探索NodeGUI：下一代跨平台桌面应用开发框架 项目地址:https://gitcode.com/nodegui/nodegui NodeGUI 是一个强大的开源项目，它将JavaScript和TypeScript的力量带入了桌面应用程序开发的世界。该项目基于V8引擎和Qt库，旨在为开发者提供一种易于上手、高效且跨平台的桌面应用构建工具。 技术剖析 V8与JavaScript NodeGUI是建...
Electron框架的简单使用-node.js实现GUI软件开发
咕咕鸡的执着
06-04 5301
基于Node.js的GUI框架 NW.JS (Node-Webkit) Electron 使用HTML、CSS、JavaScript来构建UI、处理与用户的交互、同时不约而同的使用了开源浏览器Chromium。基于这个浏览器做了一系列的软件开发，比如：Vscode、Atome、网易云音乐等。 使用Node.js来访问浏览器之外的内容。比如文件系统、文件、网络等，相当于是浏览器与Node.js的结合。 安装使用 使用npm init -y来初始化项目。 安装electron npm i
【JS】Nodejs与Electron环境配置与示例
DevFrank的博客
03-06 1529
Nodejs与Electron环境配置与示例
packer：将使用NodeGui构建的应用程序打包并部署到所有平台
02-05
封隔器 :package: Packer是一个npm模块，允许您将使用NodeGui或React NodeGui构建的应用程序打包到一个独立的可执行文件中。 Packer可在Mac，Windows和Linux上运行这是该模块的初始MVP版本。 在MacOS上-Packer将输出...
基于Node.js和系统Webview的跨平台桌面应用程序框架-C/C++开发
05-26
DeskGap DeskGap是用于使用Web技术... ... ... 支持的平台macOS Windows Linux版本10.11+ 7 SP11-10版本1803 10版本1809+在Ubuntu 16.04上测试LTS渲染引擎WebKit Trident EdgeHTML2 WebKit Internet Explorer 11 is requ
用于Node.js的类似于Web的GUI工具包，具有最小的开销。 轻巧，GPU渲染的电子替代品。-C/C++开发
05-26
title permalink主页/注意：我注意到（从越来越多的星星开始）有人对此感兴趣，能否请您在用例中提交用例title permalink Home /注意：我注意到（从越来越多的星星开始）的星号），对此有些人感兴趣，能否请您在此...
nodegui：一个用于使用Node.js和CSS building构建跨平台本机桌面应用程序的库。 React NodeGui：https：react.nodegui.org和Vue NodeGui：https：vue.nodegui.org
02-03
NodeGui 使用Node.js和CSS等样式构建高性能，本机和跨平台的桌面应用程序。 :rocket: NodeGUI由Qt5驱动 :green_heart: 与其他基于Chrome的解决方案（如电子）相比，这使其CPU和内存效率更高。 如果您正在寻找基于React的版本，请签出： 。 如果您正在寻找基于Vue的版本，请签出： 。 请访问： ： 以获取文档。 看起来如何？ 还有更多截图？ 更多示例： 产品特点 :dna: 跨平台。 应该适用于主要Linux版本，Windows和MacOS。 :chart_decreasing: 低CPU和内存占用。 当前的世界程序，CPU在空闲状态下保持为0％，内存使用量不到20mb。 :nail_polish: CSS样式（包括实际级联）。 还完全支持Flexbox布局（感谢Yoga）。 :white_heavy_check_mark: 完整的Node.js api支持（当前在Node v12.x上运行-易于升级）。 因此可以访问所有与nodejs兼容的npm模块。 :circus_tent: 本机窗口小部件事件
react-nodegui-starter：使用react-nodegui的基于React的本机桌面应用程序的启动器存储库
02-05
react-nodegui-启动器 克隆并运行以快速查看React NodeGui的运行情况。 使用 要克隆和运行此存储库，您需要在计算机上安装和 （ 随附）。 从您的命令行： # Clone this repository git clone https://github.com/nodegui/react-nodegui-starter # Install CMake brew install cmake # Go into the repository cd react-nodegui-starter # Install dependencies npm install # Run t
Node.js-一個七牛Nodejs的GUI封裝
08-10
一個七牛 Nodejs 的 GUI 封裝
QiNA:一个七牛Nodejs 的GUI 封装
05-02
QiNA 基于vue-electron 开发。 一个七牛CDN Nodejs GUI 封装。 视频展示 发布版下载 更新日志 2020年06月22日 修正 README 文档的视频展示地址修改 合并源码感谢xiamu14 的提交 优化图片名称，去掉() , 部分markdown 编辑器无法识别图片地址里的()。 优化图片名称，增加自定义tag 前缀，方便检索图片。 增加”复制按钮“，一键复制图片链接。 2018年09月28日· 0.0.5 版本 添加 显示上传进度 修正 从qn 库转移为七牛官方SDK 修正npm run dev问题 符合eslint 修正Mac 图标阴影（设计稿不见了，所以简单做了一个） 2017年01月26日． 0.0.4 版本 添加 文件拖放上传加入。 添加开源项目列表。 修正 因代码错误而无法点击的中央大圆圈。 分离部分css。 2017年01月26日．之前 0
gluon-app:Gluon Webapp和移动应用程序代码存储库。 基于teaproject.org平台的gluonwallet.com部分。 由Polkadot技术提供支持
04-14
胶子 作为TEA项目的一部分，Gluon的最终目标是替代传统的硬件加密钱包。 GLUON属于以下类别：信任即服务，依靠TEA节点中的分布式存储和执行来提高安全性。 有关更多详细信息，请参阅 此存储库包含GLUON Web应用程序和移动应用程序的运行时。 有关视频的演练，请参考： 标准安装说明 GLUON-WEBAPP 在本地运行 cd webapp npm i npm start 如果需要更改layer1服务网址，请编辑webapp / .env.dapp NODE_ENV = dapp #VUE_APP_LAYER1_URL=ws://139.198.187.91:9944 #VUE_APP_LAYER1_HTTP=http://139.198.187.91:9933 VUE_APP_LAYER1_URL=ws://64.227.49.206:9944 VUE_APP_LAYER
vue-nodegui-starter：vue-nodegui项目的启动器骨架存储库
02-05
git clone https://github.com/nodegui/vue-nodegui-starter # Install CMake brew install cmake # Go into the repository cd vue-nodegui-starter # Install dependencies npm install # Run the
Resource Hacker-资源替换工具
百里杨的博客
01-27 8974
Resource Hacker是一款免费查看，修改，添加，删除和重命名，提取Windows可执行文件和资源文件的资源替换工具，Resource Hacker反编译工具是相当于eXeScope的反编译工具，并且有很多方面比eXeScope反编译还强的软件。 官网地址：http://www.angusj.com/resourcehacker/ 软件下载地址：http://www.angusj.com/resourcehacker/resource_hacker.zip 运行效果： 更多帮助，参考官网链接
React NodeGUI: 带你走进前端开发的新维度
gitblog_00077的博客
03-20 266
React NodeGUI: 带你走进前端开发的新维度 项目地址:https://gitcode.com/nodegui/react-nodegui React NodeGUI 是一个强大的开源项目，它将React的易用性和灵活性与Node.js的后端能力相结合，构建出能够在本地桌面运行的高性能应用程序。通过此项目链接，你可以直接访问其源代码和详细文档，开始你的探索之旅。 项目简介 React N...
Resource Hacker
08-19
Resource Hacker是一个资源编辑器，适用于32位和64位Windows应用程序。它可以用来编辑资源文件(*.rc)，以及查看和编辑可执行文件(*.exe; *.dll; *.scr;等)和已编译的资源库(*.res, *.mui)。Resource Hacker主要是一个GUI应用程序，但它也提供了许多从命令行编译和解压缩资源的选项。通过使用Resource Hacker的脚本功能，可以从命令行执行资源黑客脚本，例如通过运行ResourceHacker.exe -script ScriptFile来执行脚本文件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [资源黑客TM](https://blog.csdn.net/wqq1027/article/details/86676634)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值