C++ Qt 学习(五):Qt Web 编程

1. Chrome 技术介绍

  • 大多数 web 技术都是基于 chrome,例如 CEF、QCefView 以及 QWebEngineView ,这些都是在 native 界面里用来显示 html 网页,并且可以与 web 交互
    • 例如常见的登录窗口、优酷的视频区域、WPS 的稻壳商城等,这些都是用 web 技术实现的
    • 而 native 端,只需要把把网页展示出来,实现交互即可

2. VS2019 编译与使用 CEF

2.1 CEF 下载与编译

  • CEF 下载链接

  • 下载上图箭头所指链接,解压后按下图重命名文件夹,并新建 build 和 sdk 两个文件夹

  • 用 CMake 工具编译上述 CEF 包,按下图配置

  • 编译成后点击上图中的 Open Project 进入 VS2019 中

    • F7 生成解决方案后报错如下,修改箭头处代码如图所示,保存后再次 F7 生成解决方案

2.2 CEF 案例运行

  • 将 cefsimple 设置为启动项目,启动本地调试器,出现百度搜索界面
    • 注意修改下图代码中 url 链接为百度

3. QWebEngineView 基本用法

  • Widget 提升为 QWebEngineView

  • .pro 中添加头文件

    cpp 复制代码
    QT       += 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;
}
相关推荐
CV学术叫叫兽10 分钟前
一站式学习:害虫识别与分类图像分割
学习·分类·数据挖掘
我们的五年21 分钟前
【Linux课程学习】:进程程序替换,execl,execv,execlp,execvp,execve,execle,execvpe函数
linux·c++·学习
酷酷的威朗普31 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
一棵开花的树,枝芽无限靠近你1 小时前
【PPTist】添加PPT模版
前端·学习·编辑器·html
做人不要太理性1 小时前
【C++】深入哈希表核心:从改造到封装,解锁 unordered_set 与 unordered_map 的终极奥义!
c++·哈希算法·散列表·unordered_map·unordered_set
程序员-King.1 小时前
2、桥接模式
c++·桥接模式
chnming19871 小时前
STL关联式容器之map
开发语言·c++
VertexGeek1 小时前
Rust学习(八):异常处理和宏编程:
学习·算法·rust
程序伍六七1 小时前
day16
开发语言·c++
小陈phd2 小时前
Vscode LinuxC++环境配置
linux·c++·vscode