0.导言
很多时候,我们有这样的需求:想利用现在先进的HTML5和JS技术,又不想走B/S架构,想弄出个像客户端一样的浏览器外壳。本文要解决的就是这个问题,我们利用 python 环境下所提供的各种工具,编译生成一个高度可用的制作浏览器。
1.准备工作
这里说一下自制浏览器所需要的环境与软件。
- windows操作系统:因为我最后要生成一个exe文件,所以操作系统环境直接利用了windows。
- python2.7 :我利用的是python2.7的环境,这是我觉得目前用的最顺手的一个环境,注:虽然我的系统是64位的,但这里安装的python环境是32位的,因为考虑到做出来的浏览器的兼容性,还是用32位的环境。
- PyQt4 :Qt 是一款GUI应用程序的开发框架,因为我们既然要做浏览器,图形界面是免不了的,PyQt4是Qt在python环境下的一个实现,而且这个包中还包含了webkit浏览器内核,非常好用。官方网站:http://www.riverbankcomputing.co.uk/news
- PyInstaller : 这是一个可以把python程序转换成exe可执行程序的 python 包,也很好用。官方网址:http://www.pyinstaller.org/
- pywin32 : 这是 PyInstaller 需要依赖的一个包。下载地址:http://sourceforge.net/projects/pywin32/
- UPX : 这是一款先进的可执行程序文件压缩器,若不安装它,运行 pyinstaller.py 会报错。下载地址:http://sourceforge.net/projects/upx/ ;下载完之后放在 PyInstaller中与pyinstaller.py的相同目录下。
- VerySimpleWebBrowser.py:这是一个老外用 python 写的简单的浏览器的源码,我数了一下,总共的实际代码只有43行,如果你电脑已经安装了python 和 pyqt4 , 你已经可以用python环境运行它: pyhon VerySimpleWebBrowser 。http://www.binpress.com/app/verysimplewebbrowser/279
好了,需要的东西就这么多,其实都是组装别人的东西,我没有自己写一行代码。
3.制作过程
- 安装 python 环境
这步就不说了~ - 安装 PyQt
这步也是一顿下一步~没什么说的 - 安装 pywin32
也是一顿下一步~ - 安装 pyinstaller
这个东西下载的是源码,我先 python setup.py install 了一下,其实我也不太清楚这步有没有必要,因为最后还是要到它的文件夹下利用 pyinstaller.py这个文件。 - 安装 UPX
这步其实就是像我上面说的,把下载后的文件 copy 到 PyInstaller的文件目录下,(放在和 pyinstaller.py 同 一个目录) - 打包 VerySimpleWebBrowser.py
将 VerySimpleWebBrowser.py 也 copy 到 pyinstaller.py 的同目录下。在命令行下切换到此目录,运行 :
python pyinstaller.py -F -w VerySimpleWebBrowser.py
如果没有问题的话,现在已经生成了 VerySimpleWebBrowser.exe,这里有两个选项, -F 表示将所有文件都打包到 exe 中, -w 表示用窗口显示。
最终的结果如下:
稍微包装一下之后就可以作为展现js的本地客户端使用(图可以动哦~):
3.总结
整个过程其实就是个拼装过程,只要细心些就可以了~ 大家感受一下 python 的强大与便捷吧!
4.附录
最后我把 VerySimpleWebBrowser.py 的源代码贴出来吧~让大家看看它是有多么简单!
"""
********************* VerySimpleWebBrowser ************************
This is a Very Simple Web Browser implemented over Qt and QtWebKit.
More info on: ht
author: Juan Manuel Gar
*******************************************************************
"""
import sys
from PyQt4 import QtCore, QtGui, QtWebKit
class Browser(QtGui.QMainWindow):
def __init__(self):
"""
Initialize the browser GUI and connect the events
"""
QtGui.QMainWindow.__init__(self)
self.resize(800,600)
self.centralwidget = QtGui.QWidget(self)
self.mainLayout = QtGui.QHBoxLayout(self.centralwidget)
self.mainLayout.setSpacing(0)
self.mainLayout.setMargin(1)
self.frame = QtGui.QFrame(self.centralwidget)
self.gridLayout = QtGui.QVBoxLayout(self.frame)
self.gridLayout.setMargin(0)
self.gridLayout.setSpacing(0)
self.horizontalLayout = QtGui.QHBoxLayout()
self.tb_url = QtGui.QLineEdit(self.frame)
self.bt_back = QtGui.QPushButton(self.frame)
self.bt_ahead = QtGui.QPushButton(self.frame)
self.bt_back.setIcon(QtGui.QIcon().fromTheme("go-previous"))
self.bt_ahead.setIcon(QtGui.QIcon().fromTheme("go-next"))
self.horizontalLayout.addWidget(self.bt_back)
self.horizontalLayout.addWidget(self.bt_ahead)
self.horizontalLayout.addWidget(self.tb_url)
self.gridLayout.addLayout(self.horizontalLayout)
self.html = QtWebKit.QWebView()
self.gridLayout.addWidget(self.html)
self.mainLayout.addWidget(self.frame)
self.setCentralWidget(self.centralwidget)
self.connect(self.tb_url, QtCore.SIGNAL("returnPressed()"), self.browse)
self.connect(self.bt_back, QtCore.SIGNAL("clicked()"), self.html.back)
self.connect(self.bt_ahead, QtCore.SIGNAL("clicked()"), self.html.forward)
self.connect(self.html, QtCore.SIGNAL("urlChanged(const QUrl)"), self.url_changed)
self.default_url = "http://codescience.wordpress.com/"
self.tb_url.setText(self.default_url)
self.browse()
def browse(self):
"""
Make a web browse on a specific url and show the page on the
Webview widget.
"""
url = self.tb_url.text() if self.tb_url.text() else self.default_url
self.html.load(QtCore.QUrl(url))
self.html.show()
def url_changed(self, url):
"""
Triggered when the url is changed
"""
self.tb_url.setText(url.toString())
if __name__ == "__main__":
app = QtGui.QApplication(sys.argv)
main = Browser()
main.show()
sys.exit(app.exec_())
"""
********************* VerySimpleWebBrowser ************************
This is a Very Simple Web Browser implemented over Qt and QtWebKit.
More info on: https://codescience.wordpress.com/
author: Juan Manuel Garcia
*******************************************************************
"""
import sys
from PyQt4 import QtCore, QtGui, QtWebKit
class Browser(QtGui.QMainWindow):
def __init__(self):
"""
Initialize the browser GUI and connect the events
"""
QtGui.QMainWindow.__init__(self)
self.resize(800,600)
self.centralwidget = QtGui.QWidget(self)
self.mainLayout = QtGui.QHBoxLayout(self.centralwidget)
self.mainLayout.setSpacing(0)
self.mainLayout.setMargin(1)
self.frame = QtGui.QFrame(self.centralwidget)
self.gridLayout = QtGui.QVBoxLayout(self.frame)
self.gridLayout.setMargin(0)
self.gridLayout.setSpacing(0)
self.horizontalLayout = QtGui.QHBoxLayout()
self.tb_url = QtGui.QLineEdit(self.frame)
self.bt_back = QtGui.QPushButton(self.frame)
self.bt_ahead = QtGui.QPushButton(self.frame)
self.bt_back.setIcon(QtGui.QIcon().fromTheme("go-previous"))
self.bt_ahead.setIcon(QtGui.QIcon().fromTheme("go-next"))
self.horizontalLayout.addWidget(self.bt_back)
self.horizontalLayout.addWidget(self.bt_ahead)
self.horizontalLayout.addWidget(self.tb_url)
self.gridLayout.addLayout(self.horizontalLayout)
self.html = QtWebKit.QWebView()
self.gridLayout.addWidget(self.html)
self.mainLayout.addWidget(self.frame)
self.setCentralWidget(self.centralwidget)
self.connect(self.tb_url, QtCore.SIGNAL("returnPressed()"), self.browse)
self.connect(self.bt_back, QtCore.SIGNAL("clicked()"), self.html.back)
self.connect(self.bt_ahead, QtCore.SIGNAL("clicked()"), self.html.forward)
self.connect(self.html, QtCore.SIGNAL("urlChanged(const QUrl)"), self.url_changed)
self.default_url = "http://codescience.wordpress.com/"
self.tb_url.setText(self.default_url)
self.browse()
def browse(self):
"""
Make a web browse on a specific url and show the page on the
Webview widget.
"""
url = self.tb_url.text() if self.tb_url.text() else self.default_url
self.html.load(QtCore.QUrl(url))
self.html.show()
def url_changed(self, url):
"""
Triggered when the url is changed
"""
self.tb_url.setText(url.toString())
if __name__ == "__main__":
app = QtGui.QApplication(sys.argv)
main = Browser()
main.show()
sys.exit(app.exec_())