Electron qt开发教程

模块安装打包 

npm install -g electron-forge
electron-forge init my-project --template=vue
npm start  //进入目录启动
//打包成一个目录到out目录下，注意这种打包一般用于调试，并不是用于分发
npm run package
//打出真正的分发包，放在out\make目录下
npm run make

npx @electron-forge/cli@latest import
npx create-electron-app my-app

npm install mousetrap  //快捷键绑定库

npm install  worker_threads  //工作线程模块
npm install worker-loader  //
npm init     //C++项目目录下初始化项目
npm install --global --production windows-build-tools

快速体验

npm install -g electron-prebuilt  
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install && npm start

cnpm install electron-packager -g
 "scripts": {"package":"electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules"
  }
npm run package
 

@python "%~dp0gyp_main.py" %*

JS调用C++
#include <node.h>
#include <v8.h>using namespace v8;// 传入了两个参数，args[0] 字符串，args[1] 回调函数
void hello(const FunctionCallbackInfo<Value>& args) {// 使用 HandleScope 来管理生命周期Isolate* isolate = Isolate::GetCurrent();HandleScope scope(isolate);// 判断参数格式和格式if (args.Length() < 2 || !args[0]->IsString()) {isolate->ThrowException(Exception::TypeError(String::NewFromUtf8(isolate, "Wrong arguments")));return;}// callback, 使用Cast方法来转换Local<Function> callback = Local<Function>::Cast(args[1]);Local<Value> argv[1] = {// 拼接StringString::Concat(Local<String>::Cast(args[0]), String::NewFromUtf8(isolate, " world"))};// 调用回调, 参数: 当前上下文，参数个数，参数列表callback->Call(isolate->GetCurrentContext()->Global(), 1, argv);
}// 相当于在 exports 对象中添加 { hello: hello }
void init(Local<Object> exports) {NODE_SET_METHOD(exports, "hello", hello);
}// 将 export 对象暴露出去
// 原型 `NODE_MODULE(module_name, Initialize)`
NODE_MODULE(test, init);//方法暴露
void Method(const FunctionCallbackInfo<Value>& args) {Isolate* isolate = args.GetIsolate();args.GetReturnValue().Set(String::NewFromUtf8(isolate, "world").ToLocalChecked());
}void Initialize(Local<Object> exports) {NODE_SET_METHOD(exports, "hello", Method);
}NODE_MODULE(NODE_GYP_MODULE_NAME, Initialize)
extern "C" NODE_MODULE_EXPORT void
NODE_MODULE_INITIALIZER(Local<Object> exports,Local<Value> module,Local<Context> context) {/* Perform addon initialization steps here. */
}int main(int argc, char* argv[]) {// Create a stack-allocated handle scope. HandleScope handle_scope;// Create a new context. Handle<Context> context = Context::New();// Enter the created context for compiling and // running the hello world script.Context::Scope context_scope(context);// Create a string containing the JavaScript source code. Handle<String> source = String::New("'Hello' + ', World!'");// Compile the source code. Handle<Script> script = Script::Compile(source);// Run the script to get the result. Handle<Value> result = script->Run();// Convert the result to an ASCII string and print it. String::AsciiValue ascii(result);printf("%s\n", *ascii);return 0;
}//create accessor for string username
global->SetAccessor(v8::String::New("user"),userGetter,userSetter); 
//associates print on script to the Print function
global->Set(v8::String::New("print"), v8::FunctionTemplate::New(Print)); //注册类对象
Handle<FunctionTemplate> point_templ = FunctionTemplate::New();
point_templ->SetClassName(String::New("Point"));
Handle<ObjectTemplate> point_proto = point_templ->PrototypeTemplate();
point_proto->Set("method_a", FunctionTemplate::New(PointMethod_A));
point_proto->Set("method_b", FunctionTemplate::New(PointMethod_B));
//设置指针个数
Handle<ObjectTemplate> point_inst = point_templ->InstanceTemplate();
point_inst->SetInternalFieldCount(1);
//创建实例
Handle<Function> point_ctor = point_templ->GetFunction();
Local<Object> obj = point_ctor->NewInstance();
obj->SetInternalField(0, External::New(p));
//获取类指针处理Handle<Value> PointMethod_A(const Arguments& args)2.                {3.                    Local<Object> self = args.Holder();4.                    Local<External> wrap = Local<External>::Cast(self->GetInternalField(0));5.                    void* ptr = wrap->Value();6.                    static_cast<Point*>(ptr)->Function_A();7.                    return Integer::New(static_cast<Point*>(ptr)->x_);8.                }//向MakeWeak注册的callback.  
void CloudAppWeakReferenceCallback(Persistent<Value> object  , void * param) {  if (CloudApp* cloudapp = static_cast<CloudApp*>(param)) {  delete cloudapp;  }  
}  //将C++指针通过External保存为Persistent对象，避免的指针被析构  
Handle<External> MakeWeakCloudApp(void* parameter) {  Persistent<External> persistentCloudApp =   Persistent<External>::New(External::New(parameter));  //MakeWeak非常重要，当JS世界new一个CloudApp对象之后  
//C++也必须new一个对应的指针。  
//JS对象析构之后必须想办法去析构C++的指针，可以通过MakeWeak来实现，  
//MakeWeak的主要目的是为了检测Persistent Handle除了当前Persistent   
//的唯一引用外，没有其他的引用，就可以析构这个Persistent Handle了，  
//同时调用MakeWeak的callback。这是我们可以再这个callback中delete   
//C++指针  persistentCloudApp.MakeWeak(parameter, CloudAppWeakReferenceCallback);  return persistentCloudApp;  
}  void Print(const v8::FunctionCallbackInfo<v8::Value>& args) {  bool first = true;  for (int i = 0; i < args.Length(); i++) {  v8::HandleScope handle_scope(args.GetIsolate());  if (first) {  first = false;  } else {  printf(" ");  }  v8::String::Utf8Value str(args[i]);  const char* cstr = ToCString(str);  printf("%s", cstr);  const char* s_result = "print call succeed\n";  v8::Local<v8::String>  v_result = v8::String::NewFromUtf8(args.GetIsolate(), s_result,  v8::NewStringType::kNormal).ToLocalChecked();  args.GetReturnValue().Set(v_result);  }  printf("\n");  fflush(stdout);  
}  
v8::Local<v8::ObjectTemplate> global = v8::ObjectTemplate::New(isolate);  // Bind the global 'print' function to the C++ Print callback.  global->Set(  v8::String::NewFromUtf8(isolate, "print", v8::NewStringType::kNormal)  .ToLocalChecked(),  v8::FunctionTemplate::New(isolate, Print));  
Local<Context> context = v8::Context::New(isolate, NULL, global);Isolate *isolate = args.GetIsolate();
Local<Object> opts = args[0]->ToObject();
Local<Number> mode = opts->Get(String::NewFromUtf8(isolate, "mode"))->ToNumber(isolate);
static void DeleteInstance(void* data) {// 将 `data` 转换为该类的实例并删除它。
}
node::AddEnvironmentCleanupHook(DeleteInstance) //在销毁环境之后被删除
JS调用C++函数，就是通过FunctionTemplate和ObjectTemplate进行扩展的。
V8的External就是专门用来封装（Wrap）和解封(UnWrap)C++指针的
V8_EXPORT
V8_INLINE
v8::Handle<
v8::Local<
const v8::Arguments
const v8::FunctionCallbackInfo<v8::Value>&   不定参数
  Local<FunctionTemplate> tpl = FunctionTemplate::New(isolate);
