当前位置:   article > 正文

Electron qt开发教程_electron 如何使用 qtchanel

electron 如何使用 qtchanel
模块安装打包 

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

electron 将pc端(vue)页面打包为桌面端应用-CSDN博客
快速体验

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
 

GitHub - electron/electron-api-demos: Explore the Electron APIs

@python "%~dp0gyp_main.py" %*

JS调用C++
  1. #include <node.h>
  2. #include <v8.h>
  3. using namespace v8;
  4. // 传入了两个参数,args[0] 字符串,args[1] 回调函数
  5. void hello(const FunctionCallbackInfo<Value>& args) {
  6. // 使用 HandleScope 来管理生命周期
  7. Isolate* isolate = Isolate::GetCurrent();
  8. HandleScope scope(isolate);
  9. // 判断参数格式和格式
  10. if (args.Length() < 2 || !args[0]->IsString()) {
  11. isolate->ThrowException(Exception::TypeError(
  12. String::NewFromUtf8(isolate, "Wrong arguments")));
  13. return;
  14. }
  15. // callback, 使用Cast方法来转换
  16. Local<Function> callback = Local<Function>::Cast(args[1]);
  17. Local<Value> argv[1] = {
  18. // 拼接String
  19. String::Concat(Local<String>::Cast(args[0]), String::NewFromUtf8(isolate, " world"))
  20. };
  21. // 调用回调, 参数: 当前上下文,参数个数,参数列表
  22. callback->Call(isolate->GetCurrentContext()->Global(), 1, argv);
  23. }
  24. // 相当于在 exports 对象中添加 { hello: hello }
  25. void init(Local<Object> exports) {
  26. NODE_SET_METHOD(exports, "hello", hello);
  27. }
  28. // 将 export 对象暴露出去
  29. // 原型 `NODE_MODULE(module_name, Initialize)`
  30. NODE_MODULE(test, init);
  31. //方法暴露
  32. void Method(const FunctionCallbackInfo<Value>& args) {
  33. Isolate* isolate = args.GetIsolate();
  34. args.GetReturnValue().Set(String::NewFromUtf8(
  35. isolate, "world").ToLocalChecked());
  36. }
  37. void Initialize(Local<Object> exports) {
  38. NODE_SET_METHOD(exports, "hello", Method);
  39. }
  40. NODE_MODULE(NODE_GYP_MODULE_NAME, Initialize)
  41. extern "C" NODE_MODULE_EXPORT void
  42. NODE_MODULE_INITIALIZER(Local<Object> exports,
  43. Local<Value> module,
  44. Local<Context> context) {
  45. /* Perform addon initialization steps here. */
  46. }
  47. int main(int argc, char* argv[]) {
  48. // Create a stack-allocated handle scope.
  49. HandleScope handle_scope;
  50. // Create a new context.
  51. Handle<Context> context = Context::New();
  52. // Enter the created context for compiling and
  53. // running the hello world script.
  54. Context::Scope context_scope(context);
  55. // Create a string containing the JavaScript source code.
  56. Handle<String> source = String::New("'Hello' + ', World!'");
  57. // Compile the source code.
  58. Handle<Script> script = Script::Compile(source);
  59. // Run the script to get the result.
  60. Handle<Value> result = script->Run();
  61. // Convert the result to an ASCII string and print it.
  62. String::AsciiValue ascii(result);
  63. printf("%s\n", *ascii);
  64. return 0;
  65. }
  66. //create accessor for string username
  67. global->SetAccessor(v8::String::New("user"),userGetter,userSetter);
  68. //associates print on script to the Print function
  69. global->Set(v8::String::New("print"), v8::FunctionTemplate::New(Print));
  70. //注册类对象
  71. Handle<FunctionTemplate> point_templ = FunctionTemplate::New();
  72. point_templ->SetClassName(String::New("Point"));
  73. Handle<ObjectTemplate> point_proto = point_templ->PrototypeTemplate();
  74. point_proto->Set("method_a", FunctionTemplate::New(PointMethod_A));
  75. point_proto->Set("method_b", FunctionTemplate::New(PointMethod_B));
  76. //设置指针个数
  77. Handle<ObjectTemplate> point_inst = point_templ->InstanceTemplate();
  78. point_inst->SetInternalFieldCount(1);
  79. //创建实例
  80. Handle<Function> point_ctor = point_templ->GetFunction();
  81. Local<Object> obj = point_ctor->NewInstance();
  82. obj->SetInternalField(0, External::New(p));
  83. //获取类指针处理
  84.      Handle<Value> PointMethod_A(const Arguments& args)
  85. 2.                {
  86. 3.                    Local<Object> self = args.Holder();
  87. 4.                    Local<External> wrap = Local<External>::Cast(self->GetInternalField(0));
  88. 5.                    void* ptr = wrap->Value();
  89. 6.                    static_cast<Point*>(ptr)->Function_A();
  90. 7.                    return Integer::New(static_cast<Point*>(ptr)->x_);
  91. 8.                }
  92. //向MakeWeak注册的callback.
  93. void CloudAppWeakReferenceCallback(Persistent<Value> object
  94. , void * param) {
  95. if (CloudApp* cloudapp = static_cast<CloudApp*>(param)) {
  96. delete cloudapp;
  97. }
  98. }
  99. //将C++指针通过External保存为Persistent对象,避免的指针被析构
  100. Handle<External> MakeWeakCloudApp(void* parameter) {
  101. Persistent<External> persistentCloudApp =
  102. Persistent<External>::New(External::New(parameter));
  103. //MakeWeak非常重要,当JS世界new一个CloudApp对象之后
  104. //C++也必须new一个对应的指针。
  105. //JS对象析构之后必须想办法去析构C++的指针,可以通过MakeWeak来实现,
  106. //MakeWeak的主要目的是为了检测Persistent Handle除了当前Persistent
  107. //的唯一引用外,没有其他的引用,就可以析构这个Persistent Handle了,
  108. //同时调用MakeWeak的callback。这是我们可以再这个callback中delete
  109. //C++指针
  110. persistentCloudApp.MakeWeak(parameter, CloudAppWeakReferenceCallback);
  111. return persistentCloudApp;
  112. }
  113. void Print(const v8::FunctionCallbackInfo<v8::Value>& args) {
  114. bool first = true;
  115. for (int i = 0; i < args.Length(); i++) {
  116. v8::HandleScope handle_scope(args.GetIsolate());
  117. if (first) {
  118. first = false;
  119. } else {
  120. printf(" ");
  121. }
  122. v8::String::Utf8Value str(args[i]);
  123. const char* cstr = ToCString(str);
  124. printf("%s", cstr);
  125. const char* s_result = "print call succeed\n";
  126. v8::Local<v8::String> v_result = v8::String::NewFromUtf8(args.GetIsolate(), s_result,
  127. v8::NewStringType::kNormal).ToLocalChecked();
  128. args.GetReturnValue().Set(v_result);
  129. }
  130. printf("\n");
  131. fflush(stdout);
  132. }
  133. v8::Local<v8::ObjectTemplate> global = v8::ObjectTemplate::New(isolate);
  134. // Bind the global 'print' function to the C++ Print callback.
  135. global->Set(
  136. v8::String::NewFromUtf8(isolate, "print", v8::NewStringType::kNormal)
  137. .ToLocalChecked(),
  138. v8::FunctionTemplate::New(isolate, Print));
  139. Local<Context> context = v8::Context::New(isolate, NULL, global);
  140. Isolate *isolate = args.GetIsolate();
  141. Local<Object> opts = args[0]->ToObject();
  142. Local<Number> mode = opts->Get(String::NewFromUtf8(isolate, "mode"))->ToNumber(isolate);
  143. static void DeleteInstance(void* data) {
  144. // 将 `data` 转换为该类的实例并删除它。
  145. }
  146. node::AddEnvironmentCleanupHook(DeleteInstance) //在销毁环境之后被删除
  147. JS调用C++函数,就是通过FunctionTemplate和ObjectTemplate进行扩展的。
  148. 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
  1. const qt = require("./lib/qt");
  2. const app = new qt.QApplication();
  3. const window = new qt.QMainWindow();
  4. const box = new qt.QWidget();
  5. box.setStyleSheet("background-color:red;");
  6. box.resize(300, 300);
  7. box.move(300, 300);
  8. box.setParent(window);
  9. window.resizeEvent((width, height) => {
  10. console.log("Resized1", width, height);
  11. console.log(width, height);
  12. });
  13. window.closeEvent(() => {
  14. console.log("Closing");
  15. });
  16. box.resizeEvent((width, height) => {
  17. console.log("Resized2", width, height);
  18. });
  19. box.mousePressEvent(() => console.log("CLICKED!"));
  20. box.mouseReleaseEvent(() => console.log("UNCLICKED!"));
  21. box.setMouseTracking(true);
  22. box.mouseMoveEvent((x, y) => console.log(`MOUSE MOVED! x: ${x} y: ${y}`));
  23. box.enterEvent(() => console.log("MOUSE ENTERED!"));
  24. box.leaveEvent(() => console.log("MOUSE LEFT!"));
  25. const label = new qt.QLabel(box);
  26. console.log("Size hint", label.sizeHint());
  27. console.log("Height", label.height());
  28. label.setText('<span style="">dsawewwww<span style="">Hello2</span></span>');
  29. label.adjustSize();
  30. const label2 = new qt.QLabel(window);
  31. const pix = new qt.QPixmap();
  32. pix.load("/home/kusti8/Pictures/test_small.jpg");
  33. pix.scaled(300, 300, qt.AspectRatioMode.IgnoreAspectRatio);
  34. label2.setPixmap(pix);
  35. label2.adjustSize();
  36. label2.setStyleSheet("background-color: red;");
  37. label2.move(300, 600);
  38. label2.setScaledContents(false);
  39. label2.setAlignment(qt.Alignment.AlignCenter);
  40. label2.show();
  41. const lineedit = new qt.QLineEdit(window);
  42. lineedit.move(100, 100);
  43. lineedit.textChangedEvent(text => console.log("text changed", text));
  44. lineedit.show();
  45. const combobox = new qt.QComboBox(window);
  46. combobox.currentTextChangedEvent(text => console.log("New combo", text));
  47. combobox.setEditable(true);
  48. combobox.addItem("Test1");
  49. combobox.addItem("Test2");
  50. combobox.addItem("Test3");
  51. box.show();
  52. box.clear();
  53. console.log("set parent");
  54. window.show();
  55. console.log("set parent");
  56. app.aboutToQuitEvent(() => console.log("Quitting"));
  57. console.log("Height", label.height());
  58. console.log(qt.desktopSize());
  59. 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使用
  1. set PRJ_PATH=E:\workspace\test\Web-Dev-For-Beginners\nodeqt
  2. TortoiseGitProc.exe /command:commit /path:"%PRJ_PATH%\nodegyp" /logmsgfile:"%PRJ_PATH%\refModify.txt" /bugid:1 /closeonend:2%
  3. TortoiseGitProc.exe /command:pull /path:"%PRJ_PATH%\nodegyp" /closeonend:2
  4. TortoiseGitProc.exe /command:push /path:"%PRJ_PATH%\nodegyp" /closeonend:2
  5. pause
git bash使用
  1. git config --global user.name "your-name"
  2. git config --global user.email "your-email"
  3. git init @ Initialize a git repositor
  4. git status @Check status
  5. git add .
  6. git add [file or folder name]
  7. git reset //将文件还原到上一个commit
  8. git reset [file or folder name] //特定文件还原到上一个commit
  9. git commit -m "first commit"
  10. git remote add origin https://github.com/username/repository_name.git //添加远程仓库地址
  11. git push -u origin main //This sends your commits in your "main" branch to GitHub
  12. git branch [branch-name] //Create a branch
  13. git checkout [branch-name] //Switch to working branch
  14. git checkout main
  15. git pull //Combine your work with the main branch
  16. git checkout [branch_name]
  17. git merge main //conflicts combine the changes happens in your working branch.
  18. git push --set-upstream origin [branch-name] //Send your work to GitHub
  19. git branch -d [branch-name] //clean up both your local branch
  20. git pull
参考 

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


node与Electron版本对应

GitHub - atom/atom: :atom: The hackable text editor

GitHub - nodejs/node-addon-api: Module for using Node-API from C++


创作不易,小小的支持一下吧!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/751763
推荐阅读
相关标签
  

闽ICP备14008679号