[本主题是预发行文档，有可能会有所更改。]

本文介绍如何创建 Power Pages 以及如何使用 Power Automate 云端流来调用 MSN 天气应用，该应用在页面上显示当前天气的详细信息。

重要提示

要完成这些步骤，您需要一个 Power Automate 和 Power Pages 环境。 如果您没有许可证，可以注册 Power Pages 和 Power Automate 试用。

使用 Power Pages 触发器创建流，使用 MSN 天气操作提取天气数据。

登录到 Power Pages。

在左侧窗格中选择解决方案。

创建新解决方案或选择现有解决方案。

选择 +新建自动化云端流即时。

选择跳过。

搜索 Power Pages。

选择+ 添加输入。

选择文本。

使用位置添加名称。

选择 + 新建步骤。

搜索 MSN 天气。

选择获取当前天气操作。

将光标聚焦在位置输入文本上，在动态内容中选择 Power Pages 调用流时下的位置参数。

备注

您可以保留英制单位，也可以更改为公制单位。

选择 + 新建步骤。

搜索 Power Pages。

选择将值返回 Power Pages 操作。

选择 + 添加和输出。

选择文本。

输入 Pressure 作为标题。

在获取当前天气下，选择动态内容气压。

使用文本类型重复上述步骤创建以下输出步骤：

选择保存

将流命名为获取当前天气。

保存流后，您需要将其添加到站点并分配适当的 Web 角色。

登录到 Power Pages。

创建具有起点布局之一的站点。

选择站点，然后选择编辑。

导航到设置工作区。

在应用集成下，选择云端流（预览）。

选择 + 添加云端流。

搜索获取当前天气流。

在“角色”下选择 + 添加角色。

选择匿名用户角色。

选择添加。

复制 URL。

备注

这是用于连接到关联云端流的唯一 URL。 稍后您将使用此 URL 来调用当前天气流。

创建流并将其附加到 Power Pages 站点后，您现在可以使用 JavaScript 从控制事件调用流。

选择页面工作区。

选择 + 页面。

将页面命名为“今天天气预报”。

选择编辑代码打开 Visual Studio Code。

粘贴此代码：

Submit

Wind: Visibility: UV Index: Conditions: document.getElementById("cityForm").addEventListener("submit", function (event) { event.preventDefault(); // Prevent form submission var weatherDiv = document.getElementById("weatherdetail"); weatherDiv.style.display = "none"; var location = document.getElementById("locationInput").value; var _url = ""; var data = {}; data["Location"] = location; var payload = {}; payload.eventData = JSON.stringify(data); shell .ajaxSafePost({ type: "POST", contentType: "application/json", url: _url, data: JSON.stringify(payload), processData: false, global: false, }) .done(function (response) { const result = JSON.parse(response); document.getElementById("temperature").innerHTML = result["temperature"]; document.getElementById("windspeed").innerHTML = result["wind_speed"]; document.getElementById("visibility").innerHTML = result["visible_distance"]; document.getElementById("uv").innerHTML = result["uv_index"]; document.getElementById("location").innerHTML = result["location"]; document.getElementById("condition").innerHTML = result["conditions"]; document.getElementById("temperature_units").innerHTML = result["temperature_units"]; document.getElementById("speed_units").innerHTML = result["speed_units"]; document.getElementById("distance_units").innerHTML = result["distance_units"]; document.getElementById("cordinates").innerHTML = parseFloat(result["latitude"]).toFixed(2) + ', ' + parseFloat(result["longitude"]).toFixed(2); weatherDiv.style.display = "block"; }) .fail(function () { alert("failed"); }); });

将 URL 替换为您在上一步中复制的 URL。

选择 CTRL + S 保存代码。

在设计工作室中选择同步。

要测试流集成功能：

选择预览打开站点。

在位置文本框中输入邮政编码或城市。

选择提交按钮。