Skip to content

绑定函数

Jump to bottom
San Lau edited this page Jan 19, 2021 · 1 revision

mmgui是一个python的UI库，它的UI界面是使用html/css/js等Web技术来实现，而业务逻辑则依然使用python来实现。

因此mmgui主要负责的是在一个python程序中内置一个Chromiumem的WebView来绘制UI，并实现python和javascript之间的跨进程通信逻辑。

例如我们用js写一个button按钮，点击以后，调用一个python函数来处理业务逻辑(例如打开一个文件)，并将处理的结果返回给js来做UI的回显。

首先我们在 index.html 文件中绘制我们的UI程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mmgui demo</title>
</head>
<body>
    <div id="container">
        <div id="content">
            <button onclick="openFile()">Open File</button>
        </div>
    </div>

    <script>
        function openFile() {
            console.log("onOpenFileButtonClick");
            RPC.invoke("open_file", { }).then(filename => {
                alert(filename);
            });
        }
    </script>
</body>
</html>

接下来，我们在 app.py 脚本中实现js调用的这个 open_file 函数：

def open_file():
    files = win.show_file_dialog_for_file("打开文件", "Text File(*.txt)")
    if files and len(files) > 0:
        return files[0]
    return None

最后我们将这个python函数绑定到WebView，提供给javascript来调用即可:

def on_create(ctx):
    # ...
    win.webview.bind_function("open_file", open_file)

点击按钮后，我们则可以选择一个文件，选择完成后，页面会提示我们选择的文件绝对路径。

本例中完整的源码在 examples/bind_function 。

Clone this wiki locally