基于Qt WebChannel的前端UI桌面混合应用

水墨长天

已于 2023-01-29 03:10:35 修改

阅读量1.7k

点赞数

分类专栏： C++ QT 文章标签： ui qt 前端

于 2023-01-29 03:01:55 首次发布

本文链接：https://blog.csdn.net/gehong3641/article/details/127175062

版权

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

35 篇文章 2 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

基于Qt WebChannel的前端UI桌面混合应用

一、Qt模块
二、开发实例
三、总结

一、Qt模块

本文使用Qt 5.15 LTS版本，开发环境：Windows + MSVC 2019 32-bit，其它平台参考Platform Notes。

Qt WebEngine
该模块主要提供一个基于Chromium的跨平台浏览器引擎。
Qt WebChannel
该模块提供的js库可以无缝访问C++或QML注册的序列化对象。

二、开发实例

工程目录树：
demo
├── core.h
├── demoassets.pri
├── demo.pro
├── index.html
├── main.cpp
└── qwebchannel.js

1. 创建工程

本文使用空白工程，逐步添加文件，最终的工程文件如下：

# demo.pro
TEMPLATE = app
TARGET = demo

QT += core webenginewidgets webchannel

HEADERS += core.h
SOURCES += main.cpp
DISTFILES += demoassets.pri index.html qwebchannel.js

include(./demoassets.pri)
INSTALLS += target

2. 资源拷贝

# demoassets.pri
# 添加前端资源文件
jslib = $$PWD/qwebchannel.js
pages = $$PWD/index.html

demoassets.files += $$jslib
demoassets.files += $$pages

INSTALLS += demoassets

assetcopy.files += $$jslib
assetcopy.files += $$pages

CONFIG(debug, debug|release){
    assetcopy.path = $${OUT_PWD}/debug
}

CONFIG(release, debug|release){
    assetcopy.path = $${OUT_PWD}/release
}

COPIES += assetcopy

3. 主应用

#include "core.h"

#include <QApplication>
#include <QWebChannel>
#include <QWebEngineView>


int main(int argc, char **argv)
{
    QApplication app(argc, argv);

    // 注册对象
    Core* core = new Core();
    QWebChannel* channel = new QWebChannel();
    channel->registerObject(QStringLiteral("core"), core);

    // 加载主页
    QString homePage = QCoreApplication::applicationDirPath() + "/index.html";
    QWebEngineView *view = new QWebEngineView();
    view->page()->setWebChannel(channel);
    view->load(QUrl::fromLocalFile(homePage));
    view->show();

    return app.exec();
}

4. 工程方法

#ifndef CORE_H
#define CORE_H

#include <QObject>
#include <QMessageBox>

class Core: public QObject
{
    Q_OBJECT
public:
    Core(QObject *parent = nullptr): QObject(parent)
    {
    }
signals:
    void send(const QString &text);

public slots:
    void receive(const QString &text)
    {
        // receive from JS
        QMessageBox::information(NULL, "receive", text, QMessageBox::Yes | QMessageBox::No, QMessageBox::Yes);
        // send to JS
        emit send(text);
    }
};
#endif // CORE_H

5. 前端页面

注：

演示通过CDN引入Vue，实际可自行选择，关键部分为new QWebChannel
qwebchannel.js为官方提供，可在Qt WebChannel Standalone Example查看

<html>
    <head>
        <meta charset="UTF-8" />
        <!-- Qt webChannel -->
        <script type="text/javascript" src="./qwebchannel.js"></script>
        <!-- Vue -->
        <script src="https://unpkg.com/vue@3.2.45/dist/vue.global.js"></script>
    </head>

    <body>
        <div id="app">
            <div style="width: 300px;">
                <span>来自Qt</span><br>
                <input v-model="textarea"/>
                <br>
                <span>发到Qt</span><br>
                <input v-model="message" placeholder="请输入" /><br>
                <button @click='sendToQt'>Send</button>
            </div>
        </div>

        <script>
            Vue.createApp({
                data() {
                    return {
                        message: '',
                        textarea: ''
                    }
                },
                methods: {
                    sendToQt() {
                        console.log('to Qt' + this.message);
                        window.core.receive(this.message);
                    }
                },
                mounted() {
                    that = this;
                    new QWebChannel(qt.webChannelTransport, function(channel) {
                        // 挂载全局对象
                        window.core = channel.objects.core;
                        // 接收Qt发送信号
                        core.send.connect(function(text) {
                            console.log('from Qt' + text);
                            that.textarea = text;
                        });
                    });
                }
            }).mount("#app");
        </script>
    </body>
</html>

三、总结

通过WebEngine和WebChannel实现前端js和Qt C++的交互，进而由Qt调用C++本地方法来处理系统或平台相关的业务功能，完成一个前后端的高度集成。
Qt本身自带强大的功能，开发人员根据产品特点设计合适的业务架构，如插件化、模块化的架构，即可实现一个产品模型。

水墨长天

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
基于Qt WebChannel的前端UI桌面混合应用

通过WebEngine和WebChannel实现前端js和Qt C++的交互，进而由Qt调用C++本地方法来处理系统或平台相关的业务功能，完成一个前后端的高度集成。Qt本身自带强大的功能，开发人员根据产品特点设计合适的业务架构，如插件化、模块化的架构，即可实现一个产品模型。
复制链接

扫一扫

专栏目录