使用一个 Watchlist 程序作为示例 复原完整的开发流程 只提供入门所需的最少信息 优化术语解释，更容易理解 阅读方法 本书复原了编写这个 Watchlist 程序的完整流程，包括每一行代码块，每一个需要 执行的命令。在阅读时，你需要自己输入每一个代码和命令，检查输出是否和书中 一致。在这个过程中，你也可以对它进行一些调整。比如，示例程序的界面语言使 用了英文，你可以修改为中文或是其 GitHub 的 SSH 设置页面（导航栏头像 - Settings - SSH and GPG keys），点击 New SSH key 按钮，将复制的内容粘贴到 Key 输入 框里，再填一个标题，比如“My PC”，最后点击“Add SSH key”按钮保存。 创建远程仓库 访问新建仓库页面（导航栏“+” - New repository），在“Repository name”处填写仓 files）和我们的模板概念相反，指的是内容不需要动态生成的文 件。比如图片、CSS 文件和 JavaScript 脚本等。 在 Flask 中，我们需要创建一个 static 文件夹来保存静态文件，它应该和程序模 块、templates 文件夹在同一目录层级，所以我们在项目根目录创建它： $ mkdir static 生成静态文件 URL 在 HTML 文件里，引入这些静态文件需要给出资源所在的 URL。为了更加灵活，

clear(scope) : 清除scope的内容 remove(scope) : 移除scope scroll_to(scope) : 将页面滚动到scope处 页面环境设置 页面标题 调用 set_env(title=...) 可以设置页面标题。 with use_scope('scope1'): put_text('A') # 输出内容: A put_text('B' pywebio_api=set_env_demo] 布局 一般情况下，使用上文介绍的各种输出函数足以完成各种内容的展示，但直接 调用输出函数产生的输出之间都是竖直排列的，如果想实现更复杂的布局（比 如在页面左侧显示一个代码块，在右侧显示一个图像），就需要借助布局函 数。 pywebio.output 模块提供了3个布局函数，通过对他们进行组合可以完成各种 复杂的布局: put_row() : 使用行布局输出内容. 内容在水平方向上排列 输出Html put_link 输出链接 put_processbar 输出进度条 set_processbar 设置进度条进度 put_loading 输出加载提示 put_code 输出代码块 put_table 输出表格 put_buttons 输出一组按钮，并绑定点击事件 put_image 输出图片 put_file 显示一个文件下载链接 put_collapse 输出可折叠的内容

clear(scope) : 清除scope的内容 remove(scope) : 移除scope scroll_to(scope) : 将页面滚动到scope处 页面环境设置 页面标题 调用 set_env(title=...) 可以设置页面标题。 with use_scope('scope1'): put_text('A') # 输出内容: A put_text('B' pywebio_api=set_env_demo] 布局 一般情况下，使用上文介绍的各种输出函数足以完成各种内容的展示，但直接 调用输出函数产生的输出之间都是竖直排列的，如果想实现更复杂的布局（比 如在页面左侧显示一个代码块，在右侧显示一个图像），就需要借助布局函 数。 pywebio.output 模块提供了3个布局函数，通过对他们进行组合可以完成各种 复杂的布局: put_row() : 使用行布局输出内容. 内容在水平方向上排列 task_2}) 可以使用 pywebio.platform.seo() 函数来设置任务函数SEO信息（在被搜索引 擎索引时提供的网页信息，包含应用标题和应用简介），如果不使用 seo() 函 数，默认条件下，PyWebIO会将任务函数的函数注释作为SEO信息（应用标题 和简介之间使用一个空行分隔）。 注意 注意，在Server模式下，仅能在任务函数上下文中对PyWebIO的交互函数进 行调用。比如如下调用是