G
String::NewFromUtf8Literal(isolate, "isNull")
String::Cast
isolate->GetCurrentContext()
NODE_SET_PROTOTYPE_METHOD(tpl, "x", X);
https://github.com/alibaba/jsni.git
nodeqt
const qt = require("./lib/qt");
const app = new qt.QApplication();
const window = new qt.QMainWindow();
const box = new qt.QWidget();
box.setStyleSheet("background-color:red;");
box.resize(300, 300);
box.move(300, 300);
box.setParent(window);
window.resizeEvent((width, height) => {console.log("Resized1", width, height);console.log(width, height);
});
window.closeEvent(() => {console.log("Closing");
});
box.resizeEvent((width, height) => {console.log("Resized2", width, height);
});
box.mousePressEvent(() => console.log("CLICKED!"));
box.mouseReleaseEvent(() => console.log("UNCLICKED!"));
box.setMouseTracking(true);
box.mouseMoveEvent((x, y) => console.log(`MOUSE MOVED! x: ${x} y: ${y}`));
box.enterEvent(() => console.log("MOUSE ENTERED!"));
box.leaveEvent(() => console.log("MOUSE LEFT!"));
const label = new qt.QLabel(box);
console.log("Size hint", label.sizeHint());
console.log("Height", label.height());
label.setText('<span style="">dsawewwww<span style="">Hello2</span></span>');
label.adjustSize();
const label2 = new qt.QLabel(window);
const pix = new qt.QPixmap();
pix.load("/home/kusti8/Pictures/test_small.jpg");
pix.scaled(300, 300, qt.AspectRatioMode.IgnoreAspectRatio);
label2.setPixmap(pix);
label2.adjustSize();
label2.setStyleSheet("background-color: red;");
label2.move(300, 600);
label2.setScaledContents(false);
label2.setAlignment(qt.Alignment.AlignCenter);
label2.show();
const lineedit = new qt.QLineEdit(window);
lineedit.move(100, 100);
lineedit.textChangedEvent(text => console.log("text changed", text));
lineedit.show();
const combobox = new qt.QComboBox(window);
combobox.currentTextChangedEvent(text => console.log("New combo", text));
combobox.setEditable(true);
combobox.addItem("Test1");
combobox.addItem("Test2");
combobox.addItem("Test3");
box.show();
box.clear();
console.log("set parent");
window.show();
console.log("set parent");
app.aboutToQuitEvent(() => console.log("Quitting"));
console.log("Height", label.height());
console.log(qt.desktopSize());
app.exec();
GitHub - arturadib/node-qt: C++ Qt bindings for Node.js

