Ubuntu Qt QWebEngine使用、Js交互

Ubuntu Qt QWebEngine使用、Js交互

概述

1.QwebEngineView加载本地html
2.qt与js交互

QwebEngineView加载本地html

1.在工程*pro文件中插入：

webenginewidgets：使用QWebEngineView模块
webchannel：使用QWebChannel交互模块（向远程HTML客户端公开QObjects对象。）

2.布局界面

总共2个控件，一个Button用于调用Js中方法，测试交互。
另一个Frame用于显示本地html页面。

3.文件目录

frmsplittest 窗体
QtJsBridge 交互，Js能调用的方法都在这个类中

4.代码

#ifndef FRMSPLITTEST_H
#define FRMSPLITTEST_H

#include <QWidget>
#include <QWebEngineView>
#include <QGridLayout>
#include <QWebChannel>
#include <QJsonDocument>
#include <QWebEngineSettings>
#include <QJsonArray>
#include "QtJsBridge.h"
#include <QObject>
// 上面的部分头文件用不到，之前测试的时候用的。
namespace Ui {
class FrmSplitTest;
}

class FrmSplitTest : public QWidget
{
    Q_OBJECT

public:
    explicit FrmSplitTest(QWidget *parent = nullptr);
    ~FrmSplitTest();
private:
    Ui::FrmSplitTest *ui;
    QWebEngineView* m_view;         //显示web的容器
    QWebChannel* m_channel;         //和web进行通信的数据通道
    QtJsBridge *m_jsBridge;         // QT和Web通信的对象


protected:
    void resizeEvent(QResizeEvent *);
private slots: