温度计的控制"/>
QWebEngineView与JS交互，实现温度计的控制
从QT4.8到QT5.9，从QWebkit到QWebEngineView。
QWebEngineView与JS交互的原理，网络上和开发手册上已经讲得很详细了，下面将主要讲述代码和一些注意事项。
1、JS部分
draw.html文件中一定要加入qwebchannel.js，不然将无法调用C++的函数，该文件在电脑中一般能找到（安装了QT的话），将.js和.html文件放在同一目录下，然后使用如下方式添加。此外，定义了一个按钮"C++ function callback"，用于测试JS调用C++函数
<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()">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()}
}
2、QT部分
.pro文件中一定要记得加入webenginewidgets模块
QT += core gui webenginewidgets.h文件中要加入QWebEngineView、QWebChannel头文件
#include <QWebEngineView>
#include <QWebChannel>.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);
}特别注意，调用js函数需要传参数的格式，如：
传字符串类型的参数：
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);
3、发布程序
往往我们的程序放在客户的电脑上是不能直接执行的，因此要解决这些问题
问题一：QWebEngineView 使用崩溃问题，参考网址
问题二：缺少插件
在main函数中添加指定的插件，如下：
QApplication::addLibraryPath("./plugins");确保该路径下有缺的插件，并且一定要采用相同编译器下的插件，如：程序使用程序使用msvc2015 32位的编译器，那么插件就在该路径下D:\QT\Qt5.9.3\5.9.3\msvc2015，其它文件也在该路径下查找。
4、资源下载
下载路径：
该资源包括项目的源代码，可执行文件。同志们可在该项目上修改，将编译好的.exe文件放入bin文件夹即可执行。
欢迎大家指教，希望大家喜欢
路漫漫其修远兮，同志仍须努力
更多推荐
QWebEngineView与JS交互,实现温度计的控制
发布评论