QWebEngineView与JS交互附带实例

最新推荐文章于 2024-07-02 10:21:13 发布

xumingyifrend

最新推荐文章于 2024-07-02 10:21:13 发布

阅读量2.8k

点赞数 1

文章标签： QWebEngineView与JS交互 echarts实现温度计 html+js实现温度计的控制 QWebEngineView使用时奔溃及缺少插件问题

本文链接：https://blog.csdn.net/xumingyifrend/article/details/103180351

版权

代码从qt4.8迁移到qt5.9，QWebkit也变成了QWebEngineView。下面将介绍QWebEngineView与JS交互及一些关注点。

两者交互的原理网络上和开发文档中已经介绍了很多，在此不再赘述。看代码

1、JS部分

draw.html中绘制了一个简单的温度计，提供接口给QT调用，从而设置温度计的值。核心代码如下：

<head>
    <meta charset="UTF-8">
    <title>温度计</title>
	<script src="./qwebchannel.js"></script>
    <script src="build/dist/jquery.min.js"></script>
    <script src="build/dist/echarts.min.js"></script>
	<style type="text/css">
		body, html,#temperatureEcharts {width: 100%;height: 400px;overflow: hidden;margin:0;}
	</style>
</head>
<body>
<input type="button" value="C++ function callback" onclick="onShowMsgBox()">
<!--温度计-->
<div class="temperatureBox">
    <div>
        <div id="temperatureEcharts" class="eChart"></div>
    </div>
</div>
......

function refreshData(num){			
		if(!myCharts){
		  return;
		}
		valueName = num;

		//更新数据
		var option = myCharts.getOption();
		option.series[0].data = [num+spacingNum];
		option.series[0].label.formatter;
		myCharts.setOption(option);
	}
new QWebChannel(qt.webChannelTransport, function(channel) {
    window.MainWindow = channel.objects.MainWindow;
})
	
function onShowMsgBox() {
    if (MainWindow) {
       MainWindow.showMsgBox()
    }
}

此处一定要记得加入qwebchannel.js（此文件与html文件放在同一目录下，自己在电脑里找这个文件，没有的话就去官网下载），另外建立了一个按钮“C++ function callback”方便从JS调用C++函数。

2、QT部分

.pro文件中一定要加入webenginewidgets模块

QT       += core gui webenginewidgets

.h文件中一定要加入QWebEngineView、QWebChannel头文件

#include <QMainWindow>
#include <QWebEngineView>
#include <QWebChannel>
#include <QVBoxLayout>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

    QWebEngineView *m_webView;
    QVBoxLayout *m_layout;

private:
    Ui::MainWindow *ui;

public slots:
    void onLoadFinished();
    void onSearchClick();
    void onPushbuttonClick();
    void showMsgBox();
};

.cpp文件，默认加载温度计网页，也可以加载其他网页，输入网址即可

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    m_webView = new QWebEngineView;
    QWebChannel *channel = new QWebChannel(m_webView->page());
    channel->registerObject("MainWindow", this);
    m_webView->page()->setWebChannel(channel);
    QString web = qApp->applicationDirPath() + "/html/draw.html";
    m_webView->page()->setUrl(QUrl(web));
    connect(m_webView, SIGNAL(loadFinished(bool)) , this , SLOT(onLoadFinished()));
    connect(ui->search_btn , SIGNAL(clicked(bool)) , this , SLOT(onSearchClick()));
    connect(ui->pushButton , SIGNAL(clicked(bool)) , this , SLOT(onPushbuttonClick()));

    m_layout = new QVBoxLayout;
    m_layout->addWidget(ui->search);
    m_layout->addWidget(m_webView);
    m_layout->setSpacing(5);

    QWidget *m_widget = new QWidget;
    m_widget->setLayout(m_layout);
    setCentralWidget(m_widget);
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::onLoadFinished()
{
    QMessageBox::about(NULL , "" , "加载完毕");
}

void MainWindow::onSearchClick()
{
    QString web = ui->lineEdit->text();
    if(web.isEmpty())
    {
        return;
    }
    m_webView->page()->setUrl(QUrl(web));
}

void MainWindow::onPushbuttonClick()
{
    QString num = ui->lineEdit_2->text();
    if(num.isEmpty())
    {
        return;
    }
    float num1 = num.toFloat();

    if(num1 < 0 || num1 > 100)
    {
        return;
    }
 //   QString text = QString("sendsms(\"%1\",\"%2\",\"%3\" ,\"%4\",\"%5\",\"%6\")").arg(appid).arg(appkey).arg(phoneNumber).arg(templateId).arg(smsSign).arg(verificationCode);
    QString text = QString("refreshData(%1)").arg(num1);
//    QMessageBox::about(NULL , "" , text);
    m_webView->page()->runJavaScript(text);
}

void MainWindow::showMsgBox()
{
    QMessageBox::about(NULL , "" , "这是JS调用C++");
}

网页上的按钮“C++ function callback”，点击即会在界面中弹出提示框

3、应用程序的发布

在将程序放到客户的电脑上运行时，会出现程序奔溃的问题。

问题一：QWebEngineView使用时奔溃，参考

https://blog.csdn.net/u012453032/article/details/84371253

问题二：

可在main函数中将该插件的路径添加进去，如：

QApplication::addLibraryPath("./plugins");

欢迎大家指教，希望大家喜欢

路漫漫其修远兮，同志仍须努力

xumingyifrend

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
QWebEngineView与JS交互附带实例

代码从qt4.8迁移到qt5.9，QWebkit也变成了QWebEngineView。下面将介绍QWebEngineView与JS交互及一些关注点。两者交互的原理网络上和开发文档中已经介绍了很多，在此不再赘述。看代码1、JS部分draw.html中绘制了一个简单的温度计，提供接口给QT调用，从而设置温度计的值。核心代码如下：<head> <meta ch...
复制链接

扫一扫