QT Web与本地应用的混合开发

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

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

---

个人认为标记语言描述的界面是界面开发的一个发展趋势。WPF、Java FX，当然也少不了Html。

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

 

 

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

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

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

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

新建一个Qt Gui项目，记得选上QtWebKit和QNetwork（这个后面要用到）。

写如下一段代码，一个浏览器就做成了：

view source print ?

01

#include

02

#include

03

#include

04

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

06

{

07	QApplication a(argc, argv);

08	QMainWindow window;

09	QWebView view(&window);

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

11	view.setUrl(QUrl("http://pnuts.cc"));

12	window.show();

13	return a.exec();

14

}

如图:

 

 

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端: 在网页中插入下面一段代码：

view source print ?

1	<object type="application/x-qt-plugin" id="qt">object>

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

C++端:

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

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

然后重载QWebPage中的如下方法（protected的）

view source print ?

1	virtual QObject *createPlugin(const QString &classid, const QUrl &url, const QStringList ¶mNames, const QStringList ¶mValues);

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

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

例子如下，有点长，不过很简单：

MyWidget.h

view source print ?

01	#ifndef MYWIDGET_H

02	#define MYWIDGET_H

03

04

#include

05

#include

06

#include

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

view source print ?

01	#ifndef MYPAGE_H

02	#define MYPAGE_H

03

04

#include

05

#include

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 ¶mNames, const QStringList ¶mValues){

16	return new MyWidget(this);

17

}

18

};

19

20	#endif // MYPAGE_H

main.cpp

view source print ?

01

#include

02

#include

03

#include

04

#include

05

#include

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("");

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

19	content += "";

20	view.setContent(content.toAscii());

21	window.show();

22	return a.exec();

23

}

运行结果如下：

2. 用QWebFrame的addToJavaScriptWindowObject方法

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

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

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

MyObject.h

view source print ?

01	#ifndef MYOBJECT_H

02	#define MYOBJECT_H

03

04

#include

05

#include

06

#include

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

view source print ?

01

#include

02

#include

03

#include

04

#include

05

#include

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("");

19	content += "Click Me";

20	view.setContent(content.toAscii());

21	window.show();

22

23	return a.exec();

24

}

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

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 source print ?

01	#ifndef MYOBJECT_H

02	#define MYOBJECT_H

03

04

#include

05

#include

06

#include

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 source print ?

01

#include

02

#include

03

#include

04

#include

05

#include

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("");

20	view.setContent(content.toAscii());

21	window.show();

22	return a.exec();

23

}

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

最后放几个自己linux作业（本来也是因为linux作业才接触的Qt）的截图吧：

只追求意识流，不追求功能和用户体验。后面的阴影是滑动的，图片就看不出来了。

（登陆窗口）

（聊天窗口1）

（聊天窗口2）

 

（隐藏版的HX主题和鲜花主题）

Read more at pnuts.cc