初识 Remi,用 Python 轻松构建 Web UI

引言

在 Python 开发中,构建 Web 界面一般需要掌握 HTML、CSS 和 JavaScript 等前端技术。不过,Remi 框架的可以让这一切变得简单!Remi 是一个基于 Python 的 Web UI 框架,允许开发者完全用 Python 代码构建 Web 应用,无需编写复杂的前端代码。

本文将带你从零开始,快速上手 Remi,并实现一个简单的 Web 应用。


什么是 Remi?

Remi 是一个轻量级的 Python Web 框架,专注于用 Python 代码构建 Web 界面。它的核心特点包括:

  • 纯 Python 开发:无需编写 HTML、CSS 或 JavaScript。
  • 跨平台:支持 Windows、Linux 和 macOS。
  • 易于扩展:可以与其他 Python 库(如 Flask、Matplotlib)无缝集成。
  • 实时更新:支持动态更新 UI 内容。

Remi 超级适合快速开发原型、工具类应用或需要 Web 界面的 Python 项目。


安装 Remi

在开始之前,我们需要先安装 Remi 框架。打开终端或命令行工具,运行以下命令:

pip install remi

安装完成后,可以通过以下命令检查是否安装成功:

pip show remi

如果显示 Remi 的版本信息,说明安装成功。

初识 Remi,用 Python 轻松构建 Web UI


第一个 Remi 应用:Hello World

接下来,我们将编写一个简单的 Remi 应用,在浏览器中显示 “Hello, World!”。

项目源代码托关于:GitCode – 全球开发者的开源社区,开源代码托管平台

创建项目

使用uv创建项目、安装依赖、启动虚拟环境,在终端窗口执行以下代码:

# 创建项目,指定使用Python 3.11
uv init RemiEg -p 3.11

修改项目配置,指定使用清华镜像源,在RemiEg目录下的pyproject.toml文件中添加如下代码:

[[index]]
url = "https://pypi.tuna.tsinghua.edu.cn/simple"
default = true

改后的pyproject.toml文件内容大致如下:

初识 Remi,用 Python 轻松构建 Web UI

添加项目依赖库

# 进入 RemiEg 目录
cd  RemiEg

# 添加依赖库
uv add remi setuptools

# 同步项目
uv sync

# 激活虚拟环境
..venvScriptsactivate

代码实现

在项目目录下创建day01目录,在day01目录下创建hello.py,项目目录结构大致如下:

├───.venv
│   ├───Lib
│   ├───.gitignore   
│   ├───CACHEDIR.TAG
│   ├───pyvenv.cfg
│   └───Scripts
├───.python-version
├───pyproject.toml
├───README.md
├───uv.lock
└───day01
    └───hello.py

hello.py内容如下:

from remi import start, App, gui

class MyApp(App):
    def __init__(self, *args):
        super(MyApp, self).__init__(*args)

    def main(self):
        # 创建一个容器
        container = gui.VBox(width=300, height=200, style={'margin': 'auto'})

        # 创建一个标签,显示 "Hello, World!"
        label = gui.Label("Hello, World!", style={'font-size': '20px', 'text-align': 'center'})

        # 将标签添加到容器中
        container.append(label)

        # 返回容器作为应用的根元素
        return container

# 启动应用
if __name__ == "__main__":
    start(MyApp, address='0.0.0.0', port=8080)

代码解析

  1. 导入模块
  2. remi.start:用于启动 Remi 应用。
  3. remi.App:Remi 应用的基础类,所有应用都需要继承它。
  4. remi.gui:提供各种 UI 组件(如标签、按钮等)。
  5. 创建应用类
  6. MyApp 继承自 App,并重写 main 方法。main 方法是应用的入口,用于定义 UI 布局。
  7. 构建 UI
  8. 使用 gui.VBox 创建一个垂直布局容器。
  9. 使用 gui.Label 创建一个标签,显示 “Hello, World!”。
  10. 将标签添加到容器中,并返回容器作为应用的根元素。
  11. 启动应用
  12. 使用 start 函数启动应用,指定 IP 地址和端口号(默认为 0.0.0.0:8080)。

运行效果

然后在终端中运行:

python hello.py

运行后,一般会自动打开浏览器,显示运行页面,如果没有自动打开,可以进行如下操作:

打开浏览器,访问 http://127.0.0.1:8080,你将看到一个居中显示的 “Hello, World!”。如下图所示:

初识 Remi,用 Python 轻松构建 Web UI

美中不足,界面实在有点丑,希望随着学习能优化并美化界面吧。


