Web Developer允许使用Flowcode IDE环境开发具有交互性的网页。可以在2D面板中添加特殊网页组件，以创建网页的视觉表示，并可以使用流程图添加交互功能。 它的引入意味着Flowcode用户现在可以使用Flowcode来创建可以在各种设备上运行的程序，例如： 手机和平板电脑 个人电脑：Windows、Apple 和 Linux 支持浏览器的嵌入式设备。

入门指南 要启动网页开发器，请运行Flowcode并选择新项目 选择 网页开发者 选项卡，然后选择 空白网页 ，然后 新建空白网页开发者项目。

选择 文件，另存为... 并命名您的项目，例如 MyFirstWDProject。 我建议不要在项目名称和目录路径中使用空格或下划线代替空格。 项目文件扩展名将为.fcsx 创建一个包含形状和文本的基本网页，没有互动。

与嵌入式或PC开发人员的组件不同，仅包含在以下四个部分内：

在组件内库 > 创建，添加一个形状和标签到2D面板 > 网页设计。

如果无法看到2D网页设计面板，请选择视图 > 网页设计

通过其属性更改形状为任何形状和颜色，并更改文本的大小和颜色：

要创建网页，请选择 构建 > 创建网页... 弹出窗口简要显示创建的网页路径：

一个HTML文件将会在与项目文件相同的文件夹内生成：

您可以在首选设备（例如平板电脑、手机、PC等）上加载html文件，或者如果您想等待项目完成，您可以在Flowcode的‘Html Viewer’中查看和与网页进行交互。 要执行后者，请在网页创建后，选择生成 > 查看网页...

如果您进行了任何更改，请选择 构建 > 创建网页...，然后选择 构建 > 查看网页... 如果你在浏览器中运行html文件，例如Chrome，你会看到它们是相同的：

按钮按下时执行的操作

按下按钮后，我们将设置文本以显示按钮被点击的次数，并添加一个指示器以在每次按钮按下时切换状态。

首先，创建一个新的 Web Developer 项目，例如 ActionOnButtonPress。

从组件库添加按钮 > 输入

更改属性，例如：处理（用于按钮引用）、形状、文本、颜色等。

另外，在属性中，交互部分下，选择OnClick Macro旁边的下拉箭头并选择<添加新的>。

创建一个新的宏窗口将会弹出，只需将名称更改为按钮引用，例如 WebButton1，然后选择 确定

这将自动创建一个新的事件宏，称为WebButton1 现在从组件库 > 创建中添加一个标签，并从组件库 > 输出中添加一个指示器到网页设计面板。 将标签属性的字体更改为 Calibri，字体大小更改为 16。 这样我们就可以对齐所有组件，并大致了解它会是什么样子，将文本更改为按钮已被按下0次

有各种图标可以点击以使布局更整洁，例如，滑动选择您要对齐的组件，然后点击 居中对齐。

我们将从项目资源管理器的{X}中添加三个全局变量。

变量如下：布尔型变量名为Toggle，初始值为0；整型变量名为Count，初始值为0；字符串变量名为LabelString，长度默认为200。 如果正确添加，您应该看到：

在刚刚创建的用户宏（例如 WebButton1）中，放置组件功能宏或命令图标（例如 计算框、决策图标等）。 放置一个带有以下内容的计算图标： 切换 = !切换 计数 = 计数 + 1 LabelString = "按钮已被按下" LabelString = LabelString + Count.ToString() LabelString = LabelString + " 次" ToString$ 函数位于计算函数 (f$) 中：

它的功能是将任何整数转换为字符串，以便可以在标签或文本块组件中进行显示。 从项目资源管理器中选择组件，然后对于指示器1，将SetState拖动到WebButton1用户宏中。 拖动后弹出的宏中输入切换在表达式下方：

而不是输入 toggle，您可以选择 expression 正下方的下拉箭头，并将变量拖动到表达式框中：

