HTML+CSS+python+qtwebkit打造跨平台桌面应用（二）

目录

• 引言与环境配置
• 数据交互问题（这应该是最先想到，html使用js控制的，如何跟python交互数据呢）
• 文件编码问题，为了国际化、通用化，要用unicode否则汉字不能正常显示
• 界面问题，具体如何制作界面，如何实现无边框等
• 框架问题，有没有更通用性的框架，比如将其包装成MVC模式

数据交互

我们看到因为使用了HTML，而它默认只能支持js等脚本语言，我们如何进行数据的交互呢？
其实pyqt的qtwebkit内置了这些功能，这里主要用到两个函数：

• Qt调用JavaScript：evaluateJavaScript() //直接调用JS函数方法
• JavaScript调用Qt函数：addToJavaScriptWindowObject() //首先向js中添加一个python的对象（地址传递，非值传递，这点很重要也很牛逼），然后就可以直接像调用js对象一样调用python

如下图所示

重要条件：要想在js里调用python的方法，其实是通过qt内部机制完成的，这个方法必须声明为qt的槽函数，普通的函数是不行的!

实现

[code lang="c"]
from PyQt4 import QtCore, QtGui, QtWebKit

getJsValue = """
w = document.getElementsByTagName('h1')[0];
_myWindow.changeTitle(w.innerHTML);
"""

class myWindow(QtWebKit.QWebView):
def __init__(self, parent=None):
super(myWindow, self).__init__(parent)
self.resize(400, 200)
self.page().mainFrame().addToJavaScriptWindowObject("_myWindow", self)
self.loadFinished.connect(self.on_loadFinished)

self.setHtml("""</pre>
<h1>Title has been changed</h1>
<pre> """)

@QtCore.pyqtSlot(str)
def changeTitle(self, message):
self.setWindowTitle(message)

@QtCore.pyqtSlot()
def on_loadFinished(self):
self.page().mainFrame().evaluateJavaScript(getJsValue)

if __name__ == "__main__":
import sys
app = QtGui.QApplication(sys.argv)
main = myWindow()
main.show()
sys.exit(app.exec_())
[/code]

• 这里将self也就是main=myWindow()这个实例，添加到了js中作为js对象，它的名字是_myWindow，注意这里python中的self（或者叫main对象）和js中的_myWindow指的是相同的对象，但是局限就是js只能调用槽函数，函数必须用@QtCore.pyqtSlot()声明，带参数和返回值的可以这样写@QtCore.pyqtSlot(int,result = str)。而且不能访问变量除非它被定义为QObject的属性（其实这一点和前面说的只能访问槽函数是相同的）。
• 当页面加载完毕，这个事件绑定了on_loadFinished方法，这个方法调用js脚本，js脚本又调用python的changeTitle。

至此python与js的相互调用完美实现。

示例的结果：


查看原文：http://blog.wxameng.com/cross-platform-app-with-html-css-python-qt-2/