在 Christian Heilmann 在他简洁的文章中对我大喊“你不使用网络共享 API 的借口是什么？”之后，我决定在这个站点中实现Webshare API 。
Webshare API 是如此易于使用，人们不更多地使用它就是犯罪
克里斯蒂安·海尔曼
if ( navigator . share ) {
let shareContainer = document . querySelector ( '.share.cta' ) ;
let shareButton = shareContainer . querySelector ( 'button' ) ;
shareContainer . removeAttribute ( 'hidden' ) ;
let shareObj = {
title : "\"\" on " ,
url : ""
}
shareButton . addEventListener ( "click" , async ( ) => {
try {
await navigator . share ( shareObj ) ;
} catch ( err ) {
console . error ( "Share failed:" , err . message ) ;
}
} ) ;
}首先，整个函数被包装在一个条件中，该条件仅在网络共享 API 可用时才起作用，否则整个元素将被hidden 。
然后我们使用 Nunjucks 模板中可用的值创建shareObj 。
最后，我们使用调用 API 的 try/catch 来处理click 。
我也许应该更好地处理失败。我会将其添加到待办事项中。至少现在，你们可爱的人们可以更轻松地在社交上分享我的内容。