校园二手市场网站建设,百度手机应用市场,网站速度查询,上海市建设安装协会网站1. Chrome 技术介绍
大多数 web 技术都是基于 chrome#xff0c;例如 CEF、QCefView 以及 QWebEngineView#xff0c;这些都是在 native 界面里用来显示 html 网页#xff0c;并且可以与 web 交互 例如常见的登录窗口、优酷的视频区域、WPS 的稻壳商城等#xff0c;这些都…1. Chrome 技术介绍
大多数 web 技术都是基于 chrome例如 CEF、QCefView 以及 QWebEngineView这些都是在 native 界面里用来显示 html 网页并且可以与 web 交互 例如常见的登录窗口、优酷的视频区域、WPS 的稻壳商城等这些都是用 web 技术实现的而 native 端只需要把把网页展示出来实现交互即可
2. VS2019 编译与使用 CEF
2.1 CEF 下载与编译 CEF 下载链接 下载上图箭头所指链接解压后按下图重命名文件夹并新建 build 和 sdk 两个文件夹 用 CMake 工具编译上述 CEF 包按下图配置 基于Windows的Cmake安装教程 编译成后点击上图中的 Open Project 进入 VS2019 中 F7 生成解决方案后报错如下修改箭头处代码如图所示保存后再次 F7 生成解决方案
2.2 CEF 案例运行
将 cefsimple 设置为启动项目启动本地调试器出现百度搜索界面 注意修改下图代码中 url 链接为百度 3. QWebEngineView 基本用法 Widget 提升为 QWebEngineView .pro 中添加头文件 QT core gui webenginewidgetswidget.cpp #include widget.h
#include ui_widget.hWidget::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
#pragma once#include QtWidgets/QWidget
#include ui_QtWebDemo.h
#include WebObject.hclass 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 QWebEnginePageQtWebDemo::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);// 注册 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
#pragma once#include QObjectclass WebObject : public QObject {Q_OBJECTpublic: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
#include WebObject.hWebObject::~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.hWidget::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;
}
