Qt H5 JS网页端通信和调用

最新推荐文章于 2022-05-07 14:17:41 发布

Jeacean

最新推荐文章于 2022-05-07 14:17:41 发布

阅读量2.3k

点赞数 1

分类专栏： QT C++ 文章标签： QT QWebChannel QWebEngineView

本文链接：https://blog.csdn.net/u013693952/article/details/103277902

版权

C++ 同时被 2 个专栏收录

60 篇文章 5 订阅

订阅专栏

13 篇文章 1 订阅

订阅专栏

公司用到了QT 嵌入HTML ，所以需要交互通信，折腾了一波，我的QT是5.8，QT5.5以上使用QWebEngineView哦，还有QWebEngineView，使用中间obj通信
参考：https://blog.csdn.net/weixin_42436161/article/details/85265796
废话不说上代码
调试方法就是new htmlWindow就行了

htmlWindow.h

#ifndef HTMLWINDOW_H
#define HTMLWINDOW_H

#include <QDialog>
#include <QWidget>
#include <QString>

#include <QWebEngineView>
#include "tinteractObj.h"

class QDialog;

class HtmlWindow :public QDialog

{
	Q_OBJECT

public:
	HtmlWindow(QWidget* parent = 0);


signals:
	void signalSendMessageToJS(QString strParameter);

public slots:
	void onReceiveMessageFromJS(QString usr, QString passwd);

private:
	void initLayout();
	QWebEngineView* view;
	TInteractObj* pInteractObj;
};



#endif // !HTMLWINDOW_H

htmlWindow.cpp

#include "htmlWindow.h"
#include <QVBoxLayout>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QFile>
#include <QFileDialog>
#include <QMessageBox>
#include <QCheckBox>
#include <QFrame>
#include <QColorDialog>
#include "osg\osgLib.h"
#include <QComboBox>
#include <QSpinBox>
#include <QWebChannel>
#include <QWebEngineView>
#include "tinteractObj.h"

HtmlWindow::HtmlWindow(QWidget *parent)
	: QDialog(parent)
{
	initLayout();
}

void HtmlWindow::initLayout()
{

	view = new QWebEngineView(this);
	QWebChannel *pWebChannel = new QWebChannel(view->page());    //为网页视图页面创建通道channel
	pInteractObj = new TInteractObj(this);                       //创建通道对象用于与JS交互
											                     //"interactObj"为注册名，JS调用的对象名必须和它相同
	pWebChannel->registerObject(QStringLiteral("interactObj"), pInteractObj);//注册通道对象供JS调用

	view->page()->setWebChannel(pWebChannel);    //设置通道

	//view->page()->load(QUrl("http://www.baidu.com/"));
	view->page()->load(QUrl("file:///C:/Users/Administrator/Desktop/QtH5.html"));     //导入本地html文件   

	//当网页返回数据，则会返回到通道对象pInteractObj中，然后再发送信号到主类OnReceiveMessageFromJS中处理
	connect(pInteractObj, &TInteractObj::signalReceivedMessFromJS, this, &HtmlWindow::onReceiveMessageFromJS);
	//向网页发送信号需要利用通道对象pInteractObj的SigSendMessageToJS信号
	connect(this, &HtmlWindow::signalSendMessageToJS, pInteractObj, &TInteractObj::signalSendMessageToJS);

	view->show();

}

void HtmlWindow::onReceiveMessageFromJS(QString usr, QString passwd)
{
	qDebug() << "QDebug" << usr << passwd;
	emit signalSendMessageToJS("ok");
}

tinteractObj.h

#ifndef TINTERACT_OBJECT_H
#define TINTERACT_OBJECT_H
#include <QObject>

class TInteractObj : public QObject
{
	Q_OBJECT
public:
	TInteractObj(QObject *parent);
	~TInteractObj();
	//页面端调用QT公共接口，必须有Q_INVOKABLE
	//页面端调用QT变量，用Q_PROPERTY，用法与QML相同
	Q_INVOKABLE void JSSendMessage(QString strParameter, QString str);
	Q_PROPERTY(QString username READ username WRITE setusername NOTIFY signalNameChanged)
	Q_PROPERTY(QString password READ password WRITE setpassword NOTIFY signalPasswdChanged)

	QString _username;
	QString _password;

	QString username() {
		return _username;
	}
	QString password() {
		return _password;
	}
	void setusername(QString str) {
		_username = str;
	}
	void setpassword(QString str) {
		_password = str;
	}


signals:
	void signalNameChanged();
	void signalPasswdChanged();
	void signalReceivedMessFromJS(QString strParameter, QString str);          //Receive message from Web
	void signalSendMessageToJS(QString strParameter);             //Send message to Web

};

#endif //TINTERACT_OBJECT_H

tinteractObj.cpp

#include "tinteractObj.h"

TInteractObj::TInteractObj(QObject *parent)
	:QObject(parent)
{
}

TInteractObj::~TInteractObj()
{
}

void TInteractObj::JSSendMessage(QString strParameter, QString str)
{
	emit signalReceivedMessFromJS(strParameter, str);
}

QtH5.html

<!DOCTYPE html>
<html lang="zh-CN">
 
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<title>HTML5+QT</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" /> 
</head>
 
<body>
 
	<div class="limiter">
		<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
			<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
				<form class="login100-form validate-form">
					<span class="login100-form-title p-b-49">登录</span>
 
					<div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
						<span class="label-input100">用户名</span>
						<input class="input100" type="text" name="username" placeholder="请输入用户名" autocomplete="off" id = "_username_">
						<span class="focus-input100" data-symbol="&#xf206;"></span>
					</div>
 
					<div class="wrap-input100 validate-input" data-validate="请输入密码">
						<span class="label-input100">密码</span>
						<input class="input100" type="password" name="pass" placeholder="请输入密码" id = "_password_">
						<span class="focus-input100" data-symbol="&#xf190;"></span>
					</div>
					<div class="container-login100-form-btn">
						<div class="wrap-login100-form-btn">
							<div class="login100-form-bgbtn"></div>
							<button class="login100-form-btn" id = "_login_">输入</button>
						</div>
					</div>
 
				</form>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="qwebchannel.js"></script>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<!--<script src="js/main.js"></script>-->
	<script type="text/javascript"> 
	window.onload = function() {  
            new QWebChannel(qt.webChannelTransport, function(channel) {    //浏览器内核自带
			
                //Get Qt interact object  
                var interactObj = channel.objects.interactObj;      //注册对象名
                
                //Web send message to Qt 
				$("#_login_").click(function(){
					 
					 var name = document.getElementById("_username_").value;
					 var passwd = document.getElementById("_password_").value;
 
						 interactObj.JSSendMessage(name,passwd);           //发送消息
				})

                interactObj.signalSendMessageToJS.connect(function(str) {       //接收信号，响应函数
                    if(str == "ok")
						alert("success");
                });    
            });  
            }  
 
 
 
	 </script>  
</body>
 
</html>

Jeacean

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
Qt H5 JS网页端通信和调用

公司用到了QT 嵌入HTML ，所以需要交互通信，折腾了一波参考：https://blog.csdn.net/weixin_42436161/article/details/85265796废话不说上代码调试方法就是new htmlWindow就行了htmlWindow.h#ifndef HTMLWINDOW_H#define HTMLWINDOW_H#include <Q...
复制链接

扫一扫