AMP Stories自定义JavaScript开发：指南、方案及功能实现咨询

AMP Stories是为保障高性能与跨平台一致性设计的封闭环境，确实不支持自定义JavaScript（包括amp-script），普通交互元素如button也仅能在指定容器（比如amp-story-cta-layer）内使用，这是核心限制。如果需要实现未被内置组件覆盖的交互（比如内容切换、点击滚动），可以通过以下几种方式解决：

1. 用现有AMP组件+amp-bind组合实现需求 #

这是最实用、成本最低的方案，AMP提供的组件和状态绑定系统能覆盖大部分常见交互场景：

示例1：点击切换内容显示 #

利用amp-selector触发状态变化，结合amp-bind控制内容的显示隐藏：

<amp-story-page id="toggle-content-page">
  <amp-story-grid-layer template="vertical">
    <!-- 切换触发器 -->
    <amp-selector layout="container" on="select:AMP.setState({activeContent: event.targetOption})">
      <div option="profile" selected class="toggle-btn">个人资料</div>
      <div option="settings" class="toggle-btn">设置</div>
    </amp-selector>
    
    <!-- 切换内容 -->
    <div [hidden]="activeContent != 'profile'" class="content-block">
      姓名：XXX<br>
      邮箱：xxx@example.com
    </div>
    <div [hidden]="activeContent != 'settings'" class="content-block">
      通知设置：开启<br>
      隐私模式：关闭
    </div>
  </amp-story-grid-layer>
</amp-story-page>

示例2：点击触发滚动 #

如果是单页内的滚动需求，用amp-scrollable-area配合AMP内置的scrollTo动作：

<amp-story-page id="scroll-page">
  <amp-story-grid-layer template="vertical">
    <!-- 可滚动区域 -->
    <amp-scrollable-area layout="flex-item" height="400px">
      <div class="long-content">
        <!-- 长内容省略 -->
        <div id="bottom-section" style="margin-top: 600px;">底部内容区域</div>
      </div>
    </amp-scrollable-area>
    
    <!-- 滚动触发按钮（注意需放在允许的容器内） -->
    <amp-story-cta-layer>
      <amp-button on="tap:scrollable-area.scrollTo(target='bottom-section', duration=300)">
        跳转到底部
      </amp-button>
    </amp-story-cta-layer>
  </amp-story-grid-layer>
</amp-story-page>

注意：button或amp-button必须放在amp-story-cta-layer、amp-story-interactive等AMP Stories允许的交互容器内，否则会触发验证错误。

2. 开发符合AMP规范的自定义组件 #

如果现有组件完全无法满足需求，可以开发自己的AMP组件，但门槛较高：

• 必须严格遵循AMP的组件开发规范，代码需通过AMP验证（或提交AMP团队审核）
• 组件不能包含任意自定义JS，必须使用AMP提供的沙箱机制和API
• 需保证组件性能符合AMP要求（无阻塞渲染、加载快等）

这种方式适合有AMP开发经验的团队，个人开发者不推荐，开发与维护成本较高。

3. 利用AMP Stories的内置事件扩展交互 #

AMP Stories提供了一些页面级事件，结合amp-bind可以实现更复杂的状态联动：

• 比如amp-story-page的on-active事件：当页面被激活时触发状态变化
• amp-story-interactive组件的交互事件：利用投票、测验等内置交互组件的回调触发其他动作

关键提醒 #

不要尝试绕过AMP的限制（比如插入自定义<script>标签），这会导致你的Stories无法通过AMP验证，也无法在Google搜索、AMP平台等渠道展示。AMP的限制是为了保证所有Stories都有一致的高性能体验，尽量在现有规则内寻找解决方案。

内容的提问来源于stack exchange，提问作者Pravin W