mirrors_CoderPuppy/node-qt

GitHub - anak10thn/node-qt5

GitHub - NickCis/nodeQt: Qt binding for Node

GitHub - a7ul/mdview-nodegui: A Markdown editor in NodeGui

GitHub - kusti8/node-qt-napi: Node.js bindinds for Qt5, using NAPI

GitHub - nodegui/qode: DEPRECATED: Please see https://github.com/nodegui/qodejs instead

GitHub - svalaskevicius/qtjs-generator: Qt API bindings generator for Node.js

C++ 插件 | Node.js v22 文档

GitHub - nodegui/nodegui-starter: A starter repo for NodeGui projects

GitHub - anak10thn/qhttpserver: HTTP server implementation for Qt based on node.js' http parser

GitHub - anak10thn/chrome-app-samples: Chrome Apps

GitHub - magne4000/node-qtdatastream: Nodejs lib which can read/write Qt formatted Datastreams

GitHub - fwestrom/qtort-microservices: A simple micro-services framework for Node.js.

GitHub - ivan770/PiQture: Screenshot tool based on Electron

GitHub - miskun/qtc-sdk-node: Qt Cloud Services SDK for Node.js

v8: include/v8.h File Reference

nodegyp

node-gyp -j 8 configure
node-gyp -j 8 build
"install": "node-gyp -j 8 rebuild --arch=ia32"
"install": "node-gyp -j 8 rebuild --arch=x86"

https://github.com/kusti8/node-qt-napi/releases/download/0.0.4/qt-v0.0.4-4-win32-x64.tar.gz

工程搭建方式

gyp文件样例

TortoiseGit bash使用
set PRJ_PATH=E:\workspace\test\Web-Dev-For-Beginners\nodeqt
TortoiseGitProc.exe /command:commit /path:"%PRJ_PATH%\nodegyp" /logmsgfile:"%PRJ_PATH%\refModify.txt"  /bugid:1 /closeonend:2%
TortoiseGitProc.exe /command:pull /path:"%PRJ_PATH%\nodegyp" /closeonend:2
TortoiseGitProc.exe /command:push /path:"%PRJ_PATH%\nodegyp" /closeonend:2
pause

GitHub - electron/electron-api-demos: Explore the Electron APIsExplore the Electron APIs. Contribute to electron/electron-api-demos development by creating an account on GitHub.icon-default.png?t=N7T8https://github.com/electron/electron-api-demosQuick Start | ElectronThis guide will step you through the process of creating a barebones Hello World app in Electron, similar to electron/electron-quick-start.icon-default.png?t=N7T8https://electronjs.org/docs/tutorial/quick-starthttps://github.com/electron/electron-quick-starticon-default.png?t=N7T8https://github.com/electron/electron-quick-start GitHub - qtoolkit/qtk: QTK 是一套基于HTML5 Canvas实现的, 专注于桌面/移动应用程序开发的框架。

https://github.com/sindresorhus/awesome-electron

Introduction | Electron

Electron

