现在的位置: 首页 > 自动控制 > 工业·编程 > 正文

在Qt中开发Web本地混合应用

2014-10-17 10:10 工业·编程 ⁄ 共 5817字 ⁄ 字号 暂无评论

本文介绍了在Qt中如何开发Web本地混合应用,以及如何让js与c++双向调用。附带几个简单实例。

接触Qt也就两个星期多吧,所以文章中难免有幼稚和错误的地方,请各位不吝赐教。个人认为标记语言描述的界面是界面开发的一个发展趋势。WPF、Java FX,当然也少不了Html。

基于Html的界面在开发效率,可移植性上都十分有优势,所以也被很多程序采用,只是我们平时没注意到而已。比如:

image

image

Chrome的网页调试工具本身就是一个网页,不信你可以右键点击,选查看源代码。

其它的还有像ServU和VMware Server等,懒的截图了。

下面进入正题,用QT做Web与本地应用的混合开发。

因为QT中集成了Webkit,拿来做这种还是一件相当happy的事(什么?为什么要用Webkit?你想自己写一个浏览器引擎不成?)

image

新建一个Qt Gui项目,记得选上QtWebKit和QNetwork(这个后面要用到)。

写如下一段代码,一个浏览器就做成了:
#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("http://pnuts.cc"));
window.show();
return a.exec();

}

如图:

image

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

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

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