scroll_to(scope) : 将页面滚动到 scope 处 18 Chapter 4. Documentation PyWebIO, 发布 1.1.0 页面环境设置 页面标题 调用set_env(title=...) 可以设置页面标题。 自动滚动 在进行一些持续性的输出时 (比如日志输出)，有时希望在有新输出后自动将页面滚动到最下方，这时可以调 用set_env(auto_scroll_bottom=True) set_env Demo 布局 一般情况下，使用上文介绍的各种输出函数足以完成各种内容的展示，但直接调用输出函数产生的输出之间 都是竖直排列的，如果想实现更复杂的布局（比如在页面左侧显示一个代码块，在右侧显示一个图像），就需 要借助布局函数。 pywebio.output 模块提供了 3 个布局函数，通过对他们进行组合可以完成各种复杂的布局: • put_row() : 使用行布局输出内容 可以使用pywebio.platform.seo() 函数来设置任务函数 SEO 信息（在被搜索引擎索引时提供的网页信 息，包含应用标题和应用简介），如果不使用 seo() 函数，默认条件下，PyWebIO 会将任务函数的函数注释 作为 SEO 信息（应用标题和简介之间使用一个空行分隔）。 注意: 注意，在 Server 模式下，仅能在任务函数上下文中对 PyWebIO 的交互函数进行调用。比如如下调

PyWebIO支持两种外观：输出区固定高度/可变高度。 可以通过调用 set_output_fixed_height(True) 来开启输出区固定高度。 设置页面标题 调用 set_title(title) 可以设置页面标题。 自动滚动 在不指定锚点进行输出时，PyWebIO默认在输出完毕后自动将页面滚动到页面 最下方；在调用输入函数时，也会将页面滚动到表单处。 通过调用 set_a MIDDLE : 滚动页面，让锚点位于屏幕可视区域中间 BOTTOM : 滚动页面，让锚点位于屏幕可视区域底部 环境设置 pywebio.output.set_title(title) 设置页面标题 pywebio.output.set_output_fixed_height(enabled=True) 开启/关闭页面固高度模式 pywebio.output.set_auto_scrol put_code(content, langage='', anchor=None, before=None, after=None) → pywebio.io_ctrl.OutputReturn 参数: 参数: 输出代码块 content (str) – 代码内容 langage (str) – 代码语言 anchor, before, after (str) – 与 put_text 函数的同名参数 含义一致 pywebio

clear(scope) : 清除scope的内容 remove(scope) : 移除scope scroll_to(scope) : 将页面滚动到scope处 页面环境设置 页面标题 调用 set_env(title=…) 可以设置页面标题。 自动滚动 在进行一些持续性的输出时(比如日志输出)，有时希望在有新输出后自动将页 面滚动到最下方，这时可以调用 set_env(auto_scroll_bottom=True) 在Server模式下，可以使用 pywebio.platform.seo() 函数来设置任务函数SEO 信息（在被搜索引擎索引时提供的网页信息，包含应用标题和应用简介），如 果不使用 seo() 函数，默认条件下，PyWebIO会将任务函数的函数注释作为 SEO信息（应用标题和简介之间使用一个空行分隔）。 注意 注意，在Server模式下， input 、 output 和 session 模块内的函数仅能在任 required=True (部分输入函数不支持 required 参数) 本模块中的输入函数都是阻塞式的，输入表单会在成功提交后销毁。如果你想 让表单可以一直显示在页面上并可以持续性接收输入，你可以考虑使用 pin 模 块。 函数清单 函数 简介 input 文本输入 textarea 多行文本输入 select 下拉选择框 checkbox 勾选选项 radio 单选选项 slider 滑块输入 actions

clear(scope) : 清除scope的内容 remove(scope) : 移除scope scroll_to(scope) : 将页面滚动到scope处 页面环境设置 页面标题 调用 set_env(title=…) 可以设置页面标题。 自动滚动 在进行一些持续性的输出时(比如日志输出)，有时希望在有新输出后自动将页 面滚动到最下方，这时可以调用 set_env(auto_scroll_bottom=True) 在Server模式下，可以使用 pywebio.platform.seo() 函数来设置任务函数SEO 信息（在被搜索引擎索引时提供的网页信息，包含应用标题和应用简介），如 果不使用 seo() 函数，默认条件下，PyWebIO会将任务函数的函数注释作为 SEO信息（应用标题和简介之间使用一个空行分隔）。 注意 注意，在Server模式下， input 、 output 和 session 模块内的函数仅能在任 required=True (部分输入函数不支持 required 参数) 本模块中的输入函数都是阻塞式的，输入表单会在成功提交后销毁。如果你想 让表单可以一直显示在页面上并可以持续性接收输入，你可以考虑使用 pin 模 块。 函数清单 函数 简介 input 文本输入 textarea 多行文本输入 select 下拉选择框 checkbox 勾选选项 radio 单选选项 slider 滑块输入 actions

