QWebChannel vue中的客户端通信

最新推荐文章于 2024-06-28 10:20:35 发布

百撕可乐

最新推荐文章于 2024-06-28 10:20:35 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript vue Powered by 金山文档

本文链接：https://blog.csdn.net/lqins/article/details/129668095

版权

vue 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

找了一圈的QWebChannel 在vue项目中的使用，似乎都不是很友好，要么是版本要么是报各种奇奇怪怪的错误。

这次项目是vue2.0的版本开发的大屏项目，地图上的播放使用了QC通讯，那在前端这块该如何使用呢？

首先我是根据官方的 channelDemo 去改，先在本地跑一遍官方demo的html

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web客户端</title>
<!--  qwebchannel.js文件一般在Qt安装路径下 D:\Qt\Qt5.12.5\Examples\Qt-5.12.5\webchannel\shared\qwebchannel.js-->
    <script src="qwebchannel.js"></script>
    <script src="main.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <h1 align="center">Web客户端程序 </h1>
    <div align="center">
        <textarea id="textAreaId" name="textArea"></textarea> </br>

        <button id="but_bool" class="button" onclick="butClick_bool()">bool类型</button>
        <button id="but_double" class="button" onclick="butClick_double()">double类型</button>
        <button id="but_str" class="button" onclick="butClick_str()">string类型</button>
        <button id="but_arr" class="button" onclick="butClick_arr()">array类型</button>
        <button id="but_obj" class="button" onclick="butClick_obj()">object类型</button> </br>
        
        <button id="but_Property" class="button" onclick="butClick_Property()">读取并修改Qt对象中的属性</button>
        <button id="but_enum" class="button" onclick="butClick_enum()">读取Q_ENUM标记的枚举</button>
        <button id="but_return" class="button" onclick="butClick_return()">调用带返回值的Qt函数</button>
    </div>
</body>
</html>

具体html 官方demo完整的代码移步：

https://github.com/lqins/QWebChannelVue/tree/main

具体 vue 版本的完整代码移步：

https://github.com/lqins/QWebChannelVue/tree/vues

有用的话记得点个star哦~感谢感谢♥

vue2/3版本的写法如下：

首先引入--注意地址

import QWebChannel from '@/utils/qwebchannel'

在mounted

mounted() {
    // qt通讯
    // eslint-disable-next-line eqeqeq
    if (typeof qt != 'undefined') {
        window.channel = new QWebChannel(qt.webChannelTransport, (channel) => {
            window.core = channel.objects.CoreId
        })
    }else{
        alert("qc对象未获取到！");
    }
},

各类方法的使用

methods:{
    butClick_bool(){
        // 发送bool类型
        if (window.core) {
            window.core.on_toQtBool(true)
        }
    },
    butClick_double(){
        // 发送double类型
        if (window.core) {
            window.core.on_toQtDouble(123.321)
        }
    },
    butClick_str(){
        // 发送信息 字符串格式
        if (window.core) {
            window.core.on_toQtString(this.qtString.id + ',' + this.qtString.key)
        }
    },
    butClick_arr(){
        // 发送array类型
        if (window.core) {
            const arr = [1, 2, "123"];
            window.core.on_toQtJsonArray(arr)
        }
    },
    butClick_obj(){
        // 发送object类型
        const obj = {
            key1 : 123,
            key2 : 321.1,
            key3 : "abc"
        }
        if (window.core) {
            window.core.on_toQtJsonObject(obj)
        }
        
    },
    butClick_Property(){
        // 读取并修改Qt对象中的属性
        const textArea = this.$refs.myTextarea;
        if (window.core && textArea) {
            textArea.value = textEdit.value + "Qt对象属性：" + window.core.value + '\n';              // 读取Qt中使用Q_PROPERTY定义的属性值
            textArea.scrollTop = textArea.scrollHeight;             // 滚动条一直再最下方
            window.core.value++;              
        }
    },
    butClick_enum(){
        // 读取Q_ENUM标记的枚举
        const textArea = this.$refs.myTextarea;
        if (window.core && textArea) {
            textArea.value = textArea.value + "Qt枚举值：" + window.core.CoreEnum.Value1 + '\n';  
            textArea.scrollTop = textArea.scrollHeight;         
        }
    },
    butClick_return(){
        // 发送信息 字符串格式
        if (window.core) {
            window.core.on_returnValue(123, function(returnValue)  // 这里使用回调函数获取返回值
            {
            const textArea = this.$refs.myTextarea;
            if(textArea)
            {
                textArea.value = textArea.value + "Qt函数返回值：" + returnValue + '\n';  
                textArea.scrollTop = textArea.scrollHeight;             // 滚动条一直再最下方
            }
        });

        }
    },
    butClick_str(){
        // 发送信息 字符串格式
        if (window.core) {
            window.core.on_toQtString(this.qtString.id + ',' + this.qtString.key)
        }
    }
}