华为笔记本装deepin-linux下：Python+Eel的3个examples的讲解

1 说明：

======

1.1 本人发了2篇Eel的简单介绍的文字，大家很喜爱，可是国内这方面的文章太少了，所以决定对官方的examples进行代码的详细讲解，让大家一秒入门，做到通俗易懂，小白级别一看就会。

1.2 前面自己讲过的就不讲了，可以看看我前面的发过的2篇关于Eel的介绍。

1.3 环境：华为笔记本电脑，深度deepin-linux操作系统，python3.8，谷歌浏览器，微软vscode编辑器。（这个很重大）

华为笔记本装deepin-linux下：Python+Eel的3个examples的讲解

顺带祝大家：520，节日快乐。

2 资料来源：

========

https://github.com/samuelhwilliams/Eel  #下载官方资料，里面有examples

图：

华为笔记本装deepin-linux下：Python+Eel的3个examples的讲解

讲解内容：02 – callbacks；03 – sync_callbacks；04 – file_access

3 example的02 – callbacks的代码讲解：

=============================

3.1 callbacks.py代码：

# For Py2/3 compatibility：兼容python2和python3
from __future__ import print_function	
import eel
import random
#初始化，定义指定文件夹和调用html为当前目录
eel.init('web')
#将python的代码和暴露给js，便于调用
@eel.expose
def py_random():
    return random.random()
#定义打印函数
def print_num(n):
    #终端打印
    print('Got this from Javascript:', n)
# Call Javascript function, and pass explicit callback function  
# 方法一：调用js功能函数  
eel.js_random()(print_num)
# 方法二：采用lambda方法：Do the same with an inline callback
eel.js_random()(lambda n: print('Got this from Javascript:', n))
#启动web为当前目录下的html文件，大小设置
eel.start('callbacks.html', size=(400, 300))

3.2 callbacks.html代码

<!DOCTYPE html>
<html>
    <head>
        <title>Callbacks Demo</title>
        <!--eel的特色：即eel.js文件是不需要的单独出现的，这个格式我喜爱，与传统的html的js导入库文件不同-->
        <script type="text/javascript" src="/eel.js"></script>
        <script type="text/javascript">
        // 将函数暴露给python
        eel.expose(js_random);
        // 定义js_random函数
        function js_random() {
            // 返回js的Math的随机函数
            return Math.random();
        }
        // 定义print_num函数
        function print_num(n) {
            console.log('Got this from Python: ' + n);
        }
        // Call Python function, and pass explicit callback function
        // 调用python的函数：注意函数嵌套
        // 即py_random函数中的print_num
        // 方法一
        eel.py_random()(print_num);
        // Do the same with an inline callback
        // 方法二
        eel.py_random()(n => console.log('Got this from Python: ' + n));
        </script>
    </head>
    <body>
        <!--网页文字输出-->
        Eel下的python和html的js函数互动
    </body>
</html>

3.3 两种方法：速度不一样，第一种快些，如图：

华为笔记本装deepin-linux下：Python+Eel的3个examples的讲解

4 example的03 – sync_callbacks的代码讲解：

=================================

4.1 sync_callbacks.py代码：

#一样的就不注释，注意本文上面的代码注释的连贯性
from __future__ import print_function
import eel, random
eel.init('web')
@eel.expose
def py_random():
    return random.random()
# 注意block不阻止回调
eel.start('sync_callbacks.html', block=False, size=(400, 300))
#------必须在start之后----才能同步回调------
# Synchronous calls must happen after start() is called
# Get result returned synchronously by
# 注意第二个括号内为空的 
# passing nothing in second brackets
#                   v
n = eel.js_random()()
print('Got this from Javascript:', n)
#当程序运行1秒后回调
while True:
    eel.sleep(1.0)

4.2 sync_callbacks.html代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Synchronous callbacks</title>
        <script type="text/javascript" src="/eel.js"></script>
        <script type="text/javascript"> 
        eel.expose(js_random);
        function js_random() {
            return Math.random();
        }
        // 调用python中的函数,注意需要在定义前加上async声明异步
        async function run() {
            // Synchronous call must be inside function marked 'async'
            // 同步回调必须在“异步声明”的功能函数定义内，即run内
            // Get result returned synchronously by 
            // 获得结果返回同步
            //  using 'await' and passing nothing in second brackets
            // 通过使用‘await’，调用python函数，注意第二个括号内是空的
            //        v                   v
            let n = await eel.py_random()();
            console.log('Got this from Python: ' + n);
        }
        //js中启动run函数
        run();
        </script>
    </head>
    <body>
        同步回调函数
    </body>
</html>

5 example的04 – file_access的代码讲解：

===================================

5.1 file_access.py代码

import eel, os, random
eel.init('web')
@eel.expose
def pick_file(folder):
    if os.path.isdir(folder):
        return random.choice(os.listdir(folder))
    else:
        return 'Not valid folder'
eel.start('file_access.html', size=(320, 120))

5.2 file_access.html代码

<!DOCTYPE html>
<html>
    <head>
        <title>Eel Demo</title>
        <script type='text/javascript' src='/eel.js'></script>
        <script type='text/javascript'>
        async function pick_file() {
            //调用html的body的id函数和相关值、函数给js
            let folder = document.getElementById('input-box').value;
            let file_div = document.getElementById('file-name');
            // Call into Python so we can access the file system
            //调回python函数，进入文件系统
            let random_filename = await eel.pick_file(folder)();
            // 将配一条红的获得值给内部的html
            file_div.innerHTML = random_filename;
        }
        </script>
    </head>
    <body>
        <!--input id='input-box' placeholder='Type folder here' value='C:Windows'></!--input-->
        <!--本机是linux操作系统，所以调整以下，指定文件夹，桌面-->
        <input id='input-box' placeholder='Type folder here' value='/home/xgj/Desktop'></input>
        <a href='javascript:void()' onclick='pick_file()'>Pick random file</a>
        <!--初始化：---；改为“当前文件夹为空，请选择”-->
        <div id='file-name'>当前文件夹为空，请选择</div>
    </body>
</html>