clear(scope) : 清除scope的内容 remove(scope) : 移除scope scroll_to(scope) : 将页面滚动到scope处 页面环境设置 页面标题 调用 set_env(title=…) 可以设置页面标题。 自动滚动 在进行一些持续性的输出时(比如日志输出)，有时希望在有新输出后自动将页 面滚动到最下方，这时可以调用 set_env(auto_scroll_bottom=True) 在Server模式下，可以使用 pywebio.platform.seo() 函数来设置任务函数SEO 信息（在被搜索引擎索引时提供的网页信息，包含应用标题和应用简介），如 果不使用 seo() 函数，默认条件下，PyWebIO会将任务函数的函数注释作为 SEO信息（应用标题和简介之间使用一个空行分隔）。 注意 注意，在Server模式下， input 、 output 和 session 模块内的函数仅能在任 required=True (部分输入函数不支持 required 参数) 本模块中的输入函数都是阻塞式的，输入表单会在成功提交后销毁。如果你想 让表单可以一直显示在页面上并可以持续性接收输入，你可以考虑使用 pin 模 块。 函数清单 函数 简介 input 文本输入 textarea 多行文本输入 select 下拉选择框 checkbox 勾选选项 radio 单选选项 slider 滑块输入 actions

clear(scope) : 清除scope的内容 remove(scope) : 移除scope scroll_to(scope) : 将页面滚动到scope处 页面环境设置 页面标题 调用 set_env(title=…) 可以设置页面标题。 自动滚动 在进行一些持续性的输出时(比如日志输出)，有时希望在有新输出后自动将页 面滚动到最下方，这时可以调用 set_env(auto_scroll_bottom=True) 在Server模式下，可以使用 pywebio.platform.seo() 函数来设置任务函数SEO 信息（在被搜索引擎索引时提供的网页信息，包含应用标题和应用简介），如 果不使用 seo() 函数，默认条件下，PyWebIO会将任务函数的函数注释作为 SEO信息（应用标题和简介之间使用一个空行分隔）。 注意 注意，在Server模式下， input 、 output 和 session 模块内的函数仅能在任 required=True (部分输入函数不支持 required 参数) 本模块中的输入函数都是阻塞式的，输入表单会在成功提交后销毁。如果你想 让表单可以一直显示在页面上并可以持续性接收输入，你可以考虑使用 pin 模 块。 函数清单 函数 简介 input 文本输入 textarea 多行文本输入 select 下拉选择框 checkbox 勾选选项 radio 单选选项 slider 滑块输入 actions

clear(scope) : 清除scope的内容 remove(scope) : 移除scope scroll_to(scope) : 将页面滚动到scope处 页面环境设置 页面标题 调用 set_env(title=…) 可以设置页面标题。 自动滚动 在进行一些持续性的输出时(比如日志输出)，有时希望在有新输出后自动将页 面滚动到最下方，这时可以调用 set_env(auto_scroll_bottom=True) before C B -> B D C A 一般情况下，使用上文介绍的各种输出函数足以完成各种内容的展示，但直接 调用输出函数产生的输出之间都是竖直排列的，如果想实现更复杂的布局（比 如在页面左侧显示一个代码块，在右侧显示一个图像），就需要借助布局函 数。 pywebio.output 模块提供了3个布局函数，通过对他们进行组合可以完成各种 复杂的布局: put_row() : 使用行布局输出内容. 内容在水平方向上排列 在Server模式下，可以使用 pywebio.platform.seo() 函数来设置任务函数SEO 信息（在被搜索引擎索引时提供的网页信息，包含应用标题和应用简介），如 果不使用 seo() 函数，默认条件下，PyWebIO会将任务函数的函数注释作为 SEO信息（应用标题和简介之间使用一个空行分隔）。 注意 注意，在Server模式下，仅能在任务函数上下文中对PyWebIO的交互函数进 行调用。比如如下调用是