使用 CEFPython 打造自己的浏览器视图

最新推荐文章于 2024-05-30 13:33:59 发布

weixin_33800593

最新推荐文章于 2024-05-30 13:33:59 发布

阅读量1.4k

点赞数 1

文章标签： python c/c++ javascript ViewUI

原文链接：https://yq.aliyun.com/articles/8937

版权

1. CEFPython是什么东西

CEFPython 是 CEF 的 Python 绑定实现。

CEF https://bitbucket.org/chromiumembedded/cef ，是 Chromium 的一套嵌入式实现。

简单来说， 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 的内容为：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<script src="jquery-2.1.4.js" type="text/javascript"></script>
</head>
<body>
  <h1>哈哈哈</h1>
  <script type="text/javascript">
    $(function(){
      py_func();
      alert(other.a);
    });
  </script>
</body>
</html>

上面 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 我们可以这样：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<script src="jquery-2.1.4.js" type="text/javascript"

最低0.47元/天解锁文章

weixin_33800593

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用 CEFPython 打造自己的浏览器视图

1. CEFPython是什么东西CEFPython是CEF的Python绑定实现。CEFhttps://bitbucket.org/chromiumembedded/cef，是Chromium的一套嵌入式实现。简单来说，CEF实现了浏览器外在的简单功能，可以直接渲染一个全功能的页面。它包含了页面布局渲染的引擎，也包含了执行 ...
复制链接

扫一扫