Qt学习 之 QWebView

之前在做CS架构的时候，显示图表总是做得不好。只有C#有相应的组件，QT需要手画或者加载一些插件。做了BS架构之后，知道了很多在前端方面表现极佳的图表制作工具，如Echarts。在上一次的大作业之中，也使用了这一方法。那么又知道QT里可以加载QtWebKit，因此便可以进行Web与本地应用的混合开发。

新建一个Qt Gui项目，记得选上QtWebKit和QNetwork。

QWebView类

使用QWebView类只要几行代码就可以做出一个最简单的浏览器。QWebView的主要功能是用于浏览网页，每个QWebView都包含着一个QWebPage，而QWebPage是用于存储和编辑网页的类。

下面是一个最简单的浏览器了：main.cpp

#include <QtGui/QApplication>
#include <QWebView>
#include <QMainWindow>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QMainWindow window;
    QWebView view(&window);
    view.setGeometry(0, 0, 600, 400);
    view.setUrl(QUrl("https://github.com/Mr-Phoebe"));
    window.show();
    return a.exec();
}

webpage.pro:

TEMPLATE = app  
TARGET =   
DEPENDPATH += .  
INCLUDEPATH += .  
CONFIG += qt  
QT += webkit  
# Input  
SOURCES += main.cpp  

QWebView有两种方法可以用来设定要显示的内容，一个是setUrl方法，一个是setContent方法。 这个很简单，试一下就会，不多说了。

不过对这两种方法会有两种不同的开发方式：

setContent的话，需要手动将网页代码生成出来放到QWebView中，网页中的元素（如：图片,样式,脚本）就只能采用“file:///”的方式了。

setUrl的话，更用技术含量一点，可能需要自己做一个简单的Http服务器，然后监听本地端口，掉用QWebView的setUrl(QUrl(http://127.0.0.1:XXXX))就可以了。

可以使用一种更省事的方法：直接把要显示的html放到apache上去了。

显示出来并不难，最主要的是如何同界面双向交互，又不是asp，总不能没点按钮就刷一次页面吧。

最容量想到的是传统Web开发的中常用的Ajax，不过就有两个缺点：

一个是要监听本地端口，第二个更致命，Ajax不是双向的，Server向Client发消息就不行了。

下面说一种更好的方法，实现js与C++的双向调用。

js调用c++方法

首先要将一个C++的对象“送”到js中，js拿到这个对象以后就可以像其它对象一样，自由的调用它的方法了。

这一步有两种实现方式：

1. 在网页中插入控件

JS端

在网页中插入下面一段