如何在AMP页面中获取URL的查询字符串参数？

在AMP页面里提取URL里的查询参数（比如你例子里的videoid=1234），AMP官方提供了几种实用的方法，我给你整理了最常用的几个：

方法一：用AMP官方API AMP.getUrlParams() #

这是最直接的方式，AMP的运行时已经封装好了获取URL参数的方法，你可以直接调用它拿到所有查询参数：

// 在amp-script组件或者AMP允许的脚本上下文中使用
const urlParams = AMP.getUrlParams();
const videoId = urlParams.get('videoid');
// 拿到videoId后就可以按需使用，比如传给视频播放组件

这个方法的好处是不需要自己解析URL，AMP已经帮你处理好了兼容性和AMP环境的限制。

方法二：结合amp-bind解析window.location.search #

如果需要把参数动态绑定到AMP组件的属性上（比如动态设置视频播放器的src），可以用amp-bind配合URLSearchParams来实现：

1. 先定义一个amp-state来存储参数：

<amp-state id="urlParams">
  <script type="application/json">
    {}
  </script>
</amp-state>

2. 在amp-script里解析URL参数并更新state：

const searchParams = new URLSearchParams(window.location.search);
AMP.setState({
  urlParams: {
    videoid: searchParams.get('videoid')
  }
});

3. 之后就可以在组件里动态绑定参数了：

<amp-video [src]="'/videos/' + urlParams.videoid + '.mp4'" controls>
</amp-video>

方法三：用于统计场景的amp-analytics内置变量 #

如果只是需要在统计上报中使用查询参数，amp-analytics已经内置了专门的变量，不用自己写解析逻辑：

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "videoTrack": "https://your-tracking-url.com?vid=QUERY_PARAM(videoid)"
      },
      "triggers": {
        "trackVideoLoad": {
          "on": "visible",
          "request": "videoTrack"
        }
      }
    }
  </script>
</amp-analytics>

这里的QUERY_PARAM(videoid)会自动提取URL里的videoid参数值。

注意事项 #

• 所有脚本逻辑必须放在AMP允许的容器里，比如amp-script，不能直接写普通的<script>标签，否则会违反AMP的规则。
• 如果使用amp-script，要确保脚本的沙箱权限足够（不过URLSearchParams和AMP.getUrlParams()都是默认允许的）。

内容的提问来源于stack exchange，提问作者Waqas Afzal