具有 "change units" 天气网站功能的 AMP 网页

Question

我想要一个 AMP 版本的小众天气网站。与天气有关，存在单位问题 - C/F、MPH / KMH 等

这不是问题，除非我也有特定于单位的图像和图表。在 HTML 版本上，我可以轻松地使用一些 JS 来交换单位，但是，除了 linking 到另一个页面之外，我看不到在 AMP 页面上执行此操作的方法。

那么，是否有 AMP 方法可以做到这一点，或者我只是在寻找一个更改单元 link？谢谢

Answer 1

您可能想要使用 amp-bind and amp-list. The amp-list component will allow you to grab content from a JSON endpoint, which is where I assume is where your weather data is sourced from. You can then use amp-bind to toggle the visible state of the chart on the page depending on what unit of measurement is selected by the user. You can find more in-depth examples on the AMP website 的组合，但这里有一个简短的示例，当您单击一系列两个按钮时，它会切换 div 上的样式。

头：

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

<amp-state id="unitMeasurement">
  <script type="application/json">
    {
      "selected": "f",
      "f": {
        "style": "showF",
      },
      "c": {
        "style": "showC",
      }
    }
  </script>
</amp-state>

正文

<button class="btn"
  on="tap:AMP.setState({unitMeasurement: {selected: 'f'}})">
  Switch F
</button>

<button class="btn"
  on="tap:AMP.setState({unitMeasurement: {selected: 'c'}})">
  Switch C
</button>

<p [class]="unitMeasurement[unitMeasurement.selected].style"
  class="measurement">Units.</p>

具有 "change units" 天气网站功能的 AMP 网页

AMP pages with "change units" functionality for weather website

amp-html