本文介紹了在Qt中如何開發Web本地混合應用，以及如何讓js與c++雙向呼叫。附帶幾個簡單例項。

接觸Qt也就兩個星期多吧，所以文章中難免有幼稚和錯誤的地方，請各位不吝賜教。

個人認為標記語言描述的介面是介面開發的一個發展趨勢。WPF、Java FX，當然也少不了Html。

基於Html的介面在開發效率，可移植性上都十分有優勢，所以也被很多程式採用，只是我們平時沒注意到而已。比如：

Chrome的網頁除錯工具本身就是一個網頁，不信你可以右鍵點選，選檢視原始碼。

其它的還有像ServU和VMware Server等，懶的截圖了。

下面進入正題，用QT做Web與本地應用的混合開發

。

因為QT中集成了Webkit，拿來做這種還是一件相當happy的事（什麼？為什麼要用Webkit？你想自己寫一個瀏覽器引擎不成？）

新建一個Qt Gui專案，記得選上QtWebKit和QNetwork（這個後面要用到）。

寫如下一段程式碼，一個瀏覽器就做成了：

01	#include <QtGui/QApplication>

02	#include <QWebView>

03	#include <QMainWindow>

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

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端: 在網頁中插入下面一段程式碼：

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

之後就可以通過document.getElementById(‘qt’);獲取這個物件，並呼叫方法了。

C++端:

首先要自定義一個類繼承自QWebPage，在建構函式中加入如下一句話開起plugin的支援。

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

然後過載QWebPage中的如下方法（protected的）

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

方法的返回值就是要傳遞紿js的物件。

注意：返回值要是一個QWidget *型別的，所以可能還要自己自己寫一個Widget，寫好後，返回的QWidget中的所有public slots在js中都是可見的方法。

例子如下，有點長，不過很簡單：

MyWidget.h

01	#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

01	#include <QtGui/QApplication>

02	#include <QMainWindow>

03	#include <QWebView>

04	#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

}

執行結果如下：

2. 用QWebFrame的addToJavaScriptWindowObject方法

相比上一個方法，個人推薦這種方法。因為上一個在Linux下遇到過很詭異的問題。

例子是最好的說明方式，於是再紿出一下例子：

注意：addToJavaScriptWindowObject的第一個引數是物件在js中的變數名，第二個引數的QObject不要求是QWidget。

MyObject.h

01	#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

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	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

}

至於為什麼要用個連結點一下再顯示而不是直接執行，自己去想，想不清再來問。

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

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

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也就兩個星期多吧，所以文章中難免有幼稚和錯誤的地方，請各位不吝賜教。

最後放幾個自己linux作業（本來也是因為linux作業才接觸的Qt）的截圖吧：

只追求意識流，不追求功能和使用者體驗。後面的陰影是滑動的，圖片就看不出來了。

（登陸視窗）

（聊天視窗1）

（聊天視窗2）

 

（隱藏版的HX主題和鮮花主題）