将标签拖放到 WebButton1 用户宏，并输入（或拖动）字符串变量。 您的 WebButton1 用户宏现在应如下所示：

红色星标表示该图标或组件已添加但尚未保存，请确保保存项目。 需要注意的是，与嵌入式和应用开发人员不同，主程序中唯一需要的代码是初始化设置状态、值或文本等。 没有连续的循环。 考虑一下在 Web Developer 中的所有内容，相当于中断宏驱动的宏。 例如，按下按钮、开关变化或接收数据时。 为了项目能够成功进行，这是主要部分：

在 构建 > 创建网页之后，然后 构建 > 查看网页，Html查看器按预期工作：

HTML文件现在已准备好加载到浏览器中，以供您选择设备使用。 每秒记录滑块值到图表 这个想法是运行两个定时器，一个每100毫秒运行一次，以获取滑块的值，因为你不能在主程序或任何其他事件或用户调用宏中进行无限循环。 另一个定时器是每秒运行一次，仅用于图表记录。 从组件库中添加以下组件： 文本块 x1 来自 创建，在属性内，将文本更改为 滑块值是： 折线图 x1 来自 图表，在属性中更改以下内容： 图表 > 标题 为 Slider Logging X轴 > 名称 为 时间（秒） Y轴 > 名称 为 值，自动缩放 为 是，开始 为 0 & 结束 为 100 系列 > 系列计数 为 1 Slider x1 和 单选按钮 x3 来自 控件 计时器 x2 来自 助手 你需要为每个计时器添加有意义的事件宏名称，就像你为开关所做的那样。 对于计时器1，将其命名为 TimerEvent100Milliseconds

对于Timer2，将其命名为TimerEvent100Milliseconds 两个定时器都需要类型为重复。 Slider x1 和 单选按钮 x3 来自 控件 Slider 可以保持在 0 到 100 刻度 设置。 其他视觉属性可以根据您的需求进行调整。 Radio1 是唯一一个在属性设置为 已选中 的按钮，其他两个按钮设置为 否，Text 的文本是 登出，OnClick Macro 的宏是 LoggingOff Radio2 文本是正在记录 点击宏是正在登录 Radio3 文本是 图表重置 是 图表重置 宏是 图表重置 是 图表重置 将所有组件排列在2D网页设计面板上。 例如，这是我的样子：

提示：任何灰色的、带穿孔边的矩形组件在直接运行html网页或生成 > 查看网页... html模拟器时将是不可见的。 我们需要添加一些全局变量，以便它们可以在所有事件宏中使用。 从“项目资源管理器” > “变量”中，选择上方的“变量” > “添加新的”，因为它们是全局的，并添加以下整数： 秒数，滑块值 添加以下布尔值： 日志记录启用 需要添加一个局部变量，这个变量只用于TimerEvent100Milliseconds事件宏 从项目资源管理器中选择该宏宏，或者从流程图的顶部选择 选择 项目资源管理器 > 变量，这次选择 局部变量 下的变量下拉菜单，并添加以下字符串变量： 字符串变量 数组长度可以留空 现在将组件宏和命令图标（计算、延迟等）拖动到事件宏和主程序中。 主页 来自 项目浏览器 > 组件 拖动 Timer1 开始 并输入值 '100 用于 表达式 这意味着Timer1组件将每100毫秒调用TimerEvent100Milliseconds事件宏。 从 项目探索器 > 宏 拖动图表重置事件宏：

计时器事件100毫秒 从 项目浏览器 > 组件 拖动 Slider1 > 获取值 对于 返回值：(整数) 选择向下箭头，选择SliderValue 从全局变量 > 确定 拖动TextBlock1 > SetValue 到 SliderValue 组件宏的下方，并选择 Locals > StringVar

从 项目资源管理器 > 图标 拖动一个计算图标在两个组件之间，并输入： .StringVar = "Slider Value is: " + ToString$(SliderValue) 提示：ToString$ 在前一节中提到。