创作不易，小小的支持一下吧！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/24708.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Swift 序列（Sequence）排序面面俱到 - 从过去到现在（二）

Swift 序列（Sequence）排序面面俱到 - 从过去到现在（二）

概览 在上篇 Swift 序列（Sequence）排序面面俱到 - 从过去到现在（一）博文中，我们讨论了 Swift 语言中序列和集合元素排序的一些基本知识，我们还给出了以自定义类型中任意属性排序的“康庄大道”。 不过在实际的撸码场景中，我们往往需要的是“多属性”同时参与到排序的考…
阅读更多...
工业楼控暖通组态恒温检测控制大屏前端UI案例

工业楼控暖通组态恒温检测控制大屏前端UI案例

工业楼控暖通组态恒温检测控制大屏前端UI案例
阅读更多...
U盘文件系统结构损坏的应对与预防

U盘文件系统结构损坏的应对与预防

在数字化时代&#xff0c;U盘作为便携式存储设备&#xff0c;其重要性不言而喻。然而&#xff0c;当U盘文件系统结构损坏时&#xff0c;我们可能会面临数据丢失的风险。本文将深入探讨U盘文件系统结构损坏的问题&#xff0c;分析其产生的原因&#xff0c;并给出相应的数据恢复方…
阅读更多...
SpringBoot 的多配置文件

SpringBoot 的多配置文件

文章目录 SpringBoot 的多配置文件spring.profiles.active 配置Profile 和 ActiveProfiles 注解 SpringBoot 的多配置文件 spring.profiles.active 配置 默认情况下&#xff0c;当你启动 SpringBoot 项目时&#xff0c;会在日志中看到如下一条 INFO 信息&#xff1a; No act…
阅读更多...
vue2 中如何使用 render 函数编写组件

vue2 中如何使用 render 函数编写组件

vue2 中如何使用 render 函数编写组件 render 基础语法createElement返回值&#xff1a;VNode参数处理样式和类组件 propsHTML 特性和 DOM 属性处理事件插槽指令v-model 指令其他属性 使用 render 封装一个输入框其他问题参考 vue 提供了声明式编写 UI 的方式&#xff0c;即 vu…
阅读更多...
VL830 USB4 最高支持40Gbps芯片功能阐述以及原理图分享

VL830 USB4 最高支持40Gbps芯片功能阐述以及原理图分享

前文斥巨资拆了一个扩展坞供大家参考。其中核心即为本文要说的这个VL830,USB4的HUB芯片。 拆解报告传送门&#xff1a;USB4 Gen3x2 最高40Gbps传输速率的HUB扩展坞拆解分析 OK&#xff0c;闲话少叙。直接进入主题&#xff0c;我就直接翻译规格书了。 VL830是一款USB4端点设备…
阅读更多...
C++笔试强训day41

C++笔试强训day41

目录 1.棋子翻转 2.宵暗的妖怪 3.过桥 1.棋子翻转 链接https://www.nowcoder.com/practice/a8c89dc768c84ec29cbf9ca065e3f6b4?tpId128&tqId33769&ru/exam/oj &#xff08;简单题&#xff09;对题意进行简单模拟即可&#xff1a; class Solution { public:int dx[…
阅读更多...
设计模式-中介者（调停者）模式（行为型）

设计模式-中介者（调停者）模式（行为型）

中介者模式 中介者模式是一种行为型模式&#xff0c;又叫调停者模式&#xff0c;它是为了解决多个对象之间&#xff0c;多个类之间通信的复杂性&#xff0c;定义一个中介者对象来封装一些列对象之间的交互&#xff0c;使各个对象之间不同持有对方的引用就可以实现交互&#xf…
阅读更多...
连山露【诗词】

连山露【诗词】

连山露 雾隐黄山路&#xff0c;十步一松树。 树上惊松鼠&#xff0c;松子衔木屋。 松子青嫩芽&#xff0c;尖尖头探出。 卷挂白露珠&#xff0c;装映黄山雾。
阅读更多...
Java面试八股之什么是反射，实现原理是什么

Java面试八股之什么是反射，实现原理是什么

Java中什么是反射&#xff0c;实现原理是什么 Java中的反射&#xff08;Reflection&#xff09;是一种强大的特性&#xff0c;它允许程序在运行时检查和操作类、接口、字段和方法的信息。简而言之&#xff0c;反射机制使得程序能够在运行时动态地了解和使用自身或其他程序集中…
阅读更多...
LDR6020一拖二快充线：高效充电的新选择

