界面与js(百度地图 API)交互--Qt 网络

    在做项目的时候，需要用到QWebView将百度地图进行显示，并且与界面进行交互。查资料，用到一个关键类QWebChannel。在学会后，发现这个类无比的神奇，Qt总是给人带来惊喜：简单的操作，就可实现交互。

    QWebChannel类，在我看来就是通道，界面和 js 在知道 “通道路口”后，就可以交流，js 就可以通过这个通道调用Qt 界面的方法。

一、Qt 界面创建类QWebChannel实例

    QWebChannel *channel = new QWebChannel(this);
    channel->registerObject(QStringLiteral("content"), &m_content);
    view->page()->setWebChannel(channel);

其中 m_content 是我自己创建的类 Document，用于 与js沟通的类。 槽   void receiveText(const QString &r_text);用于js 发送的信息。

#ifndef DOCUMENT_H
#define DOCUMENT_H

#include <QObject>
#include <QString>
#include "ui_mainwindow.h"
namespace Ui {
class MainWindow;
}

class Document: public QObject
{
    Q_OBJECT
public:
    explicit Document(QObject *parent = nullptr) : QObject(parent) {}

    void setUi(Ui::MainWindow *ui);

public slots:
    void receiveText(const QString &r_text);


private:
    QString recieve_text;
    Ui::MainWindow *mainUi;
};

#endif // DOCUMENT_H

二、js 的操作

js 要想调用QWebChannel 还需要一个文件 qwebchannel.js 。在 头里要引用源（这个说法不知道对不对，没怎么接触过js/html）。

<script src="./qwebchannel.js"></script>

下面就是调用类QWebChannel ，可以看到这行代码    varcontent=channel.objects.content;与Qt里面的

egisterObject(QStringLiteral("content"), &m_content)

是对应的。下面一个按键来作为调用Qt 方法 receiveText（ const QString &r_text ）的条件。当然这个条件是自己设定的，想什么时候调用，就什么时候调用。

new QWebChannel(qt.webChannelTransport,function(channel)
{
 //获取Qt交互对象
  var content = channel.objects.content; 
                document.getElementById("send").onclick = function() {
                    var input = document.getElementById("input");
                    var text = input.value;
                    if (!text) {
                        return;
                    }
                    input.value = "";
                    content.receiveText(text);
});

三、总结

没什么好说的了，对了，Qt 我用的是5.6.0版本的。