PySimpleGUIWeb：是一款简单的Python的Web的GUI框架

1 说明：

=====

1.1 PySimpleGUI

1.1.1 是PySimpleGUI的一个组成包，而PySimpleGUI使用起来非常简单。

1.1.2 本人曾介绍过：《Python3的PySimpleGUI库的介绍、安装、学习》，此处省略。

https://www.toutiao.com/i6776256127760859660/

1.2 PySimpleGUIWeb

1.2.1 A port of PySimpleGUI that runs in a web browser. Utilizes Remi as the GUI framework.

1.2.2 在Web浏览器中运行的PySimpleGUI端口， 采用Remi作GUI框架，非常简单。

1.2.3 是我目前发现学习python的web中适合初学者最简单的Web的GUI框架了。

图片：4.jpeg

2 准备：

=====

2.1 环境：

华为笔记本电脑、深度deepin-linux操作系统、python3.8和微软vscode编辑器。

2.2 安装：

pip install PySimpleGUI
pip install --upgrade PySimpleGUI
pip install pysimpleguiweb  #可能自带安装remi
pip install remi  #可能需要安装

2.3 相关地址：

https://pypi.org/project/PySimpleGUIWeb/
https://github.com/PySimpleGUI/PySimpleGUI
https://github.com/PySimpleGUI/PySimpleGUI/tree/master/PySimpleGUIWeb

3 第一个窗口：

==========

3.1 方法一：非常简单。

#方法一：
import PySimpleGUIWeb as sg
#定义主函数
def main():
    #布局非常简单
    layout = [
        [sg.Text('Hello World')],  #文本显示
        [sg.Input()],              #空白输入框
        #[sg.Combo(['Combo 1']),sg.Combo(['Combo 2']),sg.Combo(['Combo 3']),], #1行显示水平3个
        [sg.Combo(['Combo 1'])],
        [sg.Text('你好 世界！')],   #支持中文
        [sg.InputText('男')], #默认初始内容的输入框
        #[sg.Ok(), sg.Cancel()],  #按钮默认大小
        #size的宽5（个字符串），1（个字符串）
        [sg.Ok(size=(5,1)), sg.Cancel(size=(5,1))],
    ]
    #定义窗口，窗口名称
    window = sg.Window('第一个窗口', layout,)  #支持中文

    while True:  # Event Loop
        event, values = window.read(timeout=0)
        #if event in (None, 'Exit'):
        if event == None and 'Exit':  #与上面相同
            break
    #window.close()  #可要可不要

main()

3.2 方法二：这么简单也能启动

#方法二：
import PySimpleGUIWeb as sg
#布局非常简单
layout = [
    [sg.Text('Hello World')],  #文本显示
    [sg.Input()],              #空白输入框
    [sg.Combo(['Combo 1'])],
    [sg.Text('你好 世界！')],   #支持中文
    [sg.InputText('男')], #默认初始内容的输入框
    [sg.Ok(size=(5,1)), sg.Cancel(size=(5,1))],
]
#定义窗口，窗口名称
window = sg.Window('第一个窗口', layout)

while True:
    event, values = window.read(timeout=0)
    if event == None and 'Exit':
        break

3.3 方法三：

import PySimpleGUIWeb as sg
#定义主函数
def main():
    #布局
    layout = [
        [sg.Text('Hello World')],  #文本显示
        [sg.Input()],              #空白输入框
        [sg.Combo(['Combo 1'])],
        [sg.Text('你好 世界！')],   #支持中文
        [sg.InputText('男')], #默认初始内容的输入框
        [sg.Ok(size=(5,1)), sg.Cancel(size=(5,1))],
    ]
    #定义窗口，窗口名称
    window = sg.Window('第一个窗口', layout,)

    i = 0
    while True:
        event, values = window.read(timeout=1)
        if event != sg.TIMEOUT_KEY:
            #print(event, values)
            pass
        if event is None:
            break
        i += 1
    window.close()

if __name__ == "__main__":
    main()
#main()

4 网页弹窗：

========

4.1 代码：

# 除了第一个导出模块字里有web三个字母
# 代码其他部分没感觉在写网页代码，而是简单的python代码，超简单
import PySimpleGUIWeb as sg
#省略pack、grid和place布局，超级简单
layout = [
    #注意key的表示方法
    [sg.Text('Your typed chars Appear here:'), sg.Text('', key='_OUTPUT_')],
    [sg.Input('', key='_IN_')],
    [sg.Button('Show'), sg.Button('Exit'), sg.Button('Blank')]
]

window = sg.Window('网页窗口弹窗', layout)

while True:  # Event Loop
    #读取窗口内容
    event, values = window.read()
    #退出定义
    if event in (None, 'Exit'):
        break
        window.close()
    #定义按钮show的功能
    if event == 'Show':
        #网页版弹出框，显示数值values
        sg.popup('一个网页窗口弹窗!', ' You typed ', values['_IN_'])

window.close()

4.2 效果图：

5 网页显示图片：代码

#在web中显示指定路径下的图片
import PySimpleGUIWeb as sg
layout = [
    #指定大小，提示，右键显示功能，r在python3中可以省略
    #[sg.Image(filename='/home/xgj/Desktop/PySimpleGUIWeb/4.jpeg',size=(400,400),tooltip='阳光灿烂',right_click_menu=True)],
    [sg.Image(filename=r'/home/xgj/Desktop/PySimpleGUIWeb/4.jpeg')],
]
#定义窗口，窗口名称和布局
window = sg.Window('图片显示窗口', layout)  #支持中文
# Event Loop
while True:  
    event, values = window.read(timeout=0)
    if event == None and 'Exit':  #与上面相同
        break
window.close()

自己整理并分享出来，喜欢的就点赞、转发和收藏。