Remi 的核心概念

  1. UI 组件
  2. Remi 提供了丰富的 UI 组件(如按钮、文本框、标签等),可以直接在 Python 代码中使用。
  3. 每个组件都有属性和样式,可以通过字典形式设置。
  4. 布局管理
  5. Remi 支持多种布局方式(如 VBox、HBox),方便开发者组织界面元素。
  6. 事件处理
  7. Remi 允许为组件绑定事件(如点击、输入等),实现用户交互功能。

小结

Remi 是一个纯Python语言开发WEB应用的框架,使用起来比较简单,本例介绍了 Remi 框架的基本概念,并通过一个简单的 “Hello, World!” 示例演示了如何快速上手 Remi。后续将继续探讨 Remi 的更多功能,包括布局管理、事件处理、数据绑定等。

如果你对 Remi 感兴趣,不妨动手试试这个示例,感受用 Python 构建 Web 界面的乐趣!


留言讨论

  1. 你之前是否接触过其他 Python Web 框架?与 Remi 相比,你觉得哪个更易用?
  2. 你希望在后续的学习中看到哪些 Remi 的实际应用场景?欢迎在评论区留言!

附录:本案例中用到的 Remi 函数原型

1. remi.start 函数

功能:启动 Remi 应用。
原型

remi.start(
    app_class,          # 应用类(必须继承自 remi.App)
    address='0.0.0.0',  # 绑定的 IP 地址(默认 '0.0.0.0')
    port=8080,          # 绑定的端口号(默认 8080)
    multiple_instance=False,  # 是否允许多个实例(默认 False)
    enable_file_cache=True,    # 是否启用文件缓存(默认 True)
    start_browser=False,       # 是否自动打开浏览器(默认 False)
    username=None,             # 用户名(用于身份验证)
    password=None              # 密码(用于身份验证)
)

示例

start(MyApp, address='127.0.0.1', port=8080)

2. remi.App 类

功能:Remi 应用的基础类,所有 Remi 应用都需要继承该类。
核心方法

  • main(self)
    必须重写的方法,用于定义应用的 UI 布局。返回一个容器(如 VBox、HBox)作为根元素。

示例

class MyApp(App):
    def main(self):
        container = gui.VBox()
        return container

3. remi.gui.VBox 类

功能:创建一个垂直布局容器,子组件会按垂直方向排列。
原型

gui.VBox(
    width=None,       # 容器宽度(如 '300px')
    height=None,      # 容器高度(如 '200px')
    style=None,       # CSS 样式(字典形式,如 {'margin': 'auto'})
    **kwargs          # 其他属性
)

示例

container = gui.VBox(width=300, height=200, style={'margin': 'auto'})

4. remi.gui.Label 类

功能:创建一个文本标签,用于显示静态文本。
原型

gui.Label(
    text='',          # 标签显示的文本
    width=None,       # 标签宽度(如 '100px')
    height=None,      # 标签高度(如 '50px')
    style=None,       # CSS 样式(字典形式,如 {'font-size': '20px'})
    **kwargs          # 其他属性
)

示例

label = gui.Label("Hello, World!", style={'font-size': '20px', 'text-align': 'center'})

5. append 方法

功能:将子组件添加到父容器中。
原型

parent.append(child)  # 将 child 组件添加到 parent 容器中

示例

container.append(label)

6. remi.gui 模块

功能:提供各种 UI 组件(如按钮、文本框、标签等)。
常用组件

  • gui.Button:按钮组件。
  • gui.TextInput:文本框组件。
  • gui.Label:标签组件。
  • gui.VBox:垂直布局容器。
  • gui.HBox:水平布局容器。

示例

from remi import gui
button = gui.Button("Click Me")

参考资料

  • Remi 官方文档:(https://remi.readthedocs.io)
  • Remi GitHub 仓库:(https://github.com/dddomodossola/remi)

将陆续更新 Python 编程相关的学习资料!

头条号作者:ICodeWR

发布时间:2025年3月16日

标签:#python# #python自学# #每天学python#

初识 Remi,用 Python 轻松构建 Web UI

© 版权声明

相关文章

4 条评论

您必须登录才能参与评论!
立即登录
  • 头像
    cc要发大财cc 投稿者

    收藏了,感谢分享

    无记录
  • 头像
    范老师小课堂 读者

    可以离线使用资源文件吗?很多所谓web,它的资源文件(css,js,jpeg,ico等)不联网就用不了,不适合内网开发环境

    无记录
  • 头像
    耀耀 读者

    和streamlit比那个好用?

    无记录
  • 头像
    可不可以简单轻松的活着 投稿者

    真便捷,点赞👍

    无记录