QT+HTML+JS混合编程(QT5.9+QWebEngineView +QWebchannel)

被HTML优雅界面吸引，初次学习QT+html混合编程开发，参考了https://blog.csdn.net/Best_ZYJ/article/details/79027245。以下是简单的登陆界面开发步骤，附源码。

QT：

1. 工程文件.pro添加：

Webenginewidgets （web显示类，用于显示web界面)

Webchannel（web数据通道类，用于数据通信）

 

QT       += core gui webenginewidgets webchannel

 

1. 创建通道对象类（qt与web通信是通过对象的方式交换数据）

创建类TinteractObj：

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 sig_nameChanged)

    Q_PROPERTY(QString password READ password WRITE setpassword NOTIFY sig_passwdChanged)



    QString m_username;    //本地保存的数据对象

    QString m_password;       



    QString username(){

        return m_username;

    }

    QString password(){

        return m_password;

    }

    void setusername(QString str){

        m_username = str;

    }

    void setpassword(QString str){

        m_password = str;

    }





signals:

    void sig_nameChanged();

    void sig_passwdChanged();

    void SigReceivedMessFromJS(QString strParameter,QString str);          //网页调用函数给qt发送该信号

    void SigSendMessageToJS(QString strParameter);             //给网页发送数据的信号



};

3、在主类中添加私有对象：

    QWebEngineView *webview;     //网页显示类对象,QT5.5之前使用的是QWebkit

    TInteractObj *pInteractObj;       //与网页数据交换类对象

4、类构造函数添加

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

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

    QString strfile = QCoreApplication::applicationDirPath();
//导入本地html文件    webview->page()->load( QUrl("file:///"+strfile+"/index.html"));
//当网页返回数据，则会返回到通道对象pInteractObj中，然后再发送信号到主类OnReceiveMessageFromJS中处理
connect(pInteractObj, &TInteractObj::SigReceivedMessFromJS, this,&Widget::OnReceiveMessageFromJS);
//向网页发送信号需要利用通道对象pInteractObj的SigSendMessageToJS信号
    connect(this,&Widget::SigSendMessageToJS,pInteractObj, &TInteractObj::SigSendMessageToJS);

html中写js交互函数

注意：无以下这句会无法创建QwebChannel对象，qwebchannel.js可在QT安装目录下查找，然后修改src路径即可

       

       

        

 

 

—————————————————————————————————————————————————

—————————————————————分割线—————————————————————————

以下是源码：

qtforhtml_login.pro

#-------------------------------------------------
#
# Project created by QtCreator 2018-12-26T16:16:25
#
#-------------------------------------------------

QT       += core gui webenginewidgets webchannel

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = qtforhtml_login
TEMPLATE = app

# The following define makes your compiler emit warnings if you use
# any feature of Qt which as been marked as deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if you use deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0


SOURCES += main.cpp\
        widget.cpp \
    tinteractobj.cpp

HEADERS  += widget.h \
    tinteractobj.h

FORMS    += widget.ui

tinteractobj.h

#ifndef TINTERACT_OBJECT_H
#define TINTERACT_OBJECT_H
#include 

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 sig_nameChanged)
    Q_PROPERTY(QString password READ password WRITE setpassword NOTIFY sig_passwdChanged)

    QString m_username;
    QString m_password;

    QString username(){
        return m_username;
    }
    QString password(){
        return m_password;
    }
    void setusername(QString str){
        m_username = str;
    }
    void setpassword(QString str){
        m_password = str;
    }


signals:
    void sig_nameChanged();
    void sig_passwdChanged();
    void SigReceivedMessFromJS(QString strParameter,QString str);          //Receive message from Web
    void SigSendMessageToJS(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 SigReceivedMessFromJS(strParameter,str);
}

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include 
#include 
#include 
#include "tinteractobj.h"
namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

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

signals:
        void SigSendMessageToJS(QString strParameter);

public slots:
        void OnReceiveMessageFromJS(QString usr,QString passwd);
        void resizeEvent(QResizeEvent * event);
private:
    Ui::Widget *ui;

    QWebEngineView *webview;
    TInteractObj *pInteractObj;
};

#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include 
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    webview = new QWebEngineView(this);
    webview->resize(this->size());
    QWebChannel *pWebChannel   = new QWebChannel(webview->page());      //为网页视图页面创建通道channel
    pInteractObj = new TInteractObj(this);                   //创建通道对象用于与JS交互
    //"interactObj"为注册名，JS调用的对象名必须和它相同
    pWebChannel->registerObject(QStringLiteral("interactObj"), pInteractObj);//注册通道对象供JS调用

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

    QString strfile = QCoreApplication::applicationDirPath();
    webview->page()->load( QUrl("file:///"+strfile+"/index.html"));

    connect(pInteractObj, &TInteractObj::SigReceivedMessFromJS, this,&Widget::OnReceiveMessageFromJS);
    connect(this, &Widget::SigSendMessageToJS,pInteractObj, &TInteractObj::SigSendMessageToJS);
}
void Widget::OnReceiveMessageFromJS(QString usr,QString passwd)
{
    qDebug()<<"QDebug"<resize(this->size());
}

index.html

	
	
	
	
	
	 




	

		

			

				

					登录

					

						用户名
						
						
					

					

						密码
						
						
					

					

						忘记密码？
					

					

						

							

							登 录
						
					

					

						第三方登录
					

					

						
							
						

						
							
						

						
							
						
					

					

						立即注册
					
				
			
		
	
	
	
	
	  

注意：qwebchannel.js可在QT安装目录下查找