setUrl的话,更用技术含量一点,可能需要自己做一个简单的Http服务器,(不考虑效率优化的话也没那么难),然后监听本地端口,掉用QWebView的setUrl(QUrl(http://127.0.0.1:XXXX))就可以了。

我用了一种更省事的方法:直接把要显示的html放到apache上去了。这样连php也可以用了,哈哈哈哈~(咦,砖头?)

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

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

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

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

js调用c++方法

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

这一步有两种实现方式:

1. 在网页中插入控件

JS端: 在网页中插入下面一段代码:
<object type="application/x-qt-plugin" id="qt"></object>

之后就可以通过document.getElementById(‘qt’);获取这个对象,并调用方法了。

C++端:

首先要自定义一个类继承自QWebPage,在构造函数中加入如下一句话开起plugin的支持。

settings()->setAttribute(QWebSettings::PluginsEnabled, true);

然后重载QWebPage中的如下方法(protected的)

virtual QObject *createPlugin(const QString &classid, const QUrl &url, const QStringList &paramNames, const QStringList &paramValues);

方法的返回值就是要传递绐js的对象。

注意:返回值要是一个QWidget *类型的,所以可能还要自己自己写一个Widget,写好后,返回的QWidget中的所有public slots在js中都是可见的方法。

例子如下,有点长,不过很简单:

MyWidget.h 
#ifndef MYWIDGET_H

02

#define MYWIDGET_H

03

04

#include<QWidget>

05

#include<QWebPage>

06

#include<QWebFrame>

07

08

class MyWidget :public QWidget {

09

Q_OBJECT

10

private:

11

QWebPage *page;

12

public:

13

MyWidget(QWebPage *page) : page(page) { }

14

public slots:

15

void func(QString arg) {

16

this->page->mainFrame()->evaluateJavaScript("document.body.innerHTML += '" + arg + "';");

17

}

18

};

19

20

#endif // MYWIDGET_H

MyPage.h

01

#ifndef MYPAGE_H

02

#define MYPAGE_H

03

04

#include<QWebPage>

05

#include<QWebFrame>

06

#include"MyWidget.h"

07

08

class MyPage : public QWebPage {

09

Q_OBJECT

10

public:

11

MyPage(QObject *parent = 0) : QWebPage(parent) {

12

settings()->setAttribute(QWebSettings::PluginsEnabled, true);

13

}

14

protected:

15

QObject *createPlugin(const QString &classid, const QUrl &url, const QStringList &paramNames, const QStringList &paramValues){

16

return new MyWidget(this);

17

}

18

};

19

20

#endif // MYPAGE_H

main.cpp

#include <QtGui/QApplication>

#include <QMainWindow>

#include <QWebView>

#include <QWebPage>

05

#include <QWebFrame>

06

#include "MyPage.h"

07

08

int main(int argc, char *argv[])

09

{

10

QApplication a(argc, argv);

11

QMainWindow window;

12

QWebView view(&window);

13

MyPage page;

14

view.setPage(&page);

15

view.setGeometry(0, 0, 600, 400);

16

// Object

17

QString content("<object type='application/x-qt-plugin' height='1' width='1' id='qt'></object>");

18

// JS Function f() : Invoke the 'func' function

19

content += "<script>document.getElementById('qt').func('http://pnuts.cc');</script>";

20

view.setContent(content.toAscii());

21

window.show();

22

return a.exec();

23

}

运行结果如下:

image

2. 用QWebFrame的addToJavaScriptWindowObject方法

相比上一个方法,个人推荐这种方法。因为上一个在Linux下遇到过很诡异的问题。

例子是最好的说明方式,于是再绐出一下例子:

注意:addToJavaScriptWindowObject的第一个参数是对象在js中的变量名,第二个参数的QObject不要求是QWidget。

MyObject.h

#ifndef MYOBJECT_H

02

#define MYOBJECT_H

03

04

#include<QObject>

05

#include<QWebPage>

06

#include<QWebFrame>

07

08

// !! ATTENTION !! : The object do NOT need to inherit from QWidget anymore.

09

class MyObject :public QObject {

10

Q_OBJECT

11

private:

12

QWebPage *page;

13

public:

14

MyObject(QWebPage *page) : page(page) { }

15

public slots:

16

void func(QString arg) {

17

this->page->mainFrame()->evaluateJavaScript("document.body.innerHTML += '" + arg + "';");

18

}

19

};

20

21

#endif // MYOBJECT_H

main.cpp

#include <QtGui/QApplication>

#include <QMainWindow>

03

#include <QWebView>

04

#include <QWebPage>

05

#include <QWebFrame>

06

#include "MyObject.h"

07

08

int main(int argc, char *argv[])

09

{

10

QApplication a(argc, argv);

11

QMainWindow window;

12

QWebView view(&window);

13

QWebPage page;

14

view.setPage(&page);

15

view.setGeometry(0, 0, 600, 400);

16

MyObject obj(&page);

17

page.mainFrame()->addToJavaScriptWindowObject("qt", &obj);

18

QString content("<script>function f() { qt.func('http://pnuts.cc'); }</script>");

19

content += "<a href="#" clicktoshowdialog="dialogJsLink">Click Me</a>";

20

view.setContent(content.toAscii());

21

window.show();

22

23

return a.exec();

24

}

至于为什么要用个链接点一下再显示而不是直接执行,自己去想,想不清再来问。

image

C++调用js代码

依旧是两种方法。

1. evaluateJavaScript

这个超简单了,上面的例子中就用到了。不多说了。

2. connect

这个更符合Qt的风格一点。首先用上一部分介绍的两种方法中的任意一种将一个C++对象“送”到js中去。然后调用这个对象的connect方法,将自己的signals和js方法进行bind。

再放个例子吧,不过例子中竟然用evaluateJavaScript来bind。。呵呵。。。

当QWebView加载好后,绑定MyObject的Miku Signal到js本地方法f,再触发Miku Signal。

MyObject.h

view sourceprint?

01

#ifndef MYOBJECT_H

02

#define MYOBJECT_H

03

04

#include<QObject>

05

#include<QWebPage>

06

#include<QWebFrame>

07

08

class MyObject :public QObject {

09

Q_OBJECT

10

private:

11

QWebPage *page;

12

public:

13

MyObject(QWebPage *page) : page(page) { }

14

signals:

15

void Miku();

16

public slots:

17

void viewLoad() {

18

this->page->mainFrame()->evaluateJavaScript("qt.Miku.connect(f);");

19

this->Miku();

20

}

21

};

22

23

#endif // MYOBJECT_H

main.cpp

view sourceprint?

01

#include <QtGui/QApplication>

02

#include <QMainWindow>

03

#include <QWebView>

04

#include <QWebPage>

05

#include <QWebFrame>

06

#include "MyObject.h"

07

08

int main(int argc, char *argv[])

09

{

10

QApplication a(argc, argv);

11

QMainWindow window;

12

QWebView view(&window);

13

QWebPage page;

14

view.setPage(&page);

15

view.setGeometry(0, 0, 600, 400);

16

MyObject obj(&page);

17

QObject::connect(&view, SIGNAL(loadFinished(bool)), &obj, SLOT(viewLoad()));

18

page.mainFrame()->addToJavaScriptWindowObject("qt", &obj);

19

QString content("<script>function f() { document.body.innerHTML += 'http://pnuts.cc'; }</script>");

20

view.setContent(content.toAscii());

21

window.show();

22

return a.exec();

23

}

接触Qt也就两个星期多吧,所以文章中难免有幼稚和错误的地方,请各位不吝赐教。

给我留言

留言无头像?