界面与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_OBJECTpublic:    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版本的。