如何将js小部件转换为amp组件

Question

我有用纯 Javascript 编写的小部件。 加载时，它会在页面底部创建一个按钮。 单击该按钮会在 iframe 上创建并在其中加载我的聊天机器人网站。

我有一个小片段，可以将小部件的 js 和 css 加载到 dom 中。

这是一个示例用法：

<script>(function (w, d, s, l, i) {
    w[l]    = i;
    var f   = d.getElementsByTagName(s)[0], j = d.createElement(s);
    j.async = true;
    j.src   = 'https://intaker.co/dist/chat-widget.min.js';
    f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'SU5UQUtFUl9DSEFUX1VSTA==', 'aHR0cHM6Ly9hdHRvcm5leS5jaGF0L2ZhcmhhZA==');</script>

现在，我需要使其与 AMP 页面兼容。我一直在阅读文档并制作了一个组件。但似乎无法将小部件外部脚本加载到组件中！！！

那么我是否必须将整个小部件重写为 AMP 组件？有谁有将这样的小部件转换为 AMP 组件的经验吗？

我真的不想保留同一代码的两个版本:(

更新：我还没有创建任何组件，只是创建了 helloworld 示例 https://codelabs.developers.google.com/codelabs/creating-your-first-amp-component/index.html?index=.. %2F..index#0，我不知道如何将外部脚本嵌入到这个组件中（这似乎不可能！）。

更新2：我想我可以使用amp-script但我不确定
UPDATE3: :( NOPE

amp-script

是实验性的，不能在生产模块中使用它

Answer 1

您的选择是

• 自定义放大器组件
• amp-iframe

自定义组件

使用自定义 amp 组件，您可以探索扩展 amp-iframe 并在该 iframe 中加载网站内容。或者，您可以从头开始构建它，从现有小部件的 JS 中提取必要的逻辑，并了解 amp 组件的生命周期，并将正确的逻辑放置在需要的地方。请注意，走这条路线的好处是其他人可以在他们的网站上使用您的组件，如果这是期望或可能的话。

AMP Iframe

只需在 AMP iframe 中加载您的小部件即可。

Answer 2

我在 primevue 文档中找不到任何关于如何完成此操作的内容，所以这就是我最终得到的。

我无法判断您的菜单是否位于子组件中。如果是这样，您可以简单地创建一个计算属性，将约会属性添加到命令中

props: {
  appointment: Object,
},
computed: {
  items() {
    return [{
      label: 'Reschedule',
      command: this.reschedule(this.appointment)
    }];
  },
},
methods: {
  reschedule(appointment) {
    // appointment & appointment id available here
  },
}

然后绑定菜单项

<Menu ref="menu" :model="items" :popup="true" />

---

如果您的菜单与表数据和数据表组件位于同一组件中，您可以执行计算属性，该属性是具有 id 查找的字典。

computed: {
  appointmentMenuItemsDictionary() {
    return this.appointments.reduce((acc, appointment) => {
      acc[appointment.id] = [{
        label: 'Reschedule',
        command: this.reschedule(appointment)
      }];

      return acc;
    }, {});
  },
},
methods: {
  reschedule(appointment) {
    // appointment & appointment id available here
  },
}

现在将其绑定到每一行

<-- Assuming your menu is within a v-for loop (or within the DataTable component) -->
<Menu
  ref="menu"
  :model="appointmentMenuItemsDictionary[appointment.id]"
  :popup="true"
/>