在qt5.15 qml中如何使用qml Webview处理本机函数暴露和JavaScript到本机通信（调用本机函数）

Question

所以我将 qt5.15.3 与 qml 结合使用，并尝试处理本机函数暴露和 JavaScript 到本机通信

首先我需要澄清我的问题 例如，像在 Java 中一样，我们有：

// In your WebView setup code
WebView webView = findViewById(R.id.webView);
NativeInterface nativeInterface = new NativeInterface();
webView.addJavascriptInterface(nativeInterface, "NativeInterface");

NativeInterface类：

public class NativeInterface {
    @JavascriptInterface
    public void CANBUS_Write(String id,String[] data) {
        // Call the native CANBUS_Write function here with the provided data
    }
}

在网页端我们得到类似的东西：

function CANBUS_Write(id, data) {
    window.NativeInterface.CANBUS_Write(id, data);
}

处理本机函数公开和 JavaScript 到本机通信

如何使用WebView处理qt5 qml中的相同问题？

导入QtWebView 1.1

 WebView {
 id:webView
 anchors.fill: parent
 url: "http://192.168.120.56:8888/test"


}

我尝试过的事情

ServerSideHandler.h

#ifndef SERVERSIDEHANDLER_H
#define SERVERSIDEHANDLER_H



#include <QObject>
#include <QStringList>

class ServerSideHandler : public QObject
{
    Q_OBJECT
public:
    explicit ServerSideHandler(QObject *parent = nullptr);

public slots:
    void CANBUS_Write(const QString &ID, const QStringList &data);
};

#endif // SERVERSIDEHANDLER_H

服务器端处理程序.cpp

#include "serversidehandler.h"
#include <QDebug>

ServerSideHandler::ServerSideHandler(QObject *parent) : QObject(parent)
{
        qDebug() <<"Init";
}

void ServerSideHandler::CANBUS_Write(const QString &ID, const QStringList &data)
{
    QStringList sBuffer;
    for (const QString &item : data) {
        sBuffer.append(item);
    }
    qDebug() << "CANBUS_Write ID" << ID << ", data =" << sBuffer.join(' ');
}

主.cpp

qmlRegisterType<ServerSideHandler>("ServerSideHandler", 1, 0, "ServerSideHandler");

main.qml

 ServerSideHandler{
        id :server

    }

    WebView {
        id:webView
        anchors.fill: parent
       
        url: "http://192.168.120.56:8888/test"
        
        Component.onCompleted: {
 
            channel.registerObject("NativeInterface",server);
        }
   
        WebChannel{
            id: channel

        }
   
    }

Answer 1

好的，我想我解决了问题 其实没那么复杂，直接注入到网页即可

   webView.runJavaScript(`
                          // Define a global object to expose functions
                          var NativeInterface= {
                          CANBUS_Write: function(ID, data) {  
                          return { id: ID, dataArray: data };
                          }
                          };
                          `);

并在读取结果时编写回调来显示结果

  webView.runJavaScript(`
       NativeInterface.CANBUS_Write('123', ['data1', 'data2', 'data3'])
                                  `, function(result) {
    console.log("JavaScript NativeInterfaceresult:", JSON.stringify(result));
});