如何在App Inventor中不使用WebViewer嵌入天气HTML代码？

你提供的Tomorrow.io天气组件依赖其官方SDK脚本渲染，而App Inventor的原生组件并不支持直接执行外部JavaScript或解析复杂HTML结构，所以直接嵌入这段HTML代码而不用WebViewer是无法实现的。不过可以通过以下两种思路达成类似效果：

方案1：直接调用Tomorrow.io API，用原生组件构建UI #

这是最贴合App Inventor特性的方案，适合教孩子理解API调用和数据解析的逻辑：

• 第一步：前往Tomorrow.io平台申请免费API密钥（需注册账号）
• 第二步：在App Inventor中添加HTTP组件，用于发送API请求
• 第三步：构造Tomorrow.io的v4天气预报API请求，传入你的位置ID（你提供的是132169）、申请到的API密钥，以及公制单位参数，通过HTTP组件发送GET请求
• 第四步：用JSON解析器组件处理HTTP返回的JSON数据，提取温度、天气状况、预报时间、天气图标URL等信息
• 第五步：使用App Inventor的原生组件（标签、图片、垂直/水平布局）搭建天气界面：
  • 用标签显示当前温度和天气描述
  • 用图片组件加载API返回的天气图标
  • 用布局组件排列预报条目，展示未来几天的天气数据

这种方式完全不需要WebViewer，所有界面都是原生组件，还能让孩子直观学习数据请求和UI构建的完整流程。

方案2：使用自定义Web扩展（仍基于WebView内核） #

如果一定要复用Tomorrow.io的现成UI，可以尝试App Inventor扩展市场中的第三方Web相关扩展。这类扩展本质还是基于WebView，但可能提供更多自定义选项，不过需要注意：

• 这类扩展依然依赖WebView内核，只是并非官方的WebViewer组件
• 需要确认扩展支持加载外部JS脚本和HTML内容

你提供的原HTML代码（依赖SDK渲染）：

<html>
<body>
<script>
        (function(d, s, id) {
            if (d.getElementById(id)) {
                if (window.__TOMORROW__) {
                    window.__TOMORROW__.renderWidget();
                }
                return;
            }
            const fjs = d.getElementsByTagName(s)[0];
            const js = d.createElement(s);
            js.id = id;
            js.src = "https://www.tomorrow.io/v1/widget/sdk/sdk.bundle.min.js";

            fjs.parentNode.insertBefore(js, fjs);
        })(document, 'script', 'tomorrow-sdk');
        </script>

        <div class="tomorrow"
           data-location-id="132169"
           data-language="EN"
           data-unit-system="METRIC"
           data-skin="light"
           data-widget-type="upcoming"
           style="padding-bottom:22px;position:relative;"
        >
          <a
            href="https://www.tomorrow.io/weather-api/"
            rel="nofollow noopener noreferrer"
            target="_blank"
            style="position: absolute; bottom: 0; transform: translateX(-50%); left: 50%;"
          >
            <img
              alt="Powered by the Tomorrow.io Weather API"
              src="https://weather-website-client.tomorrow.io/img/powered-by.svg"
              width="250"
              height="18"
            />
          </a>
        </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Karthigeyan Ravichandran