添加带有动态链接的 webshare api 按钮（wordpress）答案

【问题标题】：Add webshare api button with a dynamic link (wordpress)添加带有动态链接的 webshare api 按钮（wordpress）
【发布时间】：2021-06-06 17:47:20
【问题描述】：

我使用 codesn-p 插件向页面添加块。我想在下面添加一个 webshare api 共享按钮来共享链接 $store_url。我怎样才能为它生成代码？

【问题讨论】：

标签： wordpress plugins code-snippets web-share

【解决方案1】：

请参阅宣布该功能的blog post。这是一个基线示例：

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

对于更复杂的共享要求，例如共享文件，这里有另一个帮助您入门的 sn-p：

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

【讨论】：

如何使用按钮激活此代码。 ?
您创建一个附加了事件侦听器的按钮：document.querySelector('button').addEventListener('click', () => { /* The function */ });