cefpython_使用 CEFPython 打造自己的浏览器视图-阿里云开发者社区

1. CEFPython是什么东西

CEFPython 是 CEF 的 Python 绑定实现。

简单来说， CEF 实现了浏览器外在的简单功能，可以直接渲染一个全功能的页面。它包含了页面布局渲染的引擎，也包含了执行 JS 的引擎(V8)。但是它不管一个完整浏览器还需要的其它功能，比如标签页，比如下载管理等等。

使用 CEFPython ，就可以很容易地把一个浏览器视图做到 GUI 的环境当中，比如 wxPython。这样最直接的作用，就是可以使用标准的 Web 技术，比如 HTML , JS 来完成桌面客户端的一些功能。

当然，仅仅这样是不够的，因为浏览器环境中，它自己本身是缺少一些系统级的功能的，比如文件系统的访问，比如数据的持久化存储。用 CEFPython ，你可以非常容易地添加这个浏览器视图的 API ，这样通过 JS 实现与 Python 代码的互相调用，你想干什么都可以了。

2. 一个简单的例子

# -*- coding: utf-8 -*-

from cefpython3 import cefpython

import wx

class MainFrame(wx.Frame):

def __init__(self):

wx.Frame.__init__(self, parent=None, id=wx.ID_ANY, title='wx', size=(800,600))

mainPanel = wx.Panel(self)

windowInfo = cefpython.WindowInfo()

windowInfo.SetAsChild(mainPanel.GetGtkWidget())

br = cefpython.CreateBrowserSync(windowInfo,

browserSettings={},

navigateUrl='http://www.zouyesheng.com')

class App(wx.App):

timer = None

def OnInit(self):

self.timer = wx.Timer(self, 1)

self.timer.Start(10)

wx.EVT_TIMER(self, 1, lambda e: cefpython.MessageLoopWork())

frame = MainFrame()

frame.Show()

return True

if __name__ == '__main__':

settings = {

"locales_dir_path": cefpython.GetModuleDirectory() + "/locales",

"browser_subprocess_path": cefpython.GetModuleDirectory() + "/subprocess",

}

cefpython.Initialize(settings)

app = App(False)

app.MainLoop()

执行上面的代码，你会看到一个 wx 创建的窗口中，显示了一个 HTML 页面。

一个最简单的使用 CEFPython 的流程大概要做的事有：

获取组件， windowInfo = cefpython.WindowInfo() 。

嵌入对应的适配环境中， windowInfo.SetAsChild(mainPanel.GetGtkWidget()) 。

初始化浏览器环境， cefpython.CreateBrowserSync(windowInfo, browserSettings, navigateUrl) 。

处理事件刷新， wx.EVT_TIMER(self, 1, lambda e: cefpython.MessageLoopWork()) 。

3. 扩展浏览器视图的API

上面的代码，创建的浏览器环境算是一个标准的环境，对于：

br = cefpython.CreateBrowserSync(windowInfo,

browserSettings={},

navigateUrl='http://www.zouyesheng.com')

得到的这个 br ，我们可以添加额外的，可供 JS 使用的其它 API 。比如：

class MainFrame(wx.Frame):

def __init__(self):

wx.Frame.__init__(self, parent=None, id=wx.ID_ANY, title='wx', size=(800,600))

mainPanel = wx.Panel(self)

windowInfo = cefpython.WindowInfo()

windowInfo.SetAsChild(mainPanel.GetGtkWidget())

br = cefpython.CreateBrowserSync(windowInfo,

browserSettings={},

navigateUrl='file:///home/zys/temp/cef/demo.html')

js = cefpython.JavascriptBindings()

js.SetFunction("py_func", self.py_func)

js.SetProperty("other", {"a": 1})

br.SetJavascriptBindings(js)

def py_func(self):

print 'I am in Python'

其中 demo.html 的内容为：

测试

哈哈哈

$(function(){

py_func();

alert(other.a);

});

上面 js 中的， py_func() 的实现是由 Python 完成的(你能在终端中看到输出的一段字符串)，而 other.a 这个数据，也是在 CEFPython 中人为添加的。这一切都非常简单。

不过，这样直接添加全局的函数或者数据，会让前端变得混乱。 CEFPython 也提供了添加对象的方法, br.SetObject()：

class Ext(object):

def get_info(self, callback):

callback.Call('123');

def action(self, msg):

print msg, type(msg)

class MainFrame(wx.Frame):

def __init__(self):

wx.Frame.__init__(self, parent=None, id=wx.ID_ANY, title='wx', size=(800,600))

mainPanel = wx.Panel(self)

windowInfo = cefpython.WindowInfo()

windowInfo.SetAsChild(mainPanel.GetGtkWidget())

br = cefpython.CreateBrowserSync(windowInfo,

browserSettings={},

navigateUrl='file:///home/zys/temp/cef/demo.html')

js = cefpython.JavascriptBindings()

js.SetObject('Ext', Ext())

br.SetJavascriptBindings(js)

SetObject 可以把 Python 的一个实例添加到 js 中作为一个对象(但是目前它有一个限制，就是只处理实例对象中的方法，不处理属性)。

对应的 demo.html 我们可以这样：

测试

哈哈哈

另一页

$(function(){

Ext.action('我在JS中');

Ext.get_info(function(data){

alert(data);

});

});

虽然 CEFPython 中还有其它的一些功能，文档在https://code.google.com/p/cefpytho