LDR6020一拖二快充线：高效充电的新选择

LDR6020一拖二快充线&#xff1a;高效充电的新选择 随着移动设备的普及和功能的日益增强&#xff0c;电池续航成为了用户关注的重点之一。为了满足用户对于快速充电的需求&#xff0c;各大厂商纷纷推出了各种快充技术和产品。在这个背景下&#xff0c;LDR6020一拖二快充线凭借…
阅读更多...
Facebook与AI：探索人工智能在社交平台上的应用

Facebook与AI：探索人工智能在社交平台上的应用

随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;社交媒体平台正利用这些先进技术为用户提供更为个性化和高效的体验。作为全球最大的社交媒体平台之一&#xff0c;Facebook在AI应用领域的探索和实践尤为引人注目。本文将深入探讨Facebook如何在其平台上应用…
阅读更多...
Linux--标准IO库

Linux--标准IO库

一、标准IO简介 所谓标准 I/O 库则是标准 C 库中用于文件 I/O 操作&#xff08;譬如读文件、写文件等&#xff09;相关的一系列库函数的集合&#xff0c;通常标准 I/O 库函数相关的函数定义都在头文件 <stdio.h> 中&#xff0c;所以我们需要在程序源码中包含 <s…
阅读更多...
图片和PDF展示预览、并支持下载

图片和PDF展示预览、并支持下载

需求 展示图片和PDF类型&#xff0c;并且点击图片或者PDF可以预览 第一步&#xff1a;遍历所有的图片和PDF列表 <div v-for"(data,index) in parerFont(item.fileInfo)" :key"index" class"data-list-item"><downloadCard :file-inf…
阅读更多...
Java学习54-关键字this的使用

Java学习54-关键字this的使用

this是什么 this的作用&#xff1a; 它在方法(准确的说是实例方法或非static的方法)内部使用&#xff0c;表示调用该方法的对象 它在构造器内部使用&#xff0c;表示该构造器正在初始化的对象 this可以调用的结构&#xff1a;成员变量、方法和构造器 什么时候使用this 实…
阅读更多...
83页 | 2024数据安全典型场景案例集（免费下载）

83页 | 2024数据安全典型场景案例集（免费下载）

以上是资料简介和目录&#xff0c;如需下载&#xff0c;请前往星球获取&#xff1a;
阅读更多...
深度学习——卷积神经网络(CNN)

深度学习——卷积神经网络(CNN)

深度学习 深度学习就是通过多层神经网络上运用各种机器学习算法学习样本数据的内在规律和表示层次&#xff0c;从而实现各种任务的算法集合。各种任务都是啥&#xff0c;有&#xff1a;数据挖掘&#xff0c;计算机视觉&#xff0c;语音识别&#xff0c;自然语言处理等。‘ 深…
阅读更多...
【ARM Cache 与 MMU 系列文章 7.6 -- ARMv8 MMU 配置 寄存器使用介绍】

【ARM Cache 与 MMU 系列文章 7.6 -- ARMv8 MMU 配置 寄存器使用介绍】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 MMU 转换控制寄存器 TCR_ELxTCR_ELx 概览TCR_ELx 寄存器字段详解TCR 使用示例Normal MemoryCacheableShareability MMU 内存属性寄存器 MAIR_ELxMAIR_ELx 寄存器结构内存属性字段Devic…
阅读更多...
TiDB-从0到1-配置篇

TiDB-从0到1-配置篇

TiDB从0到1系列 TiDB-从0到1-体系结构TiDB-从0到1-分布式存储TiDB-从0到1-分布式事务TiDB-从0到1-MVCCTiDB-从0到1-部署篇TiDB-从0到1-配置篇 一、系统配置 TiDB的配置分为系统配置和集群配置两种。 其中系统配置对应TiDB Server&#xff08;不包含TiKV和PD的参数&#xff0…
阅读更多...
利用GPT和PlantUML快速生成UML图用于设计

利用GPT和PlantUML快速生成UML图用于设计

在软件开发中&#xff0c;设计阶段可是关键的一步。UML&#xff08;统一建模语言&#xff09;图能帮我们更清晰地理解和规划系统结构&#xff0c;但手动画UML图有时会很费时费力。好消息是&#xff0c;通过结合使用ChatGPT和PlantUML&#xff0c;我们可以高效地生成UML图&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023