【小沐学QT】QT学习之Web控件的使用

文章目录

  • 1、简介
    • 1.1 Qt简介
    • 1.2 Qt下载和安装
    • 1.3 Qt快捷键
    • 1.4 Qt帮助
  • 2、Qt+Web控件
    • 2.1 测试代码1（QApplication）
    • 2.2 测试代码2（QApplication+QWidget）
    • 2.3 测试代码3（QApplication+QMainWindow）
    • 2.4 测试代码4（QApplication+QMainWindow+百度地图）
  • 结语

1、简介

1.1 Qt简介

Qt Creator是跨平台的集成开发环境（IDE），旨在为开发者带来最好的体验。Qt Creator 可在 Windows，Linux 和 macOS 桌面操作系统上运行，并允许开发者在桌面、移动和嵌入式平台上创建软件。
在这里插入图片描述
Qt（官方发音 [kju:t]，音同 cute）是一个跨平台的 C++ 开发库，主要用来开发图形用户界面（Graphical User Interface，GUI）程序，当然也可以开发不带界面的命令行（Command User Interface，CUI）程序。

1.2 Qt下载和安装

Qt5.15开始，无论是开源版还是商业版都采用了在线安装的方式。不再提供离线包。这里下载Qt5.14进行学习。

  • 官网下载地址：
    https://download.qt.io/archive/qt/5.14/5.14.2/
  • 镜像下载地址：
    https://download.qt.io/static/mirrorlist/
  • qt的vs插件下载地址：
    http://download.qt.io/archive/vsaddin/

1.3 Qt快捷键

  • 基本快捷键
新建文件或项目(N) ：Ctrl + N 
关闭当前窗口/关闭当前文件 ：Ctrl + W
关闭所有文件：Ctrl + Shfit + W 
关闭当前文件：（windows） Ctrl + F4
运行： Ctrl + R 
返回上一级（返回），常用于 跳转代码： Alt + ←（方向左键） 
进入下一级（前进），常用于 跳转代码： Alt + →（方向右键）
  • 常用快捷键
自动排版对齐代码：Ctrl + I 
减小字体大小：Ctrl+- (Ctrl+鼠标滚轮向下) 
增加字体大小：Ctrl++ (Ctrl+鼠标滚轮向上)
重置字体大小：Ctrl+0
折叠：Ctrl+< 
展开：Ctrl+>
复制行：Ctrl+Ins
复制到行下：Ctrl+Alt+Down
复制到行上：Ctrl+Alt+Up
在当前行上方插入新行：Ctrl+Shift+Enter
在当前行下方插入新行：Ctrl+Enter
查看剪切板历史：Ctrl+Shift+V
剪切行：Shift+Del
追加行：Ctrl+J
向下移动当前行：Ctrl+Shift+Down
向上移动当前行：Ctrl+Shift+Up
切换函数声明/定义： Ctrl + 鼠标左键/Shift + F2 
编辑信号和槽：F4
跳转至以}结尾的块：Ctrl+} 
跳转至以{开始的块：Ctrl+{
打开类型层次窗口：Ctrl+Shift+T
  • 自定义快捷键

在这里插入图片描述

1.4 Qt帮助

Qt Creator帮助文档在安装包里，在安装Qt时就安在了“安装目录/Qt5.14.2\Docs\Qt-5.14.2”。
在这里插入图片描述
点击左侧帮助-》选择下拉“索引”输入QOpenGL，下面会出现匹配的结果记录，点击搜索到的QOpenGLBuffer，在右侧显示出搜索出的帮助文档内容。
在这里插入图片描述

2、Qt+Web控件

使用QT程序可以访问web页面，但不同QT版本中使用的类和方法不同：

Qt4中使用webkit模块；
Qt5~Qt5.5使用webkitwidgets模块；
Qt5.6以上版本使用webenginewidgets模块。

2.1 测试代码1（QApplication）

新建Console项目如下：
在这里插入图片描述

  • untitled1.pro
QT     += core gui widgets webenginewidgets network
CONFIG += c++11
DEFINES += QT_DEPRECATED_WARNINGSSOURCES += \main.cpp# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += targetRESOURCES += \html.qrc
  • main.cpp
#include <QCoreApplication>
#include <QApplication>
#include <QWidget>
#include <QWebEngineView>
#include <QVBoxLayout>
#include <QUrl>int main(int argc, char *argv[])
{QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);QApplication app(argc, argv);QWidget window;QVBoxLayout* layout = new QVBoxLayout(&window);QWebEngineView* view = new QWebEngineView(&window);QUrl baseUrl = "file:///" + QCoreApplication::applicationDirPath() + "/dist/test.html";//view->setUrl(QUrl("https://www.google.com/maps"));//view->setUrl(QUrl("https://www.baidu.com"));//view->setUrl(QUrl("file:///E:/work/index.html"));view->setUrl(QUrl("qrc:/new/prefix1/test.html"));// 连接页面加载完成信号QObject::connect(view, &QWebEngineView::loadFinished, [&view](){// 执行一些 JS 代码，例如设置地图中心点和缩放级别//QString js = QString("var latLng = new google.maps.LatLng(40.758896, -73.985130);"//      "var mapOptions = { center: latLng, zoom: 13 };"//     "new google.maps.Map(document.getElementById('map'), mapOptions);");//view->page()->runJavaScript(js);QString jsCode = QString("var map = new Microsoft.Maps.Map('#myMap',{});""map.setView({center: new Microsoft.Maps.Location(32.027222, 114.0225), zoom: 8});");view->page()->runJavaScript(jsCode);});layout->addWidget(view);window.resize(700, 500);window.show();return app.exec();
}
  • index.html
<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8" /><!-- Reference to the Bing Maps SDK --><script type='text/javascript'src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[your bing key]'async defer></script><script type='text/javascript'>function GetMap(){var map = new Microsoft.Maps.Map('#myMap',{});//在此添加地图加载代码}</script>
</head>
<body><div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

在这里插入图片描述

2.2 测试代码2（QApplication+QWidget）

新建QWidget项目：
在这里插入图片描述
在这里插入图片描述

  • untitled2.pro
QT       += core gui webenginewidgets
greaterThan(QT_MAJOR_VERSION, 4): QT += widgetsCONFIG += c++11
DEFINES += QT_DEPRECATED_WARNINGSSOURCES += \main.cpp \widget.cppHEADERS += \widget.hFORMS += \widget.ui# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
  • main.cpp
#include "widget.h"
#include <QApplication>int main(int argc, char *argv[])
{QApplication::setAttribute(Qt::AA_UseOpenGLES);QApplication a(argc, argv);Widget w;w.show();return a.exec();
}
  • widget.h
#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>
#include <QWebEngineView>
#include <QWebChannel>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();QWebEngineView    *m_WebView;QWebChannel       *m_pWebChannel;public slots:void onLoadFinished();private:Ui::Widget *ui;
};
#endif // WIDGET_H
  • widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QVBoxLayout>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);m_WebView = new QWebEngineView(this);
//    view->resize(500, 500);QVBoxLayout* layout = new QVBoxLayout(this);layout->addWidget(m_WebView);
//    layout->addStretch();m_pWebChannel = new QWebChannel(this);m_pWebChannel->registerObject(QString("webobj"), this);m_WebView->page()->setWebChannel(m_pWebChannel);connect(m_WebView, &QWebEngineView::loadFinished, this, &Widget::onLoadFinished);m_WebView->load(QUrl(QStringLiteral("http://www.baidu.com")));//view->showMaximized();}Widget::~Widget()
{delete ui;delete m_WebView;
}void Widget::onLoadFinished()
{QString jsStr = QString("initData('test', 1, 2, 3)");m_WebView->page()->runJavaScript("alert('hello world!')");
}
  • 运行如下：
    在这里插入图片描述

2.3 测试代码3（QApplication+QMainWindow）

新建QMainWindow项目如下：
在这里插入图片描述
在这里插入图片描述

  • untitled3.pro
QT       += core gui webenginewidgets
greaterThan(QT_MAJOR_VERSION, 4): QT += widgetsCONFIG += c++11
DEFINES += QT_DEPRECATED_WARNINGSSOURCES += \main.cpp \mainwindow.cppHEADERS += \mainwindow.hFORMS += \mainwindow.ui# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
  • main.cpp
#include "mainwindow.h"
#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);MainWindow w;w.show();return a.exec();
}
  • mainwindow.h:
#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private:Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
  • mainwindow.cpp:
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QWebEngineView>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);QWebEngineView *map=new QWebEngineView(this);map->load(QUrl("file:///C:/Users/tomcat/Desktop/test.html"));map->resize(700,600);map->show();
}MainWindow::~MainWindow()
{delete ui;
}

运行如下：
在这里插入图片描述

2.4 测试代码4（QApplication+QMainWindow+百度地图）

新建QMainWindow项目后：

  • （1）在pro文件中添加
QT += webenginewidgets

在这里插入图片描述

  • （2）添加显示地图的widget
    鼠标双击文件mainwindow.ui，

在这里插入图片描述
界面中间区域显示如下：
在这里插入图片描述
在主窗口中添加一个widget控件如上。
在这里插入图片描述
将Widget控件提升为QWebEngineView控件。
在这里插入图片描述
提升后控件的类名更新为：
在这里插入图片描述
在路径D:\Microsoft\Qt\Qt5.14.2\5.14.2\Src\qtwebchannel\examples\webchannel\shared下复制qwebchannel.js文件备用，此文件参与QT程序与JS文件通信。
在这里插入图片描述

  • untitled3.pro
QT       += core gui webenginewidgets
greaterThan(QT_MAJOR_VERSION, 4): QT += widgetsCONFIG += c++11
DEFINES += QT_DEPRECATED_WARNINGSSOURCES += \main.cpp \mainwindow.cppHEADERS += \mainwindow.hFORMS += \mainwindow.ui# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
  • main.cpp
#include "mainwindow.h"
#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);MainWindow w;w.show();return a.exec();
}
  • mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QWidget>
#include <QWebEngineHistory>
#include <QWebEngineHistoryItem>
#include <QWebEnginePage>
#include <QWebEngineView>
#include <QtWebEngineWidgets/QtWebEngineWidgets>QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();void on_pushButton_clicked();private:Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
  • mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QLabel>
#include <QPushButton>
#include <QFile>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);QString htmlPath = QCoreApplication::applicationDirPath() + "/html/";QString htmlFile = htmlPath + "test.html";qDebug() << htmlFile; /* 获取你要显示网页的路径 */QFile file(htmlFile);if(!file.exists())qDebug() << "html file is not exist";/* 创建一个与网页交互的通道 */QWebChannel *webChannel = new QWebChannel(ui->widget->page());ui->widget->page()->setWebChannel(webChannel);/* 注册通道，ID 为 JSInterface，其将在JS文件这引用 */webChannel->registerObject(QString("JSInterface"), ui->widget);ui->widget->page()->load(QUrl("file:///" + htmlFile));
//    ui->widget->page()->load(QUrl("https://www.baidu.com"));
}MainWindow::~MainWindow()
{delete ui;
}void MainWindow::on_pushButton_clicked()
{
//    QString str = ui->lineEdit->text();
//    QString lon = str.split(",")[0];
//    QString lat = str.split(",")[1];
//    QString cmd=QString("myMarker(%1,%2)").arg(lon).arg(lat);
//    qDebug() << cmd;
//    ui->widget->page()->runJavaScript(cmd);
}
  • test.html
<!DOCTYPE html> 
<html><head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>BDMap Sample</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=your baidu key"></script><script type="text/javascript" src="qwebchannel.js"></script>   <!-- 与qt交互 --></head> <body> <div id="container"></div><script type="text/javascript">var map = new BMapGL.Map("container");           // 创建地图实例 var point = new BMapGL.Point(113.557892,34.8333);   // 创建点坐标 map.centerAndZoom(point, 15);                    // 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(true);                 // 设置滚轮缩放// map.setMapType(BMAP_EARTH_MAP);                  // 设置地图样式，地球模式    // 创建标点  var point = new BMapGL.Point(113.557892, 34.8333);   var marker = new BMapGL.Marker(point);        // 创建标注   map.addOverlay(marker);                     // 将标注添加到地图中 var opts = {width: 250,     // 信息窗口宽度height: 100,    // 信息窗口高度title: "New Marker"  // 信息窗口标题}var infoWindow = new BMapGL.InfoWindow("Marker", opts);  // 创建信息窗口对象marker.addEventListener("click", function(){                    // 标点添加点击事件map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口});/*****************************/// qt交互注册new QWebChannel(qt.webChannelTransport,function(channel){window.JSInterface = channel.objects.JSInterface; // 注册});function addMarker(lng,lat){var newpoint=new BMapGL.Point(lng,lat);var newmarker = new BMapGL.Marker(newpoint);        // 创建标注map.addOverlay(newmarker);alert('ok');};/******************************/</script> </body> 
</html>

网页 demo参考百度的帮助文档.
https://lbsyun.baidu.com/jsdemo.htm#aCreateMap
最后运行如下：
在这里插入图片描述

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！

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

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

相关文章

如何做代码的Review：一场细致入微的质量把控之旅

如何做代码的Review：一场细致入微的质量把控之旅

我是洋哥&#xff0c;一个拥有6年经验的程序员&#xff0c;Litchi开源组织发起人。 在软件开发中&#xff0c;代码Review是一个至关重要的环节。它不仅是保证代码质量的有效手段&#xff0c;还是团队成员之间交流经验、共享知识的桥梁。本文将带你走进代码Review的世界&#xf…
阅读更多...
hcia datacom课程学习（1）：通信基础

hcia datacom课程学习（1）：通信基础

1.总体框架 上图为发送方通过互联网传递信息给接收方的过程。 家用路由器会直接集成上图中的四层&#xff08;vlan&#xff0c;DHCP&#xff0c;静态路由&#xff0c;NAT&#xff0c;PPPoE&#xff09;。 2.网络性能指标 &#xff08;1&#xff09;带宽 单位时间内传输的数…
阅读更多...
稳态准直大面积太阳光模拟器中光学系统

稳态准直大面积太阳光模拟器中光学系统

太阳光模拟器中光学系统概述 光学系统&#xff08;optical system&#xff09;是指由透镜、反射镜、棱镜和光阑等多种光学元件按一定次序组合成的系统。通常用来成像或做光学信息处 理。曲率中心在同一直线上的两个或两个以上折射&#xff08;或反射&#xff09;球面组成的光学…
阅读更多...
【web】云导航项目部署及环境搭建(复杂)

【web】云导航项目部署及环境搭建(复杂)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、项目介绍1.1项目环境架构LNMP1.2项目代码说明 二、项目环境搭建2.1 Nginx安装2.2 php安装2.3 nginx配置和php配置2.3.1 修改nginx文件2.3.2 修改vim /etc/p…
阅读更多...
300分钟吃透分布式缓存-14讲：大数据时代，MC如何应对新的常见问题？

300分钟吃透分布式缓存-14讲：大数据时代，MC如何应对新的常见问题？

大数据时代 Memcached 经典问题 随着互联网的快速发展和普及&#xff0c;人类进入了大数据时代。在大数据时代&#xff0c;移动设备全面融入了人们的工作和生活&#xff0c;各种数据以前所未有的 速度被生产、挖掘和消费。移动互联网系统也不断演进和发展&#xff0c;存储、计…
阅读更多...
代码随想录day34--动态规划的应用2 | LeetCode343.整数拆分、LeetCode96.不同的二叉搜索树

代码随想录day34--动态规划的应用2 | LeetCode343.整数拆分、LeetCode96.不同的二叉搜索树

LeetCode343.整数拆分 题目描述&#xff1a; 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 示例 1: 输入: n 2 输出: 1 解释: 2 1 1, 1 1 1。…
阅读更多...
深入理解计算机系统学习笔记

深入理解计算机系统学习笔记

2.3整数运算 有时候会发现两个正数相加会得出一个负数&#xff0c;而比较表达式x<y和比较表达式x-y<0会产生不同的结果。这些属性是由于计算机运算的有限性造成的。理解计算机运算的细微之处能够帮助程序员编写更可靠的代码。 2 .3. 1 无符号加法 原理&#xff1a; 在正…
阅读更多...
什么是媒体发稿？发稿媒体分类及发稿流程

什么是媒体发稿？发稿媒体分类及发稿流程

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体发稿是一种企业推广和宣传的手段&#xff0c;通过媒体渠道传递企业信息和形象。 媒体发稿的含义在于&#xff0c;当企业有新闻、事件或其他消息需要对外公布时&#xff0c;可以选择…
阅读更多...
改进RAG：自查询检索

改进RAG：自查询检索

每日推荐一篇专注于解决实际问题的外文，精准翻译并深入解读其要点，助力读者培养实际问题解决和代码动手的能力。 欢迎关注公众号（NLP Research），及时查看最新内容 原文标题：Improving RAG: Self Querying Retrieval 原文地址：https://medium.com/@ogre51/improving-ra…
阅读更多...
Promise 介绍与基本使用 - 学习笔记

Promise 介绍与基本使用 - 学习笔记

Promise 介绍与基本使用 1、Promise 介绍与基本使用Promise是什么&#xff1f;理解&#xff1a;为什么要用 PromisePromise 的初体验 - 抽奖Promise 初体验 - 文件读取&#xff08;返回 Promise 对象&#xff09; 2、Promise 的状态3、Promise 对象的值3、Promise 关键问题4、P…
阅读更多...
基于ZYNQ的PCIE高速数据采集卡的设计（三）硬件设计

基于ZYNQ的PCIE高速数据采集卡的设计（三）硬件设计

采集卡硬件设计 3.1 引言 采集卡的硬件设计是实现采集功能的基础&#xff0c;良好的硬件设计可以使采集功能更容 易实现&#xff0c;方便软件开发。本章基于第二章的硬件设计方案来详细介绍采集卡硬件设计。 包括载卡和子卡的芯片的选型、配置和具体电路的设计。载卡和子卡…
阅读更多...
提升Vue3应用效率的秘诀：深入比较ref与reactive！

提升Vue3应用效率的秘诀：深入比较ref与reactive！

ref 和 reactive 是 Vue3 中实现响应式数据的核心 API。ref 用于包装基本数据类型&#xff0c;而 reactive 用于处理对象和数组。尽管 reactive 似乎更适合处理对象&#xff0c;但 Vue3 官方文档更推荐使用 ref。 我的想法&#xff0c;ref就是比reactive好用&#xff0c;官方也…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023