1. Chrome 技術(shù)介紹

• 大多數(shù) web 技術(shù)都是基于 chrome，例如 CEF、QCefView 以及 QWebEngineView，這些都是在 native 界面里用來顯示 html 網(wǎng)頁，并且可以與 web 交互
  • 例如常見的登錄窗口、優(yōu)酷的視頻區(qū)域、WPS 的稻殼商城等，這些都是用 web 技術(shù)實(shí)現(xiàn)的
  • 而 native 端，只需要把把網(wǎng)頁展示出來，實(shí)現(xiàn)交互即可

2. VS2019 編譯與使用 CEF

2.1 CEF 下載與編譯

• CEF 下載鏈接
  

• 下載上圖箭頭所指鏈接，解壓后按下圖重命名文件夾，并新建 build 和 sdk 兩個(gè)文件夾
  

• 用 CMake 工具編譯上述 CEF 包，按下圖配置

  • 基于Windows的Cmake安裝教程
    

• 編譯成后點(diǎn)擊上圖中的 Open Project 進(jìn)入 VS2019 中

  • F7 生成解決方案后報(bào)錯(cuò)如下，修改箭頭處代碼如圖所示，保存后再次 F7 生成解決方案
    

2.2 CEF 案例運(yùn)行

• 將 cefsimple 設(shè)置為啟動(dòng)項(xiàng)目，啟動(dòng)本地調(diào)試器，出現(xiàn)百度搜索界面
  • 注意修改下圖代碼中 url 鏈接為百度
    

3. QWebEngineView 基本用法

• Widget 提升為 QWebEngineView
  

• .pro 中添加頭文件

  QT       += core gui webenginewidgets
  

• widget.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 除了可以顯示網(wǎng)頁，還可以和網(wǎng)頁交互，互相發(fā)消息，調(diào)用函數(shù)

• QtWebDemo.h

#pragma once#include <QtWidgets/QWidget>
#include "ui_QtWebDemo.h"
#include "WebObject.h"class QtWebDemo : public QWidget {Q_OBJECTpublic: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

#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 的橋梁：QWebChannelQWebChannel* channel = new QWebChannel(this);// 注冊(cè) html 對(duì)象// 第二個(gè)參數(shù)需要是 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

#pragma once#include <QObject>class WebObject : public QObject {Q_OBJECTpublic:WebObject(QObject* parent = nullptr) :QObject(parent) {}~WebObject();void SendTextToHtml(const QString& text);// 接收來自 html 發(fā)來的內(nèi)容，必須要加 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

#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

#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;
}