计时事件秒 从 项目资源管理器 > 图标 拖动一个计算图标并进入： 秒数 = 秒数 + 1 从 项目浏览器 > 组件 拖动 LineChart1 > 添加点 到计算图标下方并输入： 秒数 用于 x 滑块值 用于 y 1 用于 索引 拖动 LineChart1 > 重绘 在 AddPoint 下面。 没有需要输入的表达式或返回值。

登出 从 项目浏览器 > 组件 拖动 计时器2 > 停止 从 项目资源管理器 > 图标 拖动一个计算图标到计时器2停止处并输入： 日志记录启用 = 0

登录ON

从 项目浏览器 > 组件

拖动 Timer2 > 开始 并输入 1000 作为 Timer iInterval

从 项目资源管理器 > 图标

拖动一个计算图标到计时器1开始下方并输入

日志记录启用 = 1

图表休息 对于最终事件宏，请按从上到下的顺序添加以下内容： 从 项目浏览器 > 组件 拖动 LineChart1' > 清除数据 拖动 LineChart1' > 重绘 从 项目资源管理器 > 图标 拖动一个计算并输入 秒数 = 0 拖动一个延迟 ' 并输入 100 ，保持默认的毫秒选择。 拖动一个决策图标并输入If: 日志记录启用 对于是分支，从项目资源管理器 > 组件 拖动 Radio2 > 设置状态，然后输入 bState 1 对于 否 分支 拖动 Radio1 > SetState 并输入 bState 1

示例现已完成。 对于其他的例子，选择 构建 > 创建网页... 在此之前，你才能使用生成的html文件或内置的html查看器。 这是实际操作中的示例，滑块通过内置的html查看器移动：

从 API URL 中检索数据 从现在开始，随着事情变得越来越复杂，将会有一个示例项目文件，您可以下载以备您在操作过程中犯任何错误。 有一个公开的免费测试网站的假API - 假API网站 如果你查看网站，你会看到双引号内的标签，例如 "id" 之后会有例如 :1 的参考。 您还会看到 "title": "sunt" 等等。 另一个标签是“Body”，你可以看到它以“quia，这是我们正在捕获的数据。”开始。 要从网站捕获字符，请添加 HTTP获取 和 对象助手 从 组件库 > 助手 添加按钮和三个输入文本来自 控件。 在组件属性中，您可以更改背景颜色、添加初始文本，并从Handle中重命名输入文本。 这是组件在二维面板上的布局情况

您会注意到有两个事件宏，当在属性中输入名称时，它们会自动添加。 这在内部进行了解释按钮按下时的操作 点击按钮旁边的“点击宏”按钮，您可以使用默认名称OnClick。 对于Http获取，你可以使用默认名称 ProcessResponse。 注意：将自动添加一个名为Data的参数。 H 只表示这是一个对象/句柄 现在我们按照所需顺序在事件宏中添加所需的组件，以从测试网页中检索数据。 首先处理按钮。 这很好且简单，因为我们所做的只是添加一个获取组件和获取功能。 在参数内输入两组引号： "双引号"

添加以下用红色突出显示的局部变量：

字符串可以保持默认值，即数组长度为空。 现在添加以下组件函数宏：

提示。当一个组件宏有返回值（输出）和一个参数（输入）时，格式是'返回值=组件:函数(参数) 例如，使用第一个组件图标

紫色箭头是组件函数。 绿色箭头显示变量的位置。 红色箭头显示了从哪里拖动变量。 为了检查你是否已正确拖动所有组件，完成后的示例如下

检索HTPP数据 After 构建 > 创建网页... 之后，html 文件将被生成。 您可以通过这种方式或构建 > 查看网页...查看按按钮的结果 这应该是你在Chrime浏览器中看到的：

通过构建 > 查看网页...

双向沟通

本教程的最后一部分将使您能够实现您的网页浏览器与嵌入式设备之间的最简单双向通信。