1. Chrome 技术介绍
- 大多数 web 技术都是基于 chrome,例如 CEF、QCefView 以及 QWebEngineView ,这些都是在 native 界面里用来显示 html 网页,并且可以与 web 交互
- 例如常见的登录窗口、优酷的视频区域、WPS 的稻壳商城等,这些都是用 web 技术实现的
- 而 native 端,只需要把把网页展示出来,实现交互即可
2. VS2019 编译与使用 CEF
2.1 CEF 下载与编译
-
下载上图箭头所指链接,解压后按下图重命名文件夹,并新建 build 和 sdk 两个文件夹
-
用 CMake 工具编译上述 CEF 包,按下图配置
-
编译成后点击上图中的 Open Project 进入 VS2019 中
- F7 生成解决方案后报错如下,修改箭头处代码如图所示,保存后再次 F7 生成解决方案
- F7 生成解决方案后报错如下,修改箭头处代码如图所示,保存后再次 F7 生成解决方案
2.2 CEF 案例运行
- 将 cefsimple 设置为启动项目,启动本地调试器,出现百度搜索界面
- 注意修改下图代码中 url 链接为百度
- 注意修改下图代码中 url 链接为百度
3. QWebEngineView 基本用法
-
Widget 提升为 QWebEngineView
-
.pro 中添加头文件
cppQT += core gui webenginewidgets
-
widget.cpp
cpp#include "widget.h" #include "ui_widget.h" Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) { ui->setupUi(this); ui->web_widget->setUrl(QUrl("http://www.baidu.com")); ui->web_widget->show(); } Widget::~Widget() { delete ui; }
4. Qt html js 交互
- qt 除了可以显示网页,还可以和网页交互,互相发消息,调用函数
- QtWebDemo.h
cpp
#pragma once
#include <QtWidgets/QWidget>
#include "ui_QtWebDemo.h"
#include "WebObject.h"
class QtWebDemo : public QWidget {
Q_OBJECT
public:
QtWebDemo(QWidget *parent = Q_NULLPTR);
~QtWebDemo();
public slots:
void on_btnSend_clicked();
void update_text(const QString& htmltext);
private:
Ui::QtWebDemoClass ui;
WebObject* m_pWebObj = nullptr;
};
- QtWebDemo.cpp
cpp
#include "QtWebDemo.h"
#include <QWebChannel>
#include <QWebEnginePage>
QtWebDemo::QtWebDemo(QWidget *parent) : QWidget(parent) {
ui.setupUi(this);
QString path = QApplication::applicationDirPath() + "/WebPage/index.html";
ui.webEngineView->setUrl(QUrl(path));
m_pWebObj = new WebObject();
QWebEnginePage* pPage = ui.webEngineView->page();
// Qt 和 html js 的桥梁:QWebChannel
QWebChannel* channel = new QWebChannel(this);
// 注册 html 对象
// 第二个参数需要是 QObject 的派生类
channel->registerObject(QStringLiteral("content"), m_pWebObj);
pPage->setWebChannel(channel);
connect(m_pWebObj, &WebObject::sig_SendToUI, this, &QtWebDemo::update_text);
}
void QtWebDemo::on_btnSend_clicked() {
QString text = ui.lineEdit->text();
m_pWebObj->SendTextToHtml(text);
}
QtWebDemo::~QtWebDemo() {
delete m_pWebObj;
}
void QtWebDemo::update_text(const QString& htmltext) {
ui.plainTextEdit->appendPlainText(htmltext);
}
- WebObject.h
cpp
#pragma once
#include <QObject>
class WebObject : public QObject {
Q_OBJECT
public:
WebObject(QObject* parent = nullptr) :QObject(parent) {}
~WebObject();
void SendTextToHtml(const QString& text);
// 接收来自 html 发来的内容,必须要加 Q_INVOKABLE,不然收不到
Q_INVOKABLE void receiveTextFromHtml(const QString& r_text);
signals:
void sig_sendTextToHtml(const QString& text);
void sig_SendToUI(const QString& htmltext);
};
- WebObject.cpp
cpp
#include "WebObject.h"
WebObject::~WebObject() {}
void WebObject::SendTextToHtml(const QString& text) {
emit sig_sendTextToHtml(text);
}
void WebObject::receiveTextFromHtml(const QString& htmltext) {
emit sig_SendToUI(htmltext);
}
5. Qt ECharts 使用详解
- ECharts:比 QCustomPlot、QWT、QCharts 更好的开源图表曲线组件
- widget.cpp
cpp
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) {
ui->setupUi(this);
QString exe_path = qApp->applicationDirPath();
QString _klinePath = exe_path + "/myecharts/candlestick-simple.html";
ui->web_widget->setUrl(QUrl(_klinePath));
connect(ui->radioButton_kline, &QRadioButton::toggled, [=](bool checked){
if(checked) {
ui->web_widget->setUrl(QUrl(_klinePath));
}
});
connect(ui->radioButton_line, &QRadioButton::toggled, [=](bool checked){
if(checked) {
QString _linePath = exe_path + "/myecharts/line-smooth.html";
ui->web_widget->setUrl(QUrl(_linePath));
}
});
}
Widget::~Widget() {
